/* Box picker — storefront block.
   Layout is anchored to the approved comp (.impeccable/build/spec.json);
   the block settings override --bp-accent and --bp-radius per merchant, and the
   type stack falls through to the theme's own. */

.bp {
  /* ground */
  /* One scale for the whole composition: 1:1 at the comp's 1280, growing with
     the theme's page width, capped so it stops before it gets silly. */
  --bp-s: clamp(1px, 100vw / 1280, 1.25px);

  --bp-ground: #ffffff;
  --bp-ink: #121212;
  --bp-ink-soft: #6b6b6b;
  --bp-ink-faint: #9a9a9a;
  --bp-line: #e5e5e5;
  --bp-line-strong: #c9c9c9;
  --bp-accent: #0e535c;
  --bp-disabled-bg: #ececec;
  --bp-radius: calc(8 * var(--bp-s));
  --bp-radius-sm: calc(5 * var(--bp-s));

  /* rhythm: the comp stacks cards tighter than it spaces them */
  --bp-gutter: calc(28 * var(--bp-s));
  --bp-gutter-right: calc(34 * var(--bp-s));
  --bp-col-gap: calc(13 * var(--bp-s));
  --bp-row-gap: calc(6 * var(--bp-s));
  --bp-panel-w: calc(404 * var(--bp-s));
  --bp-rail-gap: calc(40 * var(--bp-s));
  --bp-rail-gap-panel: calc(32 * var(--bp-s));
  --bp-photo-h: calc(85 * var(--bp-s));

  /* type, sized from the measured cap heights */
  --bp-t-eyebrow: calc(14 * var(--bp-s));
  --bp-t-headline: calc(40 * var(--bp-s));
  --bp-t-subline: calc(16 * var(--bp-s));
  --bp-t-name: calc(16 * var(--bp-s));
  --bp-t-variant: calc(14 * var(--bp-s));
  --bp-t-count: calc(70 * var(--bp-s));
  --bp-t-price: calc(28 * var(--bp-s));
  --bp-t-caption: calc(18 * var(--bp-s));
  --bp-t-micro: calc(13 * var(--bp-s));
  --bp-t-chip: calc(14 * var(--bp-s));
  --bp-t-button: calc(15 * var(--bp-s));

  color: var(--bp-ink);
  background: var(--bp-ground);
  font-family: inherit;
  box-sizing: border-box;
}
.bp *, .bp *::before, .bp *::after { box-sizing: inherit; }

/* ---------- shell: catalogue left, box right, one hairline between ---------- */
/* The hairline does not sit midway: the comp leaves calc(40 * var(--bp-s)) of catalogue air before
   it and calc(32 * var(--bp-s)) after, and the page's right gutter is wider than its left. */
.bp-layout {
  display: grid;
  grid-template-columns: 1fr var(--bp-rail-gap) 1px var(--bp-rail-gap-panel) var(--bp-panel-w);
  align-items: start;
  padding: 0 var(--bp-gutter-right) 0 var(--bp-gutter);
  max-width: calc(1600 * var(--bp-s));
  margin: 0 auto;
}
.bp-catalogue { grid-column: 1; min-width: 0; }
.bp-divider { grid-column: 3; align-self: stretch; background: var(--bp-line); min-height: 100%; }
.bp-panel { grid-column: 5; }

.bp-head { padding-top: calc(13 * var(--bp-s)); }
.bp-eyebrow {
  margin: 0;
  font-size: var(--bp-t-eyebrow); font-weight: 800; letter-spacing: 0.115em;
  color: var(--bp-accent); text-transform: uppercase;
}
.bp-headline {
  margin: calc(8 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-headline); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
}
.bp-subline {
  margin: calc(5 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-subline); font-weight: 400; letter-spacing: -0.006em;
  color: var(--bp-ink-soft);
}

