/* proto-pages-parts.css: Spectre's 9 part pages (templates/search/_part.html) over the shared frame proto-pages.css.
   A card's size line (`.sp-size`, the specs with their words: "Fits a 0.75 in hole, 2.5 in tall") is printed through
   the card's call block, so it lands in the buy row: the buy row's children join the card's column (display: contents)
   and the line moves up under the name, where the frame's bare specs line was, which it replaces. The Add keeps the
   foot of the card, the second button (the grommet, the wrap, the cleaning kit) under it.
   Colour and type from cl-site.css's --site-* tokens. */
@layer base, kit, site;

@layer site {

.sp-page .pp-card:has(.sp-size) .pp-card__specs { display: none; }
.sp-page .pp-card__img, .sp-page .pp-card__name { order: -2; }
.sp-page .pp-card__buy { display: contents; }
.sp-page .pp-card__buy > * { flex: none; }
.sp-page .pp-card__buy > .sp-size { order: -1; font: 700 16px/1.3 var(--site-font-body); color: var(--site-fg); }
.sp-page .pp-card__buy > :not(.sp-size):first-child { margin-top: auto; padding-top: 8px; }
.sp-page .pp-card__buy > :not(.sp-size) .pp-btn { width: 100%; }
.sp-page .sp-also { margin: 0; }
.sp-page .sp-also .pp-btn { text-transform: none; letter-spacing: 0; }
.sp-page .sp-yours { margin-top: 32px; }
.sp-page .sp-yours > .pp-note:first-child { margin-top: 0; }

@media (max-width: 979.98px) {
  .sp-page .pp-card__buy > .sp-size { font-size: 14px; }
  .sp-page .sp-yours { margin-top: 24px; }
}

}