/* BAD package builder styles. Ported from the Shopify block, with the store's "order form on black"
   and "tighter size grid" overrides from the Shopify theme's custom CSS (Nov 10, 2026). */
.bad-pkg {
  --bp-ink: #ffffff;
  --bp-bg: #0b0b0b;
  --bp-muted: #b9bcc2;
  --bp-line: #3d3d3d;
  --bp-soft: #161616;
  --bp-blue: #6ea8ff;
  --bp-blue-soft: #13233d;
  --bp-ok: #3ecf8e;
  --bp-err: #ff6b5e;
  container: badpkg / inline-size;
  display: grid;
  box-sizing: border-box;
  gap: 22px;
  width: 100%;
  color: var(--bp-ink);
  font-size: 15px;
  line-height: 1.45;
}
.bad-pkg button { font: inherit; cursor: pointer; letter-spacing: normal; text-transform: none; }
.bad-pkg button:focus-visible, .bad-pkg input:focus-visible { outline: 2px solid var(--bp-blue); outline-offset: 2px; }
.bad-pkg .bp-from { margin: 0; font-size: 18px; font-weight: 600; }
.bad-pkg .bp-muted { margin: 0; color: var(--bp-muted); font-size: 14px; }
.bad-pkg .bp-btn { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--bp-line); background: var(--bp-bg); color: var(--bp-ink); font-size: 13px; font-weight: 600; }
.bad-pkg .bp-btn:hover { border-color: var(--bp-ink); }

.bad-pkg .bp-promise { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 2px solid var(--bp-ink); border-radius: 10px; }
.bad-pkg .bp-badge { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bp-ok); color: #0b0b0b; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.bad-pkg .bp-promise strong { display: block; font-size: 16px; line-height: 1.3; }
.bad-pkg .bp-promise span { display: block; margin-top: 3px; font-size: 14px; color: var(--bp-muted); }

.bad-pkg .bp-step h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; font-family: inherit; }
.bad-pkg .bp-pkgs { display: grid; gap: 8px; }
.bad-pkg .bp-pkg { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 12px 14px; border: 1px solid var(--bp-line); border-radius: 8px; background: var(--bp-bg); color: var(--bp-ink); width: 100%; }
.bad-pkg .bp-pkg:hover { border-color: var(--bp-muted); }
.bad-pkg .bp-pkg[aria-pressed="true"] { border-color: var(--bp-ink); box-shadow: inset 0 0 0 1px var(--bp-ink); background: var(--bp-soft); }
.bad-pkg .bp-l strong { display: block; font-size: 15px; }
.bad-pkg .bp-l span { font-size: 13px; color: var(--bp-muted); }
.bad-pkg .bp-r { font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bad-pkg .bp-extra-info { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bp-soft); font-size: 14px; }
.bad-pkg .bp-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bp-blue-soft); color: var(--bp-blue); font-size: 14px; }
.bad-pkg .bp-nudge p { margin: 0; flex: 1 1 220px; }
.bad-pkg .bp-nudge .bp-btn { border-color: var(--bp-blue); color: var(--bp-blue); background: var(--bp-bg); }