/* ---------- filters ---------- */
.bp-filters {
  display: flex; flex-wrap: wrap; gap: calc(10 * var(--bp-s));
  margin: calc(14 * var(--bp-s)) 0 0; padding: 0; list-style: none;
}
.bp-chip {
  appearance: none;
  height: calc(32 * var(--bp-s)); padding: 0 calc(25 * var(--bp-s));
  border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm);
  background: none; color: var(--bp-ink);
  font: inherit; font-size: var(--bp-t-chip); font-weight: 600;
  cursor: pointer;
}
.bp-chip:hover { border-color: var(--bp-line-strong); }
.bp-chip[aria-pressed="true"] { border-color: var(--bp-accent); color: var(--bp-accent); }

/* ---------- catalogue grid ---------- */
.bp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--bp-col-gap);
  row-gap: var(--bp-row-gap);
  margin: calc(9 * var(--bp-s)) 0 0; padding: 0; list-style: none;
}
.bp-group-heading {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 0 7px;
  border-bottom: 1px solid var(--bp-line);
  color: var(--bp-ink);
}
.bp-group-heading[hidden] { display: none; }
.bp-group-heading h3 { margin: 0; font: inherit; font-weight: 700; }
.bp-group-heading span { color: var(--bp-accent); white-space: nowrap; }
.bp-panel-bar-groups { margin: 8px 0; color: var(--bp-accent); font-size: 12px; font-variant-numeric: tabular-nums; }

.bp-card {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  height: calc(177 * var(--bp-s));
  padding: calc(12 * var(--bp-s)) calc(24 * var(--bp-s)) calc(5 * var(--bp-s));
  border: 1px solid var(--bp-line); border-radius: var(--bp-radius);
  background: var(--bp-ground);
  text-align: left;
}
.bp-card[data-picked="true"] { border: 2px solid var(--bp-accent); padding: calc(11 * var(--bp-s)) calc(23 * var(--bp-s)) calc(4 * var(--bp-s)); }
/* display on the class outranks the UA rule for [hidden]; say it here instead. */
.bp-card[hidden], .bp-card-badge[hidden] { display: none; }

.bp-card-photo {
  width: auto; max-width: 100%; height: var(--bp-photo-h);
  flex-shrink: 0; object-fit: contain; display: block;
}
.bp-photo-placeholder { display: flex; align-items: center; justify-content: center; color: var(--bp-ink-soft); font-size: 12px; text-align: center; }

