/* "On your phone? Get the link by email" box (phonebox). Loaded only by pages that contain the box (see layout() in scripts/build-pages.mjs).
   Hidden by default and on every desktop: it shows ONLY when phonebox.js has marked the page html.pb-on (phone or tablet user agent) AND the screen is 1100px wide or less.
   White card, 1px line border, 14px radius (the site's own card look). No offset shadows. It sits BELOW a Buy button and never covers or moves it. */
.phonebox { display: none; }
@media (max-width: 1100px) {
  html.pb-on .phonebox { display: block; box-sizing: border-box; width: 100%; max-width: 440px; margin: 14px 0 0; padding: 14px 16px; background: #fff; color: #111; border: 1px solid var(--line, #e6e6e6); border-radius: var(--radius, 14px); text-align: left; }
}
.phonebox .pb-title { margin: 0 0 10px; font-size: 15px; line-height: 1.4; font-weight: 800; color: #111; }
.phonebox .pb-form { display: flex; flex-direction: column; gap: 10px; margin: 0; position: relative; }
.phonebox .pb-email { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: #111; background: #fff; border: 1px solid #111; border-radius: 10px; }
.phonebox .pb-email:focus { outline: 2px solid #D4232B; outline-offset: 2px; }
.phonebox .pb-send { width: 100%; justify-content: center; min-height: 48px; }
.phonebox .pb-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.phonebox .pb-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: #555; }
.phonebox .pb-msg { margin: 10px 0 0; font-size: 14.5px; line-height: 1.4; font-weight: 800; color: #111; }
.phonebox .pb-msg.pb-err { color: #b00020; }
.phonebox.pb-done .pb-title, .phonebox.pb-done .pb-form, .phonebox.pb-done .pb-note { display: none; }
.phonebox.pb-done .pb-msg { margin: 0; }