/* proto-pages-compcams.css: compcams.ca's own rules for its landing pages (templates/search/_page.html and home.html),
   over proto-pages.css's frame, on cl-site.css's tokens. The client's Porto theme styles bare `button` outside any
   layer (a 40px or 46px width, no padding, grey text on white), which beats every layered rule, so the frame's
   buttons, headings and paragraphs take their box back here with !important, the one way a layered rule wins over an unlayered one. */
@layer base, kit, site;

@layer site {

/* the page's text at full contrast: the theme's body is grey (#777) and a frame element with no colour of its own
   would inherit it */
.pp-wrap { color: var(--site-fg); }

/* the theme's unlayered heading and paragraph margins (h1 88px, h2 32px, p 20px under each) and `nav` display: the
   frame spaces with margin-top alone */
.pp-wrap :is(h1, h2, h3, p) { margin-bottom: 0 !important; }
.pp-links { display: flex !important; }

/* a section's own heading (not a pp-shead) keeps its distance from what follows */
.pp-section > .pp-h2 + * { margin-top: 16px; }

/* a card's name: a 40px tap target however short, and a catalog name of slash-joined words
   ("Magnum/Marine/Magnum Muscle", "Corvette/Camaro") breaks inside them rather than past a phone's edge */
.pp-card__name { overflow-wrap: anywhere; }

/* the tiles are a list: no bullets, no indent */
.pp-tiles { margin: 0; padding: 0; list-style: none; }
.pp-tiles > li { margin: 0; }

/* the frame's buttons against the theme's bare `button` rules */
button.pp-btn {
  width: auto !important; height: auto !important; min-height: 40px !important; margin: 0 !important; padding: 0 18px !important;
  background: var(--site-button-bg) !important; color: var(--site-button-fg) !important;
  font: 700 16px/1 var(--site-font-button) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important;
}
button.pp-btn--accent { background: var(--site-accent) !important; color: var(--site-accent-fg) !important; }
button.pp-btn:hover, button.pp-btn--accent:hover { background: var(--site-fg) !important; color: var(--site-bg) !important; }
.pp-card__buy button.pp-btn { width: 100% !important; }

/* a section's cards past the first: a ghost Show all that opens the rest in place */
.pp-rest { margin-top: 16px; }
.pp-rest > summary { list-style: none; }
.pp-rest > summary::-webkit-details-marker { display: none; }
.pp-rest[open] > summary { display: none; }

@media (max-width: 979.98px) {
  button.pp-btn { padding: 0 10px !important; font-size: 14px !important; }
}

}