/* ---- Sell screen ---- */
.sell-zone-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--muted-text);
  margin: 0 0 12px;
}

/* Two-up at EVERY width, phones included (#51). A full-width row per item spends the horizontal
   half of a phone screen to show one ~50px tile, which is how the register ended up showing 2 of 15
   items at 390x664. Two columns and a tight gutter is the density a menu board has for the same
   reason: the cashier is scanning names, not reading prose. */
.item-grid {
  display: grid;
  /* minmax(0,1fr) (not 1fr) so a non-shrinkable child — e.g. a stock badge's min-content width —
     can't blow the track past the card edge; the tile content truncates within its column instead. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

/* Favorites speed grid: same 2-col layout as .item-grid, but the keys are visually elevated
   for rush-hour speed (light-blue accent inset border + a little more padding). Real surfaces,
   no glassmorphism, Nimiq palette only (the light-blue accent already used at rgba(5,130,202,...)). */
.fav-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

/* Wrapper holding the favourite's tap button + its star as SIBLINGS (a button cannot nest a
   button), mirroring .item-tap-row exactly. The wrapper owns the tile surface so the two controls
   sit side by side and neither covers the other's hit area — the "occluded" trap #37 hit on the
   catalog grid, solved there the same way. */
.fav-tap-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(5, 130, 202, 0.35);
  transition: box-shadow 0.15s var(--nimiq-ease), transform 0.15s var(--nimiq-ease);
}

@media (hover: hover) {
  .fav-tap-row:hover {
    box-shadow: inset 0 0 0 2px rgba(5, 130, 202, 0.6);
  }
}

.fav-tap-row:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px rgba(5, 130, 202, 0.85);
}

.fav-tap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* The star sits inside the tile, right edge, clearing the WCAG 2.5.5 44px floor without stealing
   width from a name that is already ellipsizing in a two-up cell. */
.fav-tap-row .pin-toggle {
  flex: none;
  align-self: center;
}

.fav-tap .tap-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--nimiq-blue);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-tap .tap-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nimiq-light-blue);
}

/* Wrapper holding the catalog tap button + its pin/star as siblings (a button can't nest a
   button). The wrapper carries the white tile surface and lays the two controls out side by
   side, so neither covers the other. It used to be a positioning context with the pin floating
   absolutely over the row, which put a 44px control on top of the tap button's own hit area
   (nq lint "occluded", issue #37): same tile, no overlap. */
.item-tap-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.08);
  transition: box-shadow 0.15s var(--nimiq-ease), transform 0.15s var(--nimiq-ease);
}

/* Light tappable rows (NOT navy-gradient buttons). White surface with a soft inset
   hairline, navy name left, secondary-navy price right; a subtle press/hover state.
   Reserves navy-gradient nq-buttons for true CTAs only (decision 4). The surface itself
   lives on .item-tap-row above; the button is transparent and owns the name/price only. */
/* A two-up cell is ~150px wide, so the name and the price STACK (the fav keys already do) rather
   than fighting over one line — the same shape a menu board uses. The tile still clears the 44px
   tap floor: 6px + name + price + 6px lands around 46px. */
.item-tap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 0 5px 12px; /* the pin/star is a flex sibling now, it reserves its own space */
  background: none;
  border: none;
  border-radius: 8px; /* shapes the keyboard focus ring; the tile fill is on the row */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* In-row pin/star affordance: small, sits at the top-right of the catalog row as a flow
   sibling of the tap button. Secondary-navy outline by default; filled light-blue when the
   item is pinned. Its own hit target (the JS stopPropagation()s so it never adds to the cart). */
/* The pin is a flow SIBLING of the tap button, never an overlay on top of it (that put a 44px
   control over the tap area, nq lint "occluded", issue #37), so it reserves its own 44px column at
   the tile's trailing edge. Zero margin at two-up: on a ~150px cell every pixel it takes is a pixel
   the item name loses. */
