/* proto-pages-am.css: autometer.ca's landing pages in AutoMeter's look, over the shared frame (proto-pages.css): the
   light grey page with white panels lifted by the theme's soft shadow, proxima-nova capitals for the headings, the
   gold button with near-black text, and the gauge card (search/_gauge.html: the line, the size and the movement under
   the name, then what is in the box, as the frame's detail line). Colours are cl-site.css's tokens: --site-gold and --site-panel when the site sets
   them, else the site's own button and field colours.
   The client's theme (static/theme/css/style.css) is unlayered and paints every a:hover and button:hover gold, so the
   few rules that must beat it say !important, which a layered rule needs to win over an unlayered one. */
@layer base, kit, site;

@layer site {

.am-page { background: var(--site-bg); color: var(--site-fg); }
.am-page .pp-wrap { max-width: 1312px; padding: 40px 16px 80px; }
.am-page .pp-h1 { margin: 0; font: 700 42px/1.05 var(--site-font-heading); letter-spacing: 0; text-transform: uppercase; color: var(--site-fg); }
.am-page .pp-h2 { margin: 0; font: 700 24px/1.1 var(--site-font-heading); letter-spacing: 0; text-transform: uppercase; color: var(--site-fg); }
.am-page p { margin: 0; }
.am-lead { max-width: 760px; margin-top: 14px; font: 400 19px/1.4 var(--site-font-body); color: var(--site-fg); }
.am-lead + .am-lead { margin-top: 6px; }

/* the head panel: the H1 and its lines in a white box, as AutoMeter's own "Shop by" panels */
.am-head { padding: 32px; background: var(--site-panel, var(--site-field-bg)); box-shadow: 0 4px 10px var(--site-lift, var(--site-line)); }

/* buttons: the gold one, near-black text; the theme's gold hover stays gold, so the hover darkens the text box instead */
.am-page .pp-btn {
  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--site-radius);
  background: var(--site-gold, var(--site-button-bg)); color: var(--site-gold-fg, var(--site-button-fg));
  font: 700 15px/1 var(--site-font-button); font-style: normal; letter-spacing: 0.5px; text-transform: uppercase;
}
.am-page .pp-btn:hover, .am-page .pp-btn:focus-visible { background: var(--site-fg) !important; color: var(--site-panel, var(--site-bg)) !important; }
.am-page .pp-btn--ghost { background: transparent; color: var(--site-fg); box-shadow: inset 0 0 0 2px var(--site-fg); }
/* the card's stepper (proto-pages.css): the theme's gold button hover and focus give way to the frame's ink box */
.am-page .pp-stepper { background: var(--site-panel, var(--site-bg)); }
.am-page .pp-stepper button:focus { background: transparent !important; color: var(--site-fg) !important; }
.am-page .pp-stepper button:hover { background: transparent !important; color: var(--site-fg) !important; }
@media (hover: hover) { .am-page .pp-stepper button:hover { background: var(--site-fg) !important; color: var(--site-panel, var(--site-bg)) !important; } }
.am-page .pp-stepper button:focus-visible { background: var(--site-fg) !important; color: var(--site-panel, var(--site-bg)) !important; }
/* and the theme's unlayered number box (14px, a 3px corner, a margin under) gives way to the stepper's 16px square one */
.am-page .pp-stepper input { margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 2px solid var(--site-fg) !important; border-right: 2px solid var(--site-fg) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; font: 700 16px/1 var(--site-font-body) !important; }

/* the card: white, square, the theme's shadow; the name in capitals as the theme's tiles */
.am-page .pp-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; }
.am-page .pp-card { gap: 6px; padding: 16px; background: var(--site-panel, var(--site-field-bg)); border: 0; box-shadow: 0 4px 10px var(--site-lift, var(--site-line)); }
.am-page .pp-card__img { background: var(--site-photo, var(--site-panel, var(--site-field-bg))); }
.am-page .pp-card__img img { height: 170px; object-fit: contain; }
.am-page .pp-card__name { margin: 6px 0 0; font: 700 16px/1.2 var(--site-font-heading); text-transform: uppercase; }
.am-page .pp-card__name a, .am-page .pp-card__name a:hover { color: var(--site-fg) !important; }
.am-page .pp-card__name a { box-sizing: border-box; min-height: 40px; font-weight: 700; }
.am-page .pp-card__name a:hover { text-decoration: underline; }
.am-page .pp-card__detail { font: 600 15px/1.3 var(--site-font-body); color: var(--site-fg); }
.am-page .pp-card__fits { font: 400 15px/1.3 var(--site-font-body); }
.am-page .pp-card__part { font: 400 14px/1.2 var(--site-font-body); color: var(--site-fg); }
.am-page .pp-card__price { margin-top: 4px; font: 700 22px/1 var(--site-font-body); color: var(--site-fg); }
.am-page .pp-stock { font: 700 14px/1.2 var(--site-font-body); color: var(--site-fg); }

