/* "For sale on market" pill on inventory cards (top-right, gold-tinted) */
  .inv-listing {
    position: absolute;
    right: 8px; top: 8px;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    border: 1px solid rgba(160,140,40,0.45);
    background: rgba(40, 30, 8, 0.75);
    color: #e6d59b;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 4;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .inv-listing:hover { background: rgba(80, 60, 18, 0.95); color: #ffe9a8; }
  .inv-listing svg { width: 12px; height: 12px; display: block; }

  /* Two-zone pill: icon cancels listings; price-zone hover swaps in an <input>. */
  .inv-listing { padding-right: 4px; cursor: default; }
  .inv-listing-cancel {
    background: transparent; border: none; color: inherit;
    padding: 0 4px 0 0; cursor: pointer;
    display: grid; place-items: center;
    position: relative;
  }
  .inv-listing-cancel:hover { color: #fff7d6; }
  /* Touch: expand hit-area to 44px without changing visual size (the pill is
     already tight). ::after pseudo-element extends the tap zone. */
  @media (hover: none) {
    .inv-listing-cancel::after {
      content: '';
      position: absolute;
      inset: -14px -10px;
    }
  }
  /* Two-zone pill: cancel icon on the left, price-zone on the right with an
     inline number-input that swaps in on hover/focus-within. */
  .inv-listing-price {
    position: relative; min-width: 28px;
    display: inline-grid; place-items: center;
    cursor: text;
  }
  .inv-listing-price .num { display: inline; padding: 0 2px; }
  .inv-listing-price .num-input {
    position: absolute; inset: -2px -4px;
    width: calc(100% + 8px);
    background: rgba(40,30,8,0.95);
    border: 1px solid rgba(220,180,80,0.55);
    border-radius: 999px;
    color: #fff7d6;
    font: inherit; font-weight: 700;
    text-align: center;
    padding: 1px 4px;
    outline: none;
    display: none;
  }
  .inv-listing-price .num-input::-webkit-outer-spin-button,
  .inv-listing-price .num-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .inv-listing-price .num-input { -moz-appearance: textfield; }
  .inv-listing-price:hover .num-input,
  .inv-listing-price:focus-within .num-input { display: block; }
  .inv-listing-price:hover .num,
  .inv-listing-price:focus-within .num { visibility: hidden; }

  /* Touch: hover-reveal price input never fires on touch → always show the
     input so the user can tap and edit the price. The .num text is hidden
     via focus-within once the input is tapped. */
  @media (hover: none) {
    .inv-listing-price .num-input { display: block; }
    .inv-listing-price .num { visibility: hidden; }
  }