.pin-toggle {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 500px;
  background: transparent;
  color: rgba(31, 35, 72, 0.35);
  cursor: pointer;
  /* colour only: the star says everything, and a disc behind it does not (see the hover note). */
  transition: color 0.15s var(--nimiq-ease);
}

.pin-toggle .nq-icon {
  width: 18px;
  height: 18px;
}

/* NO disc behind the star (Andrew, 2026-07-26: "remove the circle behind the star"). Hover is a
   colour change and nothing else.
   The tinted circle was not only heavy, it was STICKY: iOS keeps :hover applied to the last thing
   you touched until you tap somewhere else, so tapping the star to un-favourite an item left a lit
   blue disc sitting on the tile afterwards, which is the state in his screenshot. Expressing hover
   purely as colour removes the ornament and that whole class of touch bug with it. The 28x28 box and
   its radius stay: that is the tap target (WCAG 2.5.5), and it is invisible without a background. */
@media (hover: hover) {
  .pin-toggle:hover {
    color: rgba(5, 130, 202, 0.7);
  }
}

.pin-toggle.is-pinned {
  color: var(--nimiq-light-blue);
}

@media (hover: hover) {
  .pin-toggle.is-pinned:hover {
    color: var(--nimiq-light-blue);
  }
}

/* Hover/press feedback belongs to the whole tile, so it is driven from the row (which owns the
   surface) off the tap button's own state. :has() keeps the pin out of it: hovering the star
   must not light the tile ring, exactly as before. */
@media (hover: hover) {
  .item-tap-row:has(> .item-tap:hover) {
    box-shadow: inset 0 0 0 2px rgba(5, 130, 202, 0.4);
  }
}

.item-tap-row:has(> .item-tap:active) {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px rgba(5, 130, 202, 0.6);
}

.item-tap .tap-name {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--nimiq-blue);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-tap .tap-price {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* Greyed-out unsellable tile (server `sellable===false`): dimmed, not-allowed, hover is inert so
   it reads as disabled. The state class rides the ROW (it owns the ring), while the dimming stays
   on the tap button so the pin/star keeps full strength and stays clickable. */
.item-tap-row.is-unavailable {
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
}

.item-tap-row.is-unavailable .item-tap,
.fav-tap.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
}

.fav-tap.is-unavailable {
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
}

.item-tap-row.is-unavailable:has(> .item-tap:active) {
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
  transform: none;
}

@media (hover: hover) {
  .item-tap-row.is-unavailable:has(> .item-tap:hover),
  .fav-tap.is-unavailable:hover {
    box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.06);
    transform: none;
  }
}

/* The sold-out / 86 badge as it sits INSIDE a tap tile (inherits .stock-badge styling). */
.item-tap .tap-badge,
.fav-tap .tap-badge {
  margin-top: 2px;
}

.cart-list {
  display: flex;
  flex-direction: column;
}

.cart-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
}

.cart-row + .cart-row {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

/* Name column holds the item name, an optional inline note line, and the add/edit-note action.
   It is the flexible cell of the cart row; the qty stepper + line total stay fixed-width beside it. */
.cart-row .cart-name-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.cart-row .cart-name {
  font-size: 2rem;
  font-weight: 600;
  /* long resolved modifier names ("Latte (Large, +Oat milk)") wrap rather than overflow the row */
  overflow-wrap: anywhere;
}

/* Inline per-line note: small, muted secondary-navy, no italics-as-decoration. */
.cart-row .cart-note {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
  overflow-wrap: anywhere;
}

/* The add/edit-note text-action sits under the name as a compact affordance (reuses .text-action). */
.cart-row .cart-note-action {
  font-size: 1.625rem;
  padding: 2px 0;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.qty-stepper .qty-value {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}

.qty-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qty-btn svg {
  width: 14px;
  height: 14px;
}

.cart-row .cart-line {
  flex: 0 0 auto;
  font-size: 2rem;
  font-weight: 700;
  min-width: 64px;
  text-align: right;
}

.cart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 12px;
}

/* Every action button in the brand is a pill, text-only ones included: the button has no fill
   and no border, so the radius is invisible at rest and only shapes the keyboard focus ring
   (nq lint "non-pill action buttons", issue #37). */
.text-action {
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--muted-text);
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}

