/* ============================================================
   LIVE LIFE WRONG — the bag's extra rows (feature: bag)
   Sits in the bag's [data-cart-extra] slot, above the subtotal:
   the piece that completes a set, the way to free shipping, and
   what the set takes off. Hairlines, no boxes.
   ============================================================ */
.fxbag { margin-bottom: 1.2rem; }
.fxbag[hidden] { display: none; }

/* the set: a ledger line, like the subtotal under it */
.fxbag__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fxbag__num { font-size: var(--text-small); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }

/* free shipping: a quiet line and a hairline that fills */
.fxbag__ship { padding-bottom: 1rem; }
.fxbag__line { font-size: var(--text-small); letter-spacing: 0.04em; color: var(--mute-dark); margin-bottom: 0.65rem; font-variant-numeric: tabular-nums; }
.fxbag__rule { display: block; position: relative; height: 1px; background: var(--color-line); overflow: hidden; }
.fxbag__rule i { position: absolute; inset: 0; background: var(--onyx); transform-origin: left center; transition: transform var(--duration-slow) var(--ease-luxe); }

/* the piece that completes the set */
.fxbag__suggest { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-line); }
.fxbag__media { display: block; aspect-ratio: 4/5; background: var(--ivory-2); overflow: hidden; }
.fxbag__media--flat { background: var(--greige); }
.fxbag__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fxbag__media--flat img { object-fit: contain; padding: 10% 8%; }
.fxbag__info { min-width: 0; }
.fxbag__eyebrow { color: var(--mute); margin-bottom: 0.35rem; }
.fxbag__name { display: block; font-size: var(--text-small); letter-spacing: var(--track-mid); text-transform: uppercase; font-weight: 500; }
.fxbag__price { font-size: var(--text-small); letter-spacing: 0.04em; margin-top: 0.3rem; font-variant-numeric: tabular-nums; }
.fxbag__save { color: var(--mute); }
.fxbag__pick { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.fxbag__pick select {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 0.8em;
  font: inherit; font-size: var(--text-small); letter-spacing: var(--track-mid); font-weight: 500;
  color: var(--onyx); background: transparent; border: 1px solid var(--color-line); border-radius: 0; cursor: pointer;
}
.fxbag__pick select:focus-visible { outline: 1px solid var(--onyx); outline-offset: 3px; }
.cart__foot .fxbag__pick .btn { width: auto; min-height: 40px; padding: 0 1.8em; }

@media (max-width: 760px) {
  .fxbag__pick select, .cart__foot .fxbag__pick .btn { min-height: 44px; }
  .fxbag__pick select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fxbag__rule i { transition: none; }
}