/* Bundle UI 1.5.524: tier colours, shipping badges, combined bundle + shipping progress card, cart deal tiles,
   Bundle Builder dock. Markup: inc/bundle-ui.php, page-bundle-builder.php, assets/mrc-bundle-ui.js. */

/* ---------- shipping badges ---------- */
.mbui-ship { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 4px 9px; border-radius: 999px; font: 800 12px/1.2 var(--font-body, Manrope), sans-serif; white-space: nowrap; }
.mbui-ship .mbui-i { flex: none; }
.mbui-ship.is-u.is-free { color: #062600; background: #39ff14; }
.mbui-ship.is-t.is-free { color: #001a26; background: #34c6ff; }
.mbui-ship.is-t:not(.is-free) { color: #34c6ff; background: rgba(52, 198, 255, .1); border: 1px dashed rgba(52, 198, 255, .55); }

/* ---------- homepage tier cards (front-page.php .mx3-bt, --tier set inline) ---------- */
.mx3-home .mx3-bts .mx3-bt { background: radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--tier) 42%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tier) 24%, #141414), #111 80%); border-color: color-mix(in srgb, var(--tier) 60%, transparent); box-shadow: 0 10px 26px color-mix(in srgb, var(--tier) 14%, transparent); }
.mx3-home .mx3-bts .mx3-bt--rb { background: linear-gradient(120deg, rgba(255, 46, 196, .26), rgba(255, 181, 71, .16) 32%, rgba(57, 255, 20, .14) 62%, rgba(52, 198, 255, .26)), #121212; }
.mx3-home .mx3-bt .mbui-ship { margin-top: 10px; }

/* ---------- Bundle Builder tier cards (--tc from mrc-bundle-v2.css) ---------- */
.mbv2 .mrc-shop-tier { position: relative; overflow: hidden; background: radial-gradient(160px 110px at 100% 0%, color-mix(in srgb, var(--tc) 45%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tc) 26%, #141414), #111 78%) !important; border-color: color-mix(in srgb, var(--tc) 60%, transparent) !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--tc) 14%, transparent); }
.mbv2 .mrc-shop-tier[aria-pressed="true"] { border-color: var(--tc) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 30%, transparent), 0 14px 34px color-mix(in srgb, var(--tc) 30%, transparent); }
.mbv2 .mrc-shop-tier[data-size="100"] { background: linear-gradient(120deg, rgba(255, 46, 196, .28), rgba(255, 181, 71, .18) 30%, rgba(57, 255, 20, .14) 60%, rgba(52, 198, 255, .26)), #121212 !important; }
.mbv2 .mrc-shop-tier-deal b { color: var(--tc); }
.mbv2 .mrc-shop-tier .mbui-ship { position: static; margin-top: 8px; font-size: 11.5px; }
.mbv2-deals__title { margin: 0; font: 400 24px/1 "Lilita One", var(--font-body), sans-serif; color: #fff; }
.mbv2-deals__legend { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #a3a3a3; font: 600 13px/1.4 var(--font-body), sans-serif; }
.mbv2-deals__legend .is-u { color: #39ff14; display: inline-flex; gap: 4px; align-items: center; }
.mbv2-deals__legend .is-t { color: #34c6ff; display: inline-flex; gap: 4px; align-items: center; }
.mbui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- combined progress card ---------- */
.mbui-lanes { position: relative; box-sizing: border-box; border-radius: 22px; padding: 18px 20px 16px; margin: 0 0 16px; background: radial-gradient(420px 160px at 0% 0%, rgba(199, 125, 255, .26), transparent 70%), radial-gradient(420px 160px at 100% 100%, rgba(57, 255, 20, .16), transparent 70%), #121216; border: 1px solid #2c2c36; color: #fff; font-family: var(--font-body, Manrope), sans-serif; }
.mbui-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mbui-big { margin: 0; font: 400 34px/1 Anton, var(--font-body), sans-serif; letter-spacing: .01em; }
.mbui-big small { font: 600 14px var(--font-body, Manrope), sans-serif; color: #a3a3a3; margin-left: 8px; letter-spacing: 0; }
.mbui-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mbui-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; font: 800 13px/1.2 var(--font-body, Manrope), sans-serif; white-space: nowrap; }
.mbui-chip.is-deal { background: var(--t); color: #14001f; }
.mbui-chip.is-u { background: rgba(57, 255, 20, .12); color: #39ff14; border: 1px solid rgba(57, 255, 20, .45); }
.mbui-chip.is-t { background: rgba(52, 198, 255, .12); color: #34c6ff; border: 1px solid rgba(52, 198, 255, .45); }
.mbui-chip.is-u.is-free { background: #39ff14; color: #062600; }
.mbui-chip.is-t.is-free { background: #34c6ff; color: #001a26; }
.mbui-lane { position: relative; margin-top: 16px; }
.mbui-lane--ship { margin-top: 30px; }
.mbui-lab { display: flex; justify-content: space-between; margin-bottom: 6px; color: #a3a3a3; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.mbui-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.mbui-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #34c6ff, var(--t, #c77dff)); }
.mbui-fill.is-ship { background: linear-gradient(90deg, #1f8f0a, #39ff14 55%, #34c6ff); }
.mbui-stop { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid #121216; background: #24242c; box-shadow: inset 0 0 0 2px var(--t); display: flex; align-items: center; justify-content: center; color: #062600; }
.mbui-stop.is-done { background: var(--t); box-shadow: none; }
.mbui-stoplab { position: absolute; top: 18px; transform: translateX(-50%); color: var(--t); font: 800 11.5px/1.2 var(--font-body, Manrope), sans-serif; white-space: nowrap; }
.mbui-stoplab.is-end { transform: translateX(-100%); }
.mbui-mark { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1b1b22; z-index: 2; }
.mbui-mark.is-u { color: #39ff14; box-shadow: inset 0 0 0 2px #39ff14; }
.mbui-mark.is-t { color: #34c6ff; box-shadow: inset 0 0 0 2px #34c6ff; }
.mbui-mark.is-end { left: auto; right: -4px; margin-left: 0; }
.mbui-mark.is-u.is-done { background: #39ff14; color: #062600; }
.mbui-mark.is-t.is-done { background: #34c6ff; color: #001a26; }
.mbui-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font: 800 12px/1.3 var(--font-body, Manrope), sans-serif; }
.mbui-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mbui-legend .is-u { color: #39ff14; }
.mbui-legend .is-t { color: #34c6ff; }
.mbui-legend .is-muted { color: #a3a3a3; }
.mbui-note { margin: 8px 0 0; color: #9a9a9a; font: 600 12px/1.4 var(--font-body, Manrope), sans-serif; }

/* ---------- cart deal tiles (desktop) ---------- */
.mbui-tiles { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; margin: 0 0 6px; scrollbar-width: none; }
.mbui-tile { position: relative; flex: 1 0 120px; min-width: 120px; max-width: 160px; box-sizing: border-box; padding: 12px 12px 14px; border-radius: 16px; text-decoration: none; color: #fff; border: 1.5px solid color-mix(in srgb, var(--t) 55%, transparent); background: radial-gradient(120px 80px at 100% 0%, color-mix(in srgb, var(--t) 40%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--t) 22%, #121212), #121212 80%); overflow: hidden; }
.mbui-tile:hover, .mbui-tile:focus-visible { color: #fff; border-color: var(--t); }
.mbui-tile.is-next { border-color: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 25%, transparent), 0 10px 24px color-mix(in srgb, var(--t) 25%, transparent); }
.mbui-tile__next { position: absolute; top: 10px; right: 10px; padding: 3px 6px; border-radius: 6px; background: var(--t); color: #0b0b0b; font: 800 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.mbui-tile__n { display: flex; align-items: baseline; gap: 5px; color: #d0d0d0; font: 700 13px var(--font-body, Manrope), sans-serif; }
.mbui-tile__n b { font: 400 34px/1 Anton, sans-serif; color: var(--t); }
.mbui-tile__p { display: block; margin-top: 2px; font: 800 20px/1.1 var(--font-body, Manrope), sans-serif; }
.mbui-tile__e { display: block; margin-top: 2px; color: #a3a3a3; font: 600 12px var(--font-body, Manrope), sans-serif; }
.mbui-tile__bar { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mbui-tile__bar > span { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mbui-tile__bar i { display: block; height: 100%; background: var(--t); }
.mbui-tile__bar em { font: 700 11px "JetBrains Mono", monospace; font-style: normal; color: var(--t); }
.mbui-tile.is-more { display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1.5px dashed #444; background: #111; font: 700 13px var(--font-body, Manrope), sans-serif; color: #d0d0d0; }
.mbui-tile__rb { font: 400 26px/1 Anton, sans-serif; background: linear-gradient(90deg, #ff2ec4, #ffb547, #39ff14, #34c6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 799px) {
  .mbui-lanes { padding: 16px 14px 14px; border-radius: 20px; }
  .mbui-big { font-size: 30px; }
  .mbui-chips { width: 100%; }
  .mbui-stoplab { font-size: 11px; }
  .mbui-tiles, .mrc-ux-cart .mcx-ladder { display: none; }
}

/* ---------- Bundle Builder v2: wider catalogue + bundle dock (desktop) ---------- */
@media (min-width: 1100px) {
  .mbui-dock-page .mbv2-workspace { grid-template-columns: 240px minmax(0, 1fr) !important; padding-bottom: 150px; }
  .mbui-dock-page .mbv2-workspace .mrc-shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mbui-dock-page .mbv2-tray { height: auto !important; min-height: 0 !important; max-height: none !important; top: auto !important; overflow: visible !important; position: fixed !important; left: 50%; bottom: 16px; z-index: 60; transform: translateX(-50%); width: min(1240px, calc(100% - 40px)) !important; max-width: none; margin: 0; padding: 14px 18px !important; box-sizing: border-box; display: grid !important; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 1.2fr) auto auto; grid-template-areas: "head slots prog total add"; align-items: center; gap: 18px; border-radius: 22px; background: rgba(18, 18, 22, .96) !important; border: 1px solid #2f2f3a; box-shadow: 0 -12px 48px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
  .mbui-dock-page .mbv2-tray .mrc-shop-builder-head { grid-area: head; display: flex; align-items: center; gap: 10px; margin: 0; }
  .mbui-dock-page .mbv2-tray .mrc-shop-builder-head h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.1; white-space: nowrap; }
  .mbui-dock-page .mbv2-tray .mrc-shop-builder-head button { padding: 4px 10px; font-size: 12px; }
  .mbui-dock-page .mbv2-tray .mrc-shop-slots { grid-area: slots; display: flex !important; gap: 6px; max-height: none; overflow: hidden; padding: 0; max-width: 470px; }
  .mbui-dock-page .mbv2-tray .mrc-shop-slots > * { flex: 0 0 40px; width: 40px !important; height: 40px !important; min-height: 0 !important; aspect-ratio: auto; padding: 0 !important; border-radius: 10px; font-size: 0 !important; overflow: hidden; }
  .mbui-dock-page .mbv2-tray .mrc-shop-slots > * img { width: 100%; height: 100%; object-fit: contain; }
  .mbui-dock-page .mbv2-tray .mrc-shop-slots > * :not(img):not(picture) { display: none; }
  .mbui-dock-page .mbv2-tray .mrc-shop-progress { grid-area: prog; margin: 0; min-width: 0; }
  /* 1.5.526: keep the count and "N to go" on one line each, and the shipping hint to one line (it wrapped into four stacked fragments) */
  .mbui-dock-page .mbv2-tray .mrc-shop-slots { min-width: 0; }
  .mbui-dock-page .mbv2-tray .mrc-shop-progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: nowrap; }
  .mbui-dock-page .mbv2-tray .mrc-shop-progress-meta > * { white-space: nowrap; }
  .mbui-dock-page .mbv2-tray .mbui-dockship__ship { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbui-dock-page .mbv2-tray .mbui-dockship__ship > :not(svg) { overflow: hidden; text-overflow: ellipsis; }
  .mbui-dock-page .mbv2-tray .mrc-shop-milestone, .mbui-dock-page .mbv2-tray__nudge { display: none !important; }
  .mbui-dock-page .mbv2-tray .mrc-shop-total { grid-area: total; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; background: none; }
  .mbui-dock-page .mbv2-tray .mrc-shop-total span { font: 700 11px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  .mbui-dock-page .mbv2-tray .mrc-shop-add { grid-area: add; margin: 0; width: auto; min-width: 170px; }
  .mbui-dock-page .mbv2-tray .mrc-shop-error { position: absolute; left: 18px; bottom: calc(100% + 8px); margin: 0; }
}
.mbui-dockship { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mbui-dockship__bar { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.mbui-dockship__bar i { display: block; height: 100%; background: linear-gradient(90deg, #34c6ff, var(--t, #c77dff)); transition: width .25s ease; }
.mbui-dockship__ship { display: flex; align-items: center; gap: 5px; font: 700 12px/1.3 var(--font-body, Manrope), sans-serif; }
.mbui-dockship__ship.is-u { color: #39ff14; }
.mbui-dockship__ship.is-t { color: #34c6ff; }
.mrc-shop-mobile-summary .mbui-dockship__ship { font-size: 11px; margin-top: 3px; }

/* ---------- product page "Mix & match" (inc/cro.php) ---------- */
.cro-pack-meter.is-lanes { padding: 0; border: 0; background: none; }
.cro-pack-meter.is-lanes .mbui-lanes { margin: 4px 0 14px; }
.cro-ladder li[style*="--t"] { border-color: color-mix(in srgb, var(--t) 60%, transparent) !important; background: linear-gradient(160deg, color-mix(in srgb, var(--t) 30%, #151515), #141414 85%) !important; }
.cro-ladder li[style*="--t"] strong { color: var(--t) !important; }
.cro-ladder li.is-next[style*="--t"] { border-color: var(--t) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 25%, transparent); }