.bp-card-name {
  align-self: stretch;
  margin: calc(10 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-name); font-weight: 700; letter-spacing: -0.017em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-card-variant {
  align-self: stretch;
  margin: calc(3 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-variant); font-weight: 400; letter-spacing: -0.012em;
  color: var(--bp-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-card-add {
  appearance: none;
  margin-top: auto; width: calc(106 * var(--bp-s)); height: calc(30 * var(--bp-s));
  border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm);
  background: none; color: var(--bp-ink);
  font: inherit; font-size: calc(13 * var(--bp-s)); font-weight: 700;
  cursor: pointer;
}
.bp-card-add { color: var(--bp-accent); border-color: #aababc; }
.bp-card-add:hover:not(:disabled) { border-color: var(--bp-ink); }
.bp-card-add:disabled { color: var(--bp-ink-faint); border-color: var(--bp-line); cursor: not-allowed; }

.bp-card-badge {
  position: absolute; top: calc(9 * var(--bp-s)); right: calc(10 * var(--bp-s));
  width: calc(24 * var(--bp-s)); height: calc(23 * var(--bp-s));
  display: flex; align-items: center; justify-content: center;
  background: var(--bp-accent); border-radius: calc(6 * var(--bp-s));
  color: #fff; font-size: calc(15 * var(--bp-s)); font-weight: 700; line-height: 1;
}

/* ---------- load more: the catalogue continues past the fold ---------- */
.bp-more { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--bp-s)); padding: calc(26 * var(--bp-s)) 0 calc(40 * var(--bp-s)); }
.bp-more-button {
  appearance: none;
  height: calc(44 * var(--bp-s)); padding: 0 calc(32 * var(--bp-s));
  border: 1px solid var(--bp-ink); border-radius: var(--bp-radius-sm);
  background: none; color: var(--bp-ink);
  font: inherit; font-size: var(--bp-t-button); font-weight: 700;
  cursor: pointer;
}
.bp-more-button:hover { background: var(--bp-ink); color: var(--bp-ground); }
.bp-more-count { font-size: var(--bp-t-variant); color: var(--bp-ink-soft); }

/* ---------- box panel: stays in view while the catalogue scrolls ---------- */
.bp-panel { position: sticky; top: calc(16 * var(--bp-s)); padding-top: calc(13 * var(--bp-s)); }
.bp-panel-label {
  margin: 0;
  font-size: var(--bp-t-eyebrow); font-weight: 800; letter-spacing: 0.105em;
  color: var(--bp-accent); text-transform: uppercase;
}
.bp-count {
  margin: calc(6 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-count); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
}
.bp-caption {
  margin: calc(6 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-caption); font-weight: 400; letter-spacing: 0.045em;
  color: var(--bp-ink-soft);
}
.bp-price { margin: calc(18 * var(--bp-s)) 0 0; font-size: var(--bp-t-price); font-weight: 800; }
.bp-price-caption {
  margin: 2px 0 0;
  font-size: calc(12 * var(--bp-s)); font-weight: 400; letter-spacing: 0.075em;
  color: var(--bp-ink-soft); text-transform: uppercase;
}

.bp-slots { margin: calc(8 * var(--bp-s)) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bp-line); }

