/* Moonlit — bag page. Figma 19:9490 (title pt60/pb32, strip 48, body 844 | 420 gap 64). */
.ml-cart { padding-bottom: 96px; }
.ml-cart__title { display: flex; align-items: flex-end; gap: 12px; padding-top: 60px; padding-bottom: 32px; }
.ml-cart__title p { padding-bottom: 8px; }
.ml-cart__strip { background: var(--ml-indigo); color: var(--ml-inverse); }
.ml-cart__strip p { padding-block: 14px; }
.ml-cart__body { display: grid; grid-template-columns: minmax(0, 844fr) minmax(0, 420fr); gap: 64px; align-items: start; padding-top: 24px; }
.ml-cart__gift { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 18px 20px; background: var(--ml-mist); }
.ml-cart__gift > svg { color: var(--ml-icon); }
.ml-cart__gt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.ml-cart__gt em { font-style: normal; }
.ml-tog { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--ml-line); transition: background .3s ease; flex: 0 0 auto; }
.ml-tog i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px; background: var(--ml-white); transition: transform .3s ease, background .3s ease; }
.ml-tog[aria-checked='true'] { background: var(--ml-midnight); }
.ml-tog[aria-checked='true'] i { transform: translateX(16px); background: var(--ml-moon); }

.ml-cart__sum { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--ml-white); border: 1px solid var(--ml-line); }
.ml-cart__sh { font-family: var(--ml-display); font-weight: 300; font-size: 30px; line-height: 1.1; }
.ml-cart__rows { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ml-cart__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.ml-cart__rows dd { margin: 0; }
.ml-accent-t { color: var(--ml-accent); }
.ml-cart__total { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--ml-line); }
.ml-cart__total .ml-label { padding-bottom: 3px; }
.ml-cart__tv { font-family: var(--ml-display); font-size: 32px; line-height: 1; }
.ml-cart__affirm { padding: 12px 14px; background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-cart__pay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ml-cart__note { display: flex; flex-direction: column; gap: 8px; }
.ml-cart__ta { width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--ml-line); background: var(--ml-white); font: inherit; font-size: 14px; resize: vertical; }
.ml-cart__share { border-top: 1px solid var(--ml-line); padding-top: 16px; }
.ml-cart__shareb { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ml-cart__shareb a, .ml-cart__shareb button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--ml-line); background: none; color: var(--ml-text); font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.ml-cart__pay li { display: flex; align-items: center; justify-content: center; min-height: 35px; border: 1px solid var(--ml-line); text-align: center; }
.ml-cart__assure { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ml-line); }
.ml-cart__assure li { display: flex; gap: 10px; align-items: center; }
.ml-cart__assure svg { color: var(--ml-icon); flex: 0 0 auto; }

/* page lines (ctx=page): 150x170 photo, Cormorant 26 */
.ml-lines--page .ml-line { grid-template-columns: 150px 1fr; gap: 24px; padding: 28px 0; }
.ml-lines--page .ml-line__m { width: 150px; aspect-ratio: 150 / 170; }
.ml-lines--page .ml-line__t { font-size: 26px; }
.ml-lines--page .ml-line__top { display: flex; justify-content: space-between; gap: 16px; }
.ml-lines--page .ml-qty { padding: 8px 14px; gap: 18px; }
.ml-line__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ml-line__ship { color: var(--ml-accent); }
.ml-line__acts { display: flex; gap: 20px; flex-wrap: wrap; }
.ml-line__acts a, .ml-line__acts button { color: var(--ml-text-2); transition: color .3s ease; }
.ml-line__acts a:hover, .ml-line__acts button:hover { color: var(--ml-accent); }

