@layer pages {
  .qp-shop-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qp-space-3, 12px);
    margin-block: var(--qp-space-5, 20px);
    padding: var(--qp-space-3, 12px);
    border: 1px solid var(--qp-ws-line, var(--qp-border));
    border-radius: var(--qp-ws-radius, var(--qp-radius));
    background: var(--qp-ws-surface, var(--qp-surface));
    color: var(--qp-ws-muted, var(--qp-muted));
  }

  .qp-shop-pagination[hidden] { display: none; }
  .qp-shop-pagination label,
  .qp-shop-page-buttons { display: flex; align-items: center; gap: var(--qp-space-2, 8px); }
  .qp-shop-pagination label { font-weight: 800; }
  .qp-shop-pagination select,
  .qp-shop-page-buttons button {
    min-height: 40px;
    border: 1px solid var(--qp-ws-line, var(--qp-border));
    border-radius: var(--qp-ws-control-radius, 8px);
    background: var(--qp-ws-surface, var(--qp-surface));
    color: var(--qp-ws-ink, var(--qp-text));
    font: inherit;
    font-weight: 800;
  }
  .qp-shop-pagination select { padding-inline: var(--qp-space-2, 8px); }
  .qp-shop-page-buttons button { flex: 0 0 auto; min-width: 40px; padding-inline: var(--qp-space-3, 12px); white-space: nowrap; cursor: pointer; }
  .qp-shop-page-buttons button:hover,
  .qp-shop-page-buttons button:focus-visible,
  .qp-shop-page-buttons button.active {
    border-color: var(--qp-ws-accent, var(--qp-purple));
    color: var(--qp-ws-accent, var(--qp-purple));
    background: var(--qp-ws-accent-soft, var(--qp-soft));
  }
  .qp-shop-page-buttons button:disabled { cursor: default; opacity: .45; }
  .qp-shop-grid[aria-busy="true"] { opacity: .65; pointer-events: none; }

  @media (max-width: 760px) {
    .qp-shop-pagination { align-items: stretch; flex-direction: column; }
    .qp-shop-page-buttons { width: 100%; overflow-x: auto; padding-block: 2px; }
    .qp-shop-pagination > span { text-align: center; }
  }
}

  /* ------------------------------------------------------------------------
     Shelves that are announced but not stocked yet.

     Deliberately not styled as buyable cards: a student should be able to tell
     at a glance that nothing here can be bought today, without reading a word.
     Flat, quieter than a real item, with the badge doing the talking.
     ------------------------------------------------------------------------ */

  .qp-shop-soon {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--qp-space-5, 20px);
  }

  .qp-shop-soon-head {
    display: grid;
    justify-items: center;
    gap: var(--qp-space-2, 8px);
    padding: var(--qp-space-6, 24px) var(--qp-space-4, 16px);
    border: 1px dashed var(--qp-ws-line, var(--qp-border));
    border-radius: var(--qp-ws-radius, var(--qp-radius));
    background: var(--qp-ws-surface, var(--qp-surface));
    text-align: center;
  }
  .qp-shop-soon-head h2 { margin: 0; font-size: 22px; font-weight: 950; }
  .qp-shop-soon-head p { margin: 0; max-width: 46ch; color: var(--qp-ws-muted, var(--qp-muted)); font-weight: 700; }

  .qp-shop-soon-badge {
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--qp-ws-accent, var(--qp-purple)) 16%, var(--qp-ws-surface, var(--qp-surface)));
    color: var(--qp-ws-accent, var(--qp-purple));
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .qp-shop-soon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--qp-space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .qp-shop-soon-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: var(--qp-space-4, 16px);
    border: 1px solid var(--qp-ws-line, var(--qp-border));
    border-radius: var(--qp-ws-radius, var(--qp-radius));
    background: var(--qp-ws-surface, var(--qp-surface));
    /* Not for sale, and it should look it. */
    opacity: .82;
  }
  .qp-shop-soon-card b { font-size: 15px; font-weight: 900; }
  .qp-shop-soon-card small { color: var(--qp-ws-muted, var(--qp-muted)); font-size: 12px; font-weight: 700; line-height: 1.45; }
  .qp-shop-soon-icon { font-size: 26px; line-height: 1; }

  .qp-shop-soon-lock {
    position: absolute;
    inset-inline-end: 10px;
    inset-block-start: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--qp-ws-muted, var(--qp-muted)) 18%, var(--qp-ws-surface, var(--qp-surface)));
    color: var(--qp-ws-muted, var(--qp-muted));
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  @media (prefers-reduced-motion: no-preference) {
    .qp-shop-soon-card { transition: transform .16s ease, border-color .16s ease; }
    .qp-shop-soon-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--qp-ws-accent, var(--qp-purple)) 45%, var(--qp-ws-line, var(--qp-border))); }
  }