/* bk176: layout fixes for the prototype's own screens at phone width (Troy, Oct 13: "it needs to be flawless on
   mobile"). Loaded on every page, after the prototype's styles. Only narrow layouts change; desktop is untouched. */

/* Add-ons and delivery choices: a generic form rule (label > input) gave their checkboxes full width and padding, so
   the box drew across the card's name. They are plain corner checkboxes again (every width). */
.ob-step .oa > input, .ob-step .ob-dels label > input { position: absolute; right: 14px; top: 14px; width: 18px; height: 18px; padding: 0; margin: 0; border: 0; background: none; }

/* Build your store, step 2: the logo card stacks instead of running off the right edge. */
@container vp (max-width: 600px) {
  .ob-logo { flex-direction: column; align-items: stretch; text-align: left; }
  .ob-mark { width: 96px; height: 96px; }
  .ob-lb { min-width: 0; }
  .ob-lbtn > * { white-space: normal; }

  /* Add-ons: the checkbox sits in the card's corner, never on top of the name. */
  .oa { display: block; padding-right: 44px !important; }
  .oa b { display: block; padding-right: 0; }
  .oa span, .oa small { display: block; }

  /* Delivery and payouts: the payout note sits under the terms instead of squeezing them into a narrow column. */
  .ob-pay { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ob-pay .ok { white-space: normal; }

  /* You're live: everything fits the screen. */
  .ob-done { padding: 36px 18px; }
  .od-in { width: 100%; min-width: 0; }
  .od-in h1 { font-size: 30px; line-height: 1.12; overflow-wrap: anywhere; }
  .od-in p { font-size: 15px; }
  .od-links { flex-direction: column; gap: 12px; }
  .od-links > div { min-width: 0; max-width: 100%; }
  .od-links code { font-size: 13px; word-break: break-all; }
  .od-in .hcta { flex-direction: column; align-items: stretch; gap: 10px; }
  .od-in .hcta > * { width: 100%; justify-content: center; white-space: normal; }
}

/* Build your store, step "Your link": the website's line-drawing animation shares the class name .ol, so the link,
   embed and domain icons inherited a hidden stroke and showed as empty tiles. They show again (every width). */
div.ol { stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; }

/* Website header on a phone: Carol's C and Build your store fit inside the screen edge. */
@container vp (max-width: 480px) {
  .sn .sn-r { gap: 8px; }
  .sn .sn-r > .pri { padding-left: 14px; padding-right: 14px; font-size: 14px; }
  .sn .sn-r > .pri svg { display: none; }
}
@container vp (max-width: 370px) {
  .sn .sn-r > .pri { padding-left: 12px; padding-right: 12px; font-size: 13px; }
  .sn .sn-b small { display: none; }
}

/* bk179: Made in our shop. The moving line runs in its own lane between the machines and their names at every height
   (the one-screen layout shrinks the machine boxes, and the line used to stay at a fixed height and cross the names). */
.ln7-track { --mh: 122px; }
.ln7-track .stn-m { height: var(--mh); }
.ln7-track .belt { top: calc(var(--mh) + 22px); }
.ln7-track .token { top: calc(var(--mh) + 10px); }
.ln7-track .stn b { margin-top: 46px; }
@container vp (min-width: 1001px) { .ln7-track { --mh: min(122px, 14vh); } }