/* "Load more" under a storefront grid (includes/load-more.php). The button
   is the theme's own .ed-btn-secondary; the rest takes the theme's tokens. */
.px-more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 1.5rem auto 2.5rem; padding: 0 1rem; text-align: center; scroll-margin-top: 45vh; }
.px-more[hidden] { display: none; }
.px-more-status { margin: 0; font-size: 14px; color: var(--ink-soft, #475569); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.px-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; min-width: 12rem; max-width: 100%; padding: .65rem 1.5rem; font-weight: 600; text-decoration: none; white-space: normal; cursor: pointer; }
.px-more-btn.is-loading, .px-more-btn[aria-disabled="true"] { cursor: progress; opacity: .75; }
.px-more-btn.is-loading::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: px-more-spin .8s linear infinite; }
@keyframes px-more-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .px-more-btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: .5; } }
.px-more-error { margin: 0; max-width: 32rem; padding: .6rem .9rem; border-radius: 10px; font-size: 14px; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
html.dark .px-more-error { color: #fecaca; background: rgb(127 29 29 / .35); border-color: rgb(248 113 113 / .45); }
.px-more-error[hidden] { display: none; }
/* Ink, not the accent: an accent shade reads under 4.5:1 on some themes' paper; the underline marks it as a link. */
.px-more-earlier { font-size: 14px; font-weight: 600; color: var(--ink, inherit); text-decoration: underline; text-underline-offset: 3px; }
.px-more-earlier:empty { display: none; }
.px-more-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.px-more-top { margin: 0 0 1rem; text-align: center; }
/* A card focused whole after "Load more" (load-more.js) shows the ring
   focus-ring.css draws, which it otherwise leaves off script-only targets:
   the reader has to see where the new cards start. */
:root [data-px-more-grid] > [tabindex="-1"]:focus-visible:not(#px-focus-off) {
  outline: 2px solid var(--px-focus-ring, var(--ink, #15131a)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)) !important;
}