/* proto-pages-baer.css: Baer's look on the shared frame of the landing pages (proto-pages.css), on every landing page
   of baerbrakes.ca: Oswald capitals at Baer's weight for the headings and the card names, a red rule left of a section
   heading as on Baer's home, the shopper's own block on a light band, the part number search of /replacement-rotors and the pager of a group drawn alone.
   Colours and type are cl-site.css's --site-* tokens; no rule names a kit class. */
@layer base, kit, site;

@layer site {

.pp-h1 { font-weight: 500; }
.pp-h2, .pp-h3 { font-weight: 500; }
.pp-shead { border-bottom-width: 1px; }
.pp-shead .pp-h2, .pp-section > .pp-h2 { padding-left: 12px; border-left: 5px solid var(--site-accent); }
.pp-section > .pp-h2 { margin-bottom: 16px; }
.pp-card__name { font: 500 18px/1.25 var(--site-font-heading); letter-spacing: 0.3px; }
.pp-card__detail { font-size: 18px; }
.pp-btn { font-weight: 500; letter-spacing: 1px; }
/* the second button of a card (the big brake kit for the same car) holds its name and price on two lines when narrow */
.pp-card__buy .pp-btn--ghost { height: auto; min-height: 40px; padding: 8px 10px; line-height: 1.25; letter-spacing: 0.5px; text-align: center; }

.pp-tile__name { font-weight: 500; }

/* a group under a section head: its heading, then its cards */
.pp-group { margin-top: 28px; }
.pp-group > .pp-h3 { margin-bottom: 12px; }

/* the shopper's own block (a vehicle picked) on a light band */
.pp-mine { padding: 4px 20px 24px; background: var(--site-band); }
.pp-mine .pp-shead { margin-top: 20px; }

/* the pages of a vehicle with nothing here for it, as a row of links under the line */
.pp-links--mine { margin-top: 16px; padding-top: 0; border-top: 0; }

/* the pager of a group drawn alone */
.pp-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.pp-pager__at { font: 700 16px/1.2 var(--site-font-body); }

/* the part number search (/replacement-rotors) */
.pp-find { max-width: 640px; margin-top: 24px; }
.pp-find__label { display: block; margin-bottom: 8px; font: 700 17px/1.3 var(--site-font-body); color: var(--site-fg); }
.pp-find__row { display: flex; gap: 8px; }
.pp-find__input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 2px solid var(--site-fg); border-radius: var(--site-radius);
  background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body);
}
.pp-find__input:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 1px; }
.pp-find .pp-btn { min-height: 44px; }

@media (max-width: 979.98px) {
  .pp-mine { margin-left: -16px; margin-right: -16px; padding: 4px 16px 20px; }
  .pp-card__name { font-size: 15px; }
  .pp-card__detail { font-size: 14px; }
  .pp-card__buy .pp-btn--ghost { padding: 8px; }
  .pp-group { margin-top: 20px; }
  .pp-group > .pp-h3 { margin-bottom: 8px; }
  .pp-pager__at { font-size: 14px; }
  .pp-find__label { font-size: 15px; }
}

}