.bad-pkg .bp-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bad-pkg .bp-slot { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed #c8c8c8; border-radius: 8px; background: var(--bp-bg); min-height: 56px; }
.bad-pkg .bp-slot.is-active { border-style: solid; border-color: var(--bp-ink); }
.bad-pkg .bp-slot.is-filled { border-style: solid; }
.bad-pkg .bp-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; margin: 0; border: 0; background: none; color: var(--bp-ink); text-align: left; }
.bad-pkg .bp-t { display: grid; line-height: 1.2; min-width: 0; }
.bad-pkg .bp-t strong { font-size: 14px; }
.bad-pkg .bp-t span { font-size: 12px; color: var(--bp-muted); }
.bad-pkg .bp-x { margin-left: auto; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--bp-line); background: var(--bp-bg); color: var(--bp-muted); font-size: 16px; line-height: 1; flex: none; }
.bad-pkg .bp-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, 0.35); display: inline-block; }
.bad-pkg .bp-palette { margin-top: 10px; padding: 12px; border: 1px solid var(--bp-line); border-radius: 8px; background: var(--bp-bg); }
.bad-pkg .bp-palette p { margin: 0 0 10px; font-size: 13px; color: var(--bp-muted); }
.bad-pkg .bp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.bad-pkg .bp-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 2px solid; font-size: 13px; font-weight: 600; color: var(--bp-ink); text-align: left; }
.bad-pkg .bp-chip:disabled { cursor: not-allowed; opacity: 0.45; text-decoration: line-through; }
.bad-pkg .bp-chips.is-many { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.bad-pkg .bp-chips.is-many .bp-chip { gap: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.2; }
.bad-pkg .bp-chips.is-many .bp-dot { width: 16px; height: 16px; }

.bad-pkg .bp-locs { display: grid; gap: 10px; }
.bad-pkg .bp-locblock { border: 1px solid var(--bp-line); border-radius: 8px; padding: 12px; display: grid; gap: 10px; }
.bad-pkg .bp-loclabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14px; }
.bad-pkg .bp-loclabel span { font-weight: 500; font-size: 13px; color: var(--bp-muted); }
.bad-pkg .bp-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.bad-pkg .bp-place { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--bp-line); border-radius: 6px; background: var(--bp-bg); color: var(--bp-ink); text-align: left; }
.bad-pkg .bp-place strong { font-size: 14px; }
.bad-pkg .bp-place:hover { border-color: var(--bp-muted); }
.bad-pkg .bp-place[aria-pressed="true"] { border-color: var(--bp-ink); box-shadow: inset 0 0 0 1px var(--bp-ink); background: var(--bp-soft); }
.bad-pkg .bp-place:disabled { opacity: 0.45; cursor: not-allowed; }
.bad-pkg .bp-note { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.bad-pkg .bp-artnote { margin-top: 2px; }
.bad-pkg .bp-note input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--bp-line); border-radius: 6px; font: 400 14px/1.3 inherit; font-family: inherit; color: var(--bp-ink); background: var(--bp-bg); }
.bad-pkg .bp-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed #c3c3c3; border-radius: 8px; cursor: pointer; background: var(--bp-bg); }
.bad-pkg .bp-drop:hover, .bad-pkg .bp-drop.is-over { border-color: var(--bp-ink); background: var(--bp-soft); }
.bad-pkg .bp-drop:focus-within { outline: 2px solid var(--bp-blue); outline-offset: 2px; }
.bad-pkg .bp-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bad-pkg .bp-ic { width: 38px; height: 38px; flex: none; border-radius: 6px; background: var(--bp-soft); display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--bp-muted); }
.bad-pkg .bp-tx { display: grid; min-width: 0; }
.bad-pkg .bp-tx strong { font-size: 14px; }
.bad-pkg .bp-tx span { font-size: 12px; color: var(--bp-muted); }
.bad-pkg .bp-file { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--bp-line); border-radius: 8px; }
.bad-pkg .bp-thumb { width: 52px; height: 52px; flex: none; border-radius: 4px; border: 1px solid var(--bp-line); background: repeating-conic-gradient(#ececec 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; display: grid; place-items: center; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--bp-muted); }
.bad-pkg .bp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bad-pkg .bp-meta { display: grid; min-width: 0; flex: 1; }
.bad-pkg .bp-meta strong { font-size: 13px; overflow-wrap: anywhere; }
.bad-pkg .bp-meta span { font-size: 12px; color: var(--bp-muted); }
.bad-pkg .bp-same { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bad-pkg .bp-same input { width: 18px; height: 18px; accent-color: var(--bp-ink); }
.bad-pkg .bp-err { margin: 0; color: var(--bp-err); font-size: 13px; }
.bad-pkg .bp-later { margin: 0; font-size: 12px; color: var(--bp-muted); }

.bad-pkg .bp-matrix { border: 1px solid var(--bp-line); border-radius: 8px; overflow: hidden; }
.bad-pkg .bp-matrix + .bp-matrix { margin-top: 10px; }
.bad-pkg .bp-mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bp-soft); font-weight: 700; font-size: 14px; }
.bad-pkg .bp-sub { font-weight: 500; color: var(--bp-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.bad-pkg .bp-right { display: flex; align-items: center; gap: 8px; }
.bad-pkg .bp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; padding: 12px; }
.bad-pkg .bp-card { display: grid; gap: 6px; justify-items: center; padding: 8px 6px; min-width: 0; border: 1px solid var(--bp-line); border-radius: 6px; }
.bad-pkg .bp-sz { font-weight: 700; font-size: 14px; }
.bad-pkg .bp-fee { font-size: 11px; font-weight: 600; color: var(--bp-blue); min-height: 14px; }
.bad-pkg .bp-stepper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 3px; width: 100%; }
.bad-pkg .bp-stepper button { width: 100%; min-width: 0; height: 32px; box-sizing: border-box; border: 1px solid var(--bp-line); background: var(--bp-bg); color: var(--bp-ink); border-radius: 5px; font-size: 16px; line-height: 1; padding: 0; }
.bad-pkg .bp-stepper input { width: 100%; min-width: 0; height: 32px; box-sizing: border-box; text-align: center; border: 1px solid var(--bp-line); border-radius: 5px; font-weight: 600; font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; color: var(--bp-ink); background: var(--bp-bg); padding: 0; }

.bad-pkg .bp-status { display: grid; gap: 6px; margin-top: 12px; }
.bad-pkg .bp-status p { margin: 0; font-size: 14px; font-weight: 600; }
.bad-pkg .bp-status p.is-done { color: var(--bp-ok); }
.bad-pkg .bp-status p.is-more { color: var(--bp-blue); }
.bad-pkg .bp-meter { height: 6px; border-radius: 3px; background: var(--bp-soft); overflow: hidden; }
.bad-pkg .bp-meter i { display: block; height: 100%; width: 0; background: var(--bp-ink); }
.bad-pkg .bp-meter.is-full i { background: var(--bp-ok); }

.bad-pkg .bp-total { background: #111; color: #fff; border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.bad-pkg .bp-total[hidden] { display: none; }
.bad-pkg .bp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bad-pkg .bp-row span:first-child { color: #b9bcc0; }
.bad-pkg .bp-count { padding-top: 8px; margin-top: 2px; border-top: 1px solid #333; font-size: 16px; font-weight: 700; }
.bad-pkg .bp-count span:first-child { color: #ffffff; }
.bad-pkg .bp-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; margin-top: 2px; border-top: 1px solid #333; }
.bad-pkg .bp-sum strong { font-size: 22px; }
.bad-pkg .bp-atc { width: 100%; padding: 14px; border: 0; border-radius: 8px; background: var(--bp-ink); color: var(--bp-bg); font-size: 16px; font-weight: 700; }
.bad-pkg .bp-atc:disabled { background: #c9c9c9; color: #555; cursor: not-allowed; }
.bad-pkg .bp-why { margin: 6px 0 0; font-size: 13px; color: var(--bp-muted); text-align: center; }
.bad-pkg .bp-why.is-error { color: var(--bp-err); font-weight: 600; }

@container badpkg (max-width: 480px) {
  .bad-pkg .bp-slots { grid-template-columns: minmax(0, 1fr); }
  .bad-pkg .bp-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bad-pkg .bp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; }
}

.bad-pkg *, .bad-pkg *::before, .bad-pkg *::after { box-sizing: border-box; }
.bad-pkg .bp-upmeter { margin-top: 6px; }
.bad-pkg .bp-upmeter i { background: var(--bp-blue); transition: width .2s; }
.bad-pkg .bp-progl { font-size: 12px; color: var(--bp-muted); }
.bad-pkg .bp-pkg:disabled { opacity: .45; cursor: not-allowed; }
.bad-pkg .bp-atc:not(:disabled):not(.is-off):hover { background: #e2e2e2; color: #0b0b0b; } /* white button stays readable on hover */
/* Not ready yet: looks greyed out but still clickable, so a click can show what's missing. */
.bad-pkg .bp-atc.is-off { background: #c9c9c9; color: #555; }
.bad-pkg .bp-step { border-radius: 6px; outline: 2px solid transparent; outline-offset: 8px; scroll-margin: 90px 0; }
.bad-pkg .bp-step.bp-attn { outline-color: var(--bp-err); animation: bp-attn .45s ease 2; }
@keyframes bp-attn { 50% { outline-color: transparent; } }
.bad-pkg .bp-locblock.is-missing { border-color: var(--bp-err); }
.bad-pkg .bp-req { margin-left: 6px; color: var(--bp-err); font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bad-pkg .bp-step.bp-attn { animation: none; } }
.bad-pkg .bp-promise .bp-badge { display: grid; margin-top: 0; }
.bad-pkg .bp-badge svg { display: block; }

/* Tighter size grid (from the Shopify theme): size and upcharge on one line, stepper below. */
.bad-pkg .bp-card { grid-template-columns: 1fr auto auto 1fr; column-gap: 4px; row-gap: 6px; padding: 6px; align-content: start; }
.bad-pkg .bp-sz { grid-column: 2; grid-row: 1; line-height: 1.2; }
.bad-pkg .bp-fee { grid-column: 3; grid-row: 1; min-height: 0; line-height: 1.2; white-space: nowrap; }
.bad-pkg .bp-fee:empty { display: none; }
.bad-pkg .bp-stepper { grid-column: 1 / -1; grid-row: 2; }