/* The Bag (bag.js): a step in the product page's sheet. Its own header, a group per seller, the summary, and the checkout
   button pinned in the sheet's foot. */
.ig .bag-nav { flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 16px 0 10px; border-bottom: 1px solid #FFFFFF1A; }
.ig .bag-nav-title { font: 600 17px/22px var(--ig-text); letter-spacing: -.43px; }
.ig .bag-count { justify-self: end; }
.ig .bag-body { padding-top: 4px; }   /* the sellers scroll under the header, as a product page does (the kit's .ig-sheet-body) */
.ig .bag-group { gap: 12px; padding: 14px 16px 16px; }
.ig .bag-seller { gap: 8px; }
.ig .bag-seller .t-name { letter-spacing: 0; }
/* the seller's delivery date and returns window, tags under what their order comes to that open the policy (.bag-policy, a sheet over the Basket) */
.ig .bag-tags { align-self: flex-start; gap: 6px; }
.ig .bag-tag { gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; background: #FFFFFF14; font: 500 12px/16px var(--ig-text); color: var(--ig-soft); }
/* under Buy now: one payment for every seller's order. Hidden with one seller or none, so the foot keeps its height */
.ig .bag-cover { justify-content: center; gap: 4px; padding-top: 10px; font: 400 12px/15px var(--ig-text); color: var(--ig-muted); }
.ig .bag-cover.gone { visibility: hidden; }
.ig .bag-policy { gap: 12px; padding: 8px 16px 0; }
.ig .bag-policy .t-name { padding-bottom: 2px; letter-spacing: 0; }
.ig .bag-policy .ig-btn { margin-top: 8px; }
.ig .bag-item { gap: 12px; align-items: center; }
.ig .bag-title { font: 600 15px/19px var(--ig-text); }
.ig .bag-price { padding-top: 4px; font: 600 15px/19px var(--ig-text); font-variant-numeric: tabular-nums; }
.ig .bag-order { gap: 6px; margin-top: 2px; padding-top: 12px; border-top: 1px solid #FFFFFF1A; }   /* what this seller's order comes to */
.ig .bag-rule { height: 8px; flex-shrink: 0; background: #FFFFFF0D; }   /* sellers are separate orders: a band, not a hairline */
.ig .bag-sum { gap: 10px; padding: 12px 16px 0; }   /* the whole Bag, after the last seller's band: its total */
.ig .bag-line { justify-content: space-between; font: 400 14px/18px var(--ig-text); color: var(--ig-soft); font-variant-numeric: tabular-nums; }
.ig .bag-line.total { font: 600 16px/20px var(--ig-text); color: #fff; }
.ig .bag-line.sum { font-weight: 600; color: #fff; }   /* a seller's order total: what they charge */

/* The Bag icon, redrawn (2.0-Icon-1): a design board on the phone, not an Instagram screen. It takes the page's own
   background and ink, so it sits on the page rather than in a phone, in either theme; the dot grid that says canvas comes
   up with the zoom (bag.js), and the steps are told in the note beside it. */
.ig.bag-detail { --ig-muted: var(--muted, #6B6B70); color: var(--fg, #0B0B0B); }   /* the fallbacks: the page's light theme, for tools/screen.html */
.ig .bag-detail-board { inset: 0; width: 402px; height: 874px; }
.ig .bag-detail-hot { color: var(--hot, #4A5DF9); }   /* the faults and the two lines, in the page's accent */
.ig .bag-detail-name { font: 500 3.1px var(--ig-text); fill: var(--ig-muted); }
.ig .bag-detail-dim { font: 600 2.6px var(--ig-text); }
.ig .bag-detail-slot { width: 24px; height: 24px; flex-shrink: 0; }   /* where the header's icons sit; the board draws them */
.ig .bag-detail-board .ava { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent); }   /* a white avatar keeps its edge on a white page */