/* a section: its heading over a rule, as the frame's, in the theme's capitals */
.am-page .pp-shead { margin-top: 48px; border-bottom: 3px solid var(--site-fg); }
.am-who { margin-top: 10px; font: 400 16px/1.35 var(--site-font-body); color: var(--site-fg); }
.am-who + .pp-grid { margin-top: 16px; }

/* a plain link that goes to a page: underlined, near-black on hover too */
.am-link, .am-link:hover, .am-link:focus { display: inline-flex; align-items: center; min-height: 40px; color: var(--site-fg) !important; font: 700 16px/1.2 var(--site-font-body); text-decoration: underline; }
.am-more { margin-top: 16px; }

/* the links row: the frame's, near-black on hover; the theme's unlayered nav rule makes it a block, so flex wins by !important */
.am-page .pp-links { display: flex !important; margin-top: 64px; border-top: 3px solid var(--site-fg); }
.am-page .pp-links a, .am-page .pp-links a:hover { color: var(--site-fg) !important; font: 700 15px/1.2 var(--site-font-body); text-transform: uppercase; }
.am-page .pp-links a:hover { text-decoration: underline; }

/* the tiles of the home: white, the theme's shadow, the name, then the line's look in one line */
.am-page .pp-tile { border: 0; background: var(--site-panel, var(--site-field-bg)); box-shadow: 0 4px 10px var(--site-lift, var(--site-line)); color: var(--site-fg) !important; text-decoration: none; }
.am-page .pp-tile__img { border-bottom: 0; }
.am-page .pp-tile:hover, .am-page .pp-tile:focus-visible { box-shadow: inset 0 0 0 3px var(--site-fg), 0 4px 10px var(--site-lift, var(--site-line)); }
.am-page .pp-tile:hover .pp-tile__name { color: var(--site-fg); text-decoration: underline; }
.am-page .pp-tile__name { font: 700 18px/1.2 var(--site-font-heading); }
.am-tile__who { grid-column: 1 / -1; padding: 0 14px; font: 400 15px/1.3 var(--site-font-body); color: var(--site-fg); }
.am-tiles { margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-tiles--lines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.am-page .am-tile { grid-template-columns: minmax(0, 1fr); gap: 4px; }

/* the vehicle picker of the pods and kits pages: the theme's own "By vehicle" bar (partials/ymm.html) under the head,
   as before the phone clean-up; under 980px it is one row (site/pick.css) */
.am-pick { margin-top: 24px; }
.am-mine .pp-nofit { margin-top: 0; }
.am-page .pp-clear, .am-page .pp-clear:hover { color: var(--site-fg) !important; }

/* the phone: the H1 a little bigger, every other text smaller (never under 13px), the gaps tighter so the parts
   come up under the H1; inputs stay 16px and taps 40px */
@media (max-width: 600px) {
  .am-page .pp-wrap { padding: 16px 16px 48px; }
  .am-head { padding: 16px; }
  .am-page .pp-h1 { font-size: 34px; }
  .am-page .pp-h2 { font-size: 18px; }
  .am-lead { margin-top: 10px; font-size: 15px; }
  .am-page .pp-section { margin-top: 28px; }
  .am-page .pp-shead { margin-top: 28px; padding-bottom: 6px; }
  .am-page .pp-shead + * { margin-top: 12px; }
  .am-who { margin-top: 8px; font-size: 14px; }
  .am-who + .pp-grid { margin-top: 12px; }
  .am-page .pp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .am-page .pp-card { padding: 10px; }
  .am-page .pp-card__img img { height: 120px; }
  .am-page .pp-card__name { font-size: 13px; }
  .am-page .pp-card__detail, .am-page .pp-card__fits, .am-page .pp-card__fit, .am-page .pp-card__part, .am-page .pp-stock { font-size: 13px; }
  .am-page .pp-card__price { font-size: 17px; }
  .am-page .pp-btn { padding: 0 8px; font-size: 13px; }
  .am-page .pp-more .pp-btn { height: auto; padding: 8px 12px; line-height: 1.2; text-align: center; }
  .am-tiles, .am-tiles--lines { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-page .pp-tile__name { font-size: 14px; }
  .am-tile__who { padding: 0 10px; font-size: 13px; }
  .am-page .pp-clear { font-size: 14px; }
  .am-page .pp-nofit__say { font-size: 16px; }
  .am-page .pp-links { margin-top: 40px; }
  .am-page .pp-links a { font-size: 13px; }
}

}