.bp-slot {
  display: grid;
  grid-template-columns: calc(72 * var(--bp-s)) minmax(0, 1fr) calc(114 * var(--bp-s)) calc(26 * var(--bp-s));
  align-items: center;
  column-gap: calc(7 * var(--bp-s));
  height: calc(63 * var(--bp-s));
}
.bp-slot-thumb { width: calc(72 * var(--bp-s)); height: calc(63 * var(--bp-s)); object-fit: cover; display: block; }
.bp-slot-name {
  font-size: var(--bp-t-name); font-weight: 700; letter-spacing: -0.017em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-slot-variant {
  margin: 2px 0 0;
  font-size: var(--bp-t-variant); font-weight: 400; letter-spacing: -0.012em;
  color: var(--bp-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bp-stepper {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; height: calc(35 * var(--bp-s));
  border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm);
}
.bp-stepper button {
  appearance: none; border: none; background: none;
  height: 100%; color: var(--bp-ink);
  font: inherit; font-size: calc(15 * var(--bp-s)); cursor: pointer;
}
.bp-stepper button:disabled { color: var(--bp-ink-faint); cursor: not-allowed; }
.bp-stepper output { font-size: calc(15 * var(--bp-s)); font-weight: 700; text-align: center; }

.bp-remove {
  appearance: none; border: none; background: none;
  width: calc(26 * var(--bp-s)); height: calc(26 * var(--bp-s)); padding: 0;
  color: var(--bp-ink-soft); font-size: calc(17 * var(--bp-s)); line-height: 1; cursor: pointer;
}
.bp-remove:hover { color: var(--bp-ink); }

.bp-slot-empty {
  display: flex; align-items: center; justify-content: center;
  height: calc(44 * var(--bp-s)); margin-top: calc(11 * var(--bp-s));
  border: 1.5px dashed var(--bp-line-strong); border-radius: var(--bp-radius);
  color: var(--bp-ink-soft); font-size: calc(13 * var(--bp-s)); font-weight: 500;
}

.bp-slot-empty + .bp-slot-empty { margin-top: calc(5 * var(--bp-s)); }

.bp-cta {
  appearance: none;
  display: block; width: 100%; height: calc(44 * var(--bp-s)); margin: calc(18 * var(--bp-s)) 0 0;
  border: none; border-radius: var(--bp-radius-sm);
  background: var(--bp-accent); color: #fff;
  font: inherit; font-size: var(--bp-t-button); font-weight: 700;
  cursor: pointer;
}
.bp-cta:disabled { background: var(--bp-disabled-bg); color: var(--bp-ink-faint); cursor: not-allowed; }

.bp-cta-note {
  margin: calc(6 * var(--bp-s)) 0 0;
  font-size: var(--bp-t-micro); font-weight: 400; letter-spacing: -0.004em;
  color: var(--bp-ink-soft); text-align: center;
}

/* ---------- motion ----------
   One idea: the empty slot becomes the snack in place. Nothing flies across the
   page, so the answer appears where the shopper is already looking and the
   keyboard never leaves the Add button it came from. */
@keyframes bp-slot-fill {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bp-slot-edge {
  from { box-shadow: inset 0 0 0 1.5px var(--bp-line-strong); border-radius: var(--bp-radius); }
  to   { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); border-radius: var(--bp-radius); }
}
@keyframes bp-count-tick {
  from { transform: translateY(calc(4 * var(--bp-s))); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}

.bp-slot.is-filling { animation: bp-slot-edge 260ms ease-out; }
.bp-slot.is-filling > * { animation: bp-slot-fill 200ms ease-out backwards; }
.bp-slot.is-filling > :nth-child(2) { animation-delay: 30ms; }
.bp-slot.is-filling > :nth-child(3) { animation-delay: 55ms; }
.bp-slot.is-filling > :nth-child(4) { animation-delay: 55ms; }

.bp-count.is-ticking { animation: bp-count-tick 180ms ease-out; }

.bp-card-add, .bp-chip, .bp-more-button, .bp-cta, .bp-remove {
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.bp :focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

/* The count still changes; only the movement goes away. */
@media (prefers-reduced-motion: reduce) {
  .bp *, .bp *::before, .bp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Load more only exists once the script can honour it. */
.bp-more { display: none; }
.bp-is-live .bp-more { display: flex; }
.bp-more[hidden] { display: none; }

/* ---------- responsive ----------
   The bar only exists below the two-column breakpoint; above it the panel is
   the column and every slot is already on screen. */
.bp-panel-toggle { display: none; }

@media (min-width: 1024px) {
  /* The third comp row brings its label up into the photo's white bottom margin. */
  .bp-card:nth-child(n+7):nth-child(-n+9) .bp-card-photo { height: calc(65 * var(--bp-s)); }
  .bp-card:nth-child(n+4):nth-child(-n+9) .bp-card-name { margin-top: calc(6 * var(--bp-s)); }
  /* Fluid between 1280 and 1600: the panel gives ground before the cards do. */
  .bp { --bp-panel-w: calc(404 * var(--bp-s)); }
}

@media (max-width: 1023px) {
  .bp { --bp-s: 1px; }
  .bp-layout {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .bp-divider { display: none; }
  .bp-catalogue { grid-column: 1; }
  .bp-card { height: auto; padding: 12px 10px 8px; }
  .bp-card[data-picked="true"] { padding: 11px 9px 7px; }
  .bp-card-name, .bp-card-variant { white-space: normal; overflow-wrap: anywhere; }
  .bp-chip, .bp-card-add { min-height: 44px; }
  .bp-card-add { margin-top: 12px; }

  /* Clear the bar, and the room it takes when it opens. */
  .bp-catalogue { padding-bottom: 132px; }

  .bp-panel {
    grid-column: 1;
    position: fixed; inset: auto 0 0 0;
    z-index: 20;
    padding: 0 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bp-ground);
    border-top: 1px solid var(--bp-line);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.07);
  }
  .bp-panel-head { display: none; }

  .bp-panel-toggle {
    appearance: none;
    display: grid; grid-template-columns: auto auto 1fr;
    align-items: baseline; column-gap: 12px;
    width: 100%; height: 52px; padding: 0;
    border: none; background: none; color: var(--bp-ink);
    font: inherit; text-align: left; cursor: pointer;
  }
  .bp-panel-bar-count { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
  .bp-panel-bar-price { font-size: 17px; font-weight: 700; }
  .bp-panel-bar-hint {
    justify-self: end;
    font-size: 14px; font-weight: 600; color: var(--bp-accent);
  }
  .bp-panel-bar-hint::after { content: ""; display: inline-block; width: 7px; height: 7px;
    margin-left: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
    transform: rotate(-45deg); }
  .bp-panel-toggle[aria-expanded="true"] .bp-panel-bar-hint::after { transform: rotate(135deg); }

  .bp-panel-detail { display: none; }
  .bp-panel[data-expanded="true"] .bp-panel-detail { display: block; }
  .bp-panel[data-expanded="true"] { max-height: 84vh; overflow-y: auto; }

  .bp-slots { margin-top: 0; max-height: 46vh; overflow-y: auto; }
  .bp-slot { grid-template-columns: 56px minmax(0, 1fr) 96px 26px; height: 56px; }
  .bp-slot-thumb { width: 56px; height: 50px; }
  .bp-cta { margin-top: 8px; }
  .bp-cta-note { margin-bottom: 4px; }
}

@media (max-width: 719px) {
  .bp { --bp-t-headline: 32px; --bp-t-count: 52px; }
  .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-card-add { width: 100%; }
}

/* Announcements for screen readers only; the count is visible to everyone else. */
.bp-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Real Shopify product data lives in arbitrary theme containers. Keep these
   adaptations scoped so the approved composition remains a separate fixture.
   Horizon's product details are a flex column aligned to the start, and app
   blocks can also land in a single grid track. Stretch the platform wrapper
   and this block so the column cannot collapse to one character. */
.shopify-block:has(> .bp-storefront),
.shopify-app-block:has(.bp-storefront),
.group-block-content > .shopify-block:has(.bp-storefront) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  align-self: stretch;
  justify-self: stretch;
  grid-column: 1 / -1;
}
.bp-storefront {
  container: box-picker / inline-size;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
}
.bp-storefront [hidden] { display: none !important; }
.bp-storefront [data-bp-recovery-help] a,
.bp-storefront [data-bp-cart-link] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  line-height: 1.5;
}
.bp-preview-notice { padding: 12px 20px; margin: 0; font-size: 14px; line-height: 1.5; }
.bp-storefront .bp-card { height: auto; padding: 12px 10px; }
.bp-storefront .bp-card[data-picked="true"] { padding: 11px 9px; }
.bp-storefront .bp-card-photo { height: var(--bp-photo-h); }
.bp-storefront .bp-card-name { margin-top: 10px; }
.bp-storefront .bp-card-name, .bp-storefront .bp-card-variant,
.bp-storefront .bp-slot-name, .bp-storefront .bp-slot-variant {
  white-space: normal; overflow-wrap: break-word; overflow: visible;
}
.bp-storefront .bp-card-availability { font-size: 12px; align-self: stretch; margin: 8px 0; color: var(--bp-ink-soft); }
.bp-storefront .bp-card-add { min-height: 44px; max-width: 100%; }
.bp-storefront .bp-slot { grid-template-columns: 48px minmax(0, 1fr) 44px; height: auto; min-height: 100px; row-gap: 4px; padding: 8px 0; }
.bp-storefront .bp-slot-thumb { width: 48px; height: 48px; object-fit: contain; }
.bp-storefront .bp-stepper { grid-column: 2; grid-row: 2; width: 134px; height: 46px; }
.bp-storefront .bp-remove { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
.bp-storefront:not(.bp-is-live) .bp-panel { display: none; }
@container box-picker (max-width: 1023px) {
  .bp-storefront .bp-layout { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .bp-storefront .bp-divider { display: none; }
  .bp-storefront .bp-catalogue { grid-column: 1; grid-row: 2; padding-bottom: 0; }
  /* Each block owns its summary; no global fixed bars collide on a page. */
  .bp-storefront .bp-panel { grid-column: 1; grid-row: 1; position: sticky; inset: 0 auto auto; z-index: 2;
    width: 100%; padding: 0 0 12px; background: var(--bp-ground); border-bottom: 1px solid var(--bp-line); box-shadow: none; }
  .bp-storefront .bp-panel-head { display: none; }
  .bp-storefront .bp-panel-toggle { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px;
    width: 100%; min-height: 52px; height: auto; padding: 8px 0; border: 0; background: none; font: inherit; color: var(--bp-ink); text-align: left; }
  .bp-storefront .bp-panel-bar-count { font-size: 22px; font-weight: 800; }
  .bp-storefront .bp-panel-bar-price { font-size: 17px; font-weight: 700; }
  .bp-storefront .bp-panel-bar-hint { font-size: 14px; color: var(--bp-accent); justify-self: end; }
  .bp-storefront .bp-panel-detail { display: none; }
  .bp-storefront .bp-panel[data-expanded="true"] .bp-panel-detail { display: block; }
  .bp-storefront .bp-panel[data-expanded="true"] { max-height: 70vh; overflow-y: auto; }
  .bp-storefront .bp-slots { margin-top: 0; max-height: 40vh; overflow-y: auto; }
  .bp-storefront .bp-cta { margin-top: 8px; height: auto; min-height: 44px; padding: 8px; }
  .bp-storefront .bp-headline { font-size: 32px; }
}
@container box-picker (max-width: 719px) {
  .bp-storefront .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-storefront .bp-card-add { width: 100%; }
}
.bp-storefront .bp-photo-placeholder { overflow-wrap: break-word; }
.bp-storefront .bp-panel-toggle { padding-inline: 2px; }
/* Do not use the viewport-fixed summary here. In a narrow product column it
   covers the first Add button, so a click misses and only Enter still works. */
.bp-storefront .bp-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 0;
}
.bp-storefront .bp-catalogue,
.bp-storefront .bp-panel,
.bp-storefront .bp-card {
  min-width: 0;
  max-width: 100%;
}
.bp-storefront .bp-panel {
  width: auto;
  max-width: 100%;
}
.bp-storefront .bp-catalogue { position: relative; z-index: 2; padding-bottom: 0; }
.bp-storefront .bp-card-add {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
@container box-picker (min-width: 1024px) {
  .bp-storefront .bp-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    column-gap: 2rem;
  }
  .bp-storefront .bp-panel { grid-column: 2; grid-row: 1; }
  .bp-storefront .bp-catalogue { grid-column: 1; grid-row: 1; }
  .bp-storefront .bp-divider { display: none; }
}
/* A prepared box is added only through this block. Recommendation and quick-add
   cards keep their own buttons; checkout of an empty box is still rejected. */
body:has([data-bp-configured]) :is(product-form, product-form-component, .product-form, .buy-buttons-block):not(:where(
  product-card *, .product-card *, .card-wrapper *, product-recommendations *,
  .related-products *, quick-add *, quick-add-component *, quick-add-modal *, [data-bp-root] *
)) :is(button[name="add"], button[type="submit"], .shopify-payment-button, shopify-payment-button, .accelerated-checkout-block),
body:has([data-bp-configured]) :is(.shopify-payment-button, shopify-payment-button, .accelerated-checkout-block, sticky-add-to-cart):not(:where(
  product-card *, .product-card *, .card-wrapper *, product-recommendations *,
  .related-products *, quick-add *, quick-add-component *, quick-add-modal *, [data-bp-root] *
)) {
  display: none !important;
  pointer-events: none !important;
}