@media (hover: hover) {
  .text-action:hover {
    color: var(--nimiq-blue);
  }
}

/* The footer total line above the Charge CTA. */
.footer-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 38px;
  margin-top: 8px;
}

.footer-total .total-label {
  font-size: 2rem;
  font-weight: 600;
  color: var(--muted-text);
}

.footer-total .total-value {
  font-size: 3.5rem;
  font-weight: 700;
}

/* The ONE row of chrome above the menu (#51): the search field takes the width, "More" (the
   quick-actions sheet) trails it. With an empty catalog there is no search field and the row
   carries "More" alone, right-aligned. */
.sell-utility-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 4px;
}

.zone-more {
  flex: 0 0 auto;
  padding: 0 8px;
}

/* ---- Tip + discount selectors (sell screen). The discount selector is a sibling of the
   tip selector and reuses the exact same flex layout + light-blue .selected pill state, so
   the two read as one consistent control. ---- */
.tip-selector,
.discount-selector {
  margin-bottom: 24px;
}

.tip-segments,
.discount-segments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* preset pills: nq-button-s base, with a clear selected (light-blue) state. min-width is in rem so
   it scales with large-text mode; combined with the row's flex-wrap the pills wrap onto a second
   line at 1.5x instead of overflowing / clipping the "Custom" label on a narrow phone. */
.tip-pill,
.discount-pill {
  flex: 1 1 auto;
  min-width: 7rem;
  padding: 0 12px;
  justify-content: center;
}

.tip-pill.selected,
.discount-pill.selected {
  background: var(--nimiq-light-blue);
  color: #fff;
}

@media (hover: hover) {
  .tip-pill.selected:hover,
  .discount-pill.selected:hover {
    background: var(--nimiq-light-blue);
  }
}

.tip-custom-row,
.discount-custom-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.tip-custom-row .tip-custom-label,
.discount-custom-row .discount-custom-label {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--muted-text);
  padding-bottom: 12px;
}

.tip-custom-row .price-field,
.discount-custom-row .price-field {
  flex: 1 1 auto;
  width: auto;
}

/* ---- R21 saved/preset discounts: named quick tiles above the generic % pills, + a quiet
   "Manage presets" text-action, + the create/delete overlay. Reuses the pill + manager-gate
   tokens; no new colors. ---- */
.discount-saved {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* A saved tile carries the merchant's own label; manager-only presets are marked by the inline
   "· manager" suffix in the label (no one-sided accent border — brand rule 19). */
.discount-saved-pill {
  flex: 1 1 auto;
  min-width: 7rem;
  padding: 0 12px;
  justify-content: center;
}

.discount-manage {
  margin-top: 8px;
}

/* The preset manager reuses the centered .manager-gate-overlay/.manager-gate-card modal. */
.discount-manager-title {
  margin: 0 0 16px;
}

.discount-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.discount-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.discount-manager-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.discount-manager-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discount-manager-meta {
  font-size: 1.5rem;
  color: var(--muted-text);
}

.discount-manager-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discount-kind-segments {
  display: flex;
  gap: 8px;
}

.discount-manager-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-text);
}

/* ---- Sell subtotal/discount/tip breakdown (in the scrollable body, above the footer) ---- */
.sell-breakdown {
  margin-top: 16px;
}

.breakdown-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
}

.breakdown-line .bl-label {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--muted-text);
}

.breakdown-line .bl-value {
  font-size: 1.875rem;
  font-weight: 600;
}

/* Discount value: the negative amount stays in the standard navy value color (no new
   color, no red — red is reserved for errors). The leading minus carries the meaning. */
.breakdown-line .bl-discount {
  color: var(--nimiq-blue);
}

/* Tax value: a positive add (like tip), standard navy value color — no new color, no minus. */
.breakdown-line .bl-tax {
  color: var(--nimiq-blue);
}