@media (max-width: 1023px) {
  .ml-cart__body { grid-template-columns: 1fr; gap: 32px; }
  .ml-cart__sum { position: static; }
}
@media (max-width: 767px) {
  .ml-cart__title { padding-top: 32px; padding-bottom: 20px; }
  .ml-lines--page .ml-line { grid-template-columns: 96px 1fr; gap: 14px; padding: 20px 0; }
  .ml-lines--page .ml-line__m { width: 96px; }
  /* Figma 19:12581: 17px title, no action row (remove stays on the ×), four pay chips in one row */
  .ml-lines--page .ml-line__t { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ml-lines--page .ml-line__acts { display: none; }
  .ml-cart__sum { padding: 24px 20px; }
  .ml-cart__pay { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .ml-cart__pay li { font-size: 10px; letter-spacing: .04em; }
}

/* ---------------------------------------------------------------- "Protect this item" (protect-this-item-rule,
   mlt-care.js): a care-plan box under each piece on the bag page, in Moonlit's own type and colours */
.ml-care { grid-column: 1 / -1; min-width: 0; }
.ml-care:empty { display: none; }
.ml-pc { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--ml-white); border: 1px solid var(--ml-line); }
.ml-pc__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ml-pc__t { display: flex; align-items: center; gap: 12px; font-family: var(--ml-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.ml-pc__sh { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--ml-midnight); color: var(--ml-lunar); }
.ml-pc__s { margin-top: -6px; }
.ml-pc__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }
.ml-pc__o { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 30px 10px 18px; background: var(--ml-white); border: 1px solid var(--ml-line); color: var(--ml-text); font: inherit; text-align: center; cursor: pointer; transition: border-color .25s ease, background .25s ease; }
.ml-pc__o:hover { border-color: var(--ml-icon); }
.ml-pc__o.is-on { border-color: var(--ml-midnight); background: var(--ml-pearl); box-shadow: inset 0 0 0 1px var(--ml-midnight); }
.ml-pc__o:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }
.ml-pc__r { position: absolute; top: 12px; left: 12px; width: 14px; height: 14px; border: 1px solid var(--ml-icon); border-radius: 50%; }
.ml-pc__o.is-on .ml-pc__r { border-color: var(--ml-midnight); background: var(--ml-midnight); box-shadow: inset 0 0 0 3px var(--ml-white); }
.ml-pc__i { color: var(--ml-accent); }
.ml-pc__o.is-free .ml-pc__i { color: var(--ml-text-2); }
.ml-pc__n { font-size: 13px; font-weight: 500; line-height: 1.3; }
.ml-pc__p { font-family: var(--ml-display); font-size: 26px; line-height: 1; }
.ml-pc__top { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; background: var(--ml-midnight); color: var(--ml-lunar); font-size: 9px; letter-spacing: .14em; white-space: nowrap; }
@media (max-width: 767px) { .ml-pc__top { font-size: 11px; letter-spacing: .1em; } }   /* 3 Nov (RESPONSIVE): a label on a phone is at least 11px */
.ml-pc__b { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--ml-line); background: var(--ml-pearl); }
.ml-pc__bt { display: inline-flex; align-items: center; gap: 8px; }
.ml-pc__bt svg { color: var(--ml-accent); }
.ml-pc__bl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; color: var(--ml-text-2); }
.ml-pc__bl li { position: relative; padding-left: 14px; }
.ml-pc__bl li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ml-lunar); }
.ml-pc__f { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ml-pc__f span::before { content: '\2713\00a0'; color: var(--ml-accent); }
.ml-pc__f .ml-pc__fr { margin-left: auto; }
.ml-pc__f .ml-pc__fr::before { content: none; }
.ml-pc__tot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--ml-line); }
.ml-pc__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--ml-mist); color: var(--ml-text); font-size: 12px; }
.ml-pc__badge svg { color: var(--ml-accent); }
.ml-pc__badge.is-off { color: var(--ml-text-2); }
.ml-pc__it { display: inline-flex; align-items: baseline; gap: 12px; }
.ml-pc__iv { font-family: var(--ml-display); font-size: 24px; }
.ml-line__care { display: inline-flex; align-items: center; gap: 6px; color: var(--ml-accent); }
html.ml-care-busy a[href="/checkout"] { opacity: .7; cursor: progress; }
.ml-pc-note { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 200; padding: 12px 18px; background: var(--ml-midnight); color: var(--ml-inverse); }
@media (max-width: 820px) {
  .ml-pc { padding: 18px 14px; }
  .ml-pc__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .ml-pc__bl { grid-template-columns: 1fr; }
  .ml-pc__f .ml-pc__fr { margin-left: 0; }
  .ml-pc__t { font-size: 22px; }
}

/* the care plan as its own bag line, under the piece it protects (user, 2026-10-25) */
.ml-line--care .ml-line__cm { aspect-ratio: 1; height: auto; align-self: start; background: var(--ml-midnight); }
.ml-line--care .ml-line__cm img { object-fit: cover; }
.ml-line--care .ml-line__t { cursor: default; }
.ml-lines--page .ml-line--care .ml-line__cm { width: 96px; }
.ml-lines--page .ml-line--care .ml-line__t { font-size: 22px; }
.ml-lines--page .ml-line--care { grid-template-columns: 96px 1fr auto; padding-left: 54px; }
.ml-line--care .ml-line__cx { width: 36px; height: 36px; color: var(--ml-text-2); }
.ml-line--care.is-going { opacity: .45; pointer-events: none; }
/* P80: the plan's −/+ follow the piece's stepper, so they are shown but disabled */
.ml-line--care .ml-qty__b:disabled { opacity: .35; cursor: not-allowed; }
.ml-line--care .ml-qty__b:disabled:hover { color: var(--ml-text); }
@media (max-width: 767px) { .ml-lines--page .ml-line--care { grid-template-columns: 64px 1fr auto; padding-left: 0; } .ml-lines--page .ml-line--care .ml-line__cm { width: 64px; } .ml-lines--page .ml-line--care .ml-line__t { font-size: 18px; } }

/* 30 Oct 2026 (user: "remove button niche lelo"): in the bag drawer a piece's "Remove" sits at the bottom of its line,
   level with the quantity stepper; the price stays at the top. Care-plan lines keep their ✕ as it is. */
.ml-lines--drawer .ml-line:not(.ml-line--care) .ml-line__p { justify-content: space-between; }
.ml-lines--drawer .ml-line:not(.ml-line--care) .ml-line__x { min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 1023px), (pointer: coarse) { .ml-lines--drawer .ml-line:not(.ml-line--care) .ml-line__x { min-height: 58px; } }   /* the touch stepper is 58px tall (44px buttons + its padding) */