/* Store and product pages, buyer fixes (2026-10-09). Loaded after store.css.
   - The Makefew pill scrolls with the page instead of floating over photos, prices and Buy, and
     the page leaves room for it at the top.
   - Focus never lands under the sticky section tabs or the phone's sticky Buy bar.
   - Included components and the returns/help routes sit with the purchase facts.
   - The phone's floating Buy bar steps aside while the "Ask the maker" form has focus. */
.mf-mark, .product-page .mf-mark { position: absolute; }
.pp-media { padding-top: 76px; }
.pp-panel { margin-top: 76px; }
.pp-tabs.stuck { padding-left: 2px; }
.gr-head { padding-top: 80px; }
html:has(body.product-page) { scroll-padding-top: 72px; }

.pp-inbox { margin: 0; font-size: 15px; color: var(--s-ink2); }
.pp-inbox strong { color: var(--s-ink); font-weight: 600; }
.pp-facts a { color: inherit; }
.pp-policy-link { font-size: 15px; color: var(--s-ink2); }

@media (max-width: 900px) {
  .pp-media { padding-top: 76px; }
  .pp-panel { margin-top: 16px; }
  .pp-tabs.stuck { padding-left: 16px; }
  html:has(body.product-page) { scroll-padding-bottom: 88px; }
}

/* Browsers don't scroll a field that is already on screen, so on short phones the floating Buy bar
   could cover part of the question form. While any of the form's controls has focus the bar steps
   aside; it returns when focus leaves. The purchase panel's own Buy is untouched. CSS only: without
   JavaScript the bar is never shown, and without :has() the page behaves as before. */
body.product-page:has(.pp-ask-form:focus-within) .pp-sticky { display: none; }