/* Precision Labs — reset, typography scale, and the shared component kit every
   template builds from. Page-specific rules live in their own files.

   NOTE for anyone extending this: the reset below is wrapped in :where() so it
   has zero specificity. A bare `body p { margin: 0 }` reset outranks a later
   `.lede { margin: 1em }` and silently squashes component styles. */

*, *::before, *::after { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) {
  margin: 0;
  background: var(--pl-canvas);
  color: var(--pl-ink);
  font-family: var(--pl-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; }
:where(img, video, svg) { display: block; max-width: 100%; height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; }

/* ── layout ─────────────────────────────────────── */
.pl-wrap { width: 100%; max-width: var(--pl-content); margin: 0 auto; padding: 0 var(--pl-gutter); }
/* padding-block, NEVER the `padding: Y 0` shorthand.
 *
 * These two classes are routinely used together (`class="pl-wrap pl-section"`).
 * Both selectors are (0,1,0), so the later one wins — and the shorthand sets
 * ALL four sides, silently zeroing .pl-wrap's horizontal gutter. Seven
 * containers across the home, product, cart and account pages were sitting
 * exactly 44px left of every other band because of this one line, which reads
 * as a vertical-rhythm rule and is in fact a horizontal one too. */
.pl-section { padding-block: var(--pl-section-y); }
.pl-cols { display: grid; gap: 34px; align-items: start; }
.pl-cols--sidebar { grid-template-columns: minmax(0, 1fr) 360px; }
.pl-cols--narrow  { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
/* Every 1fr track holding an image must be minmax(0,1fr) or the image's
   intrinsic width blows the column out. */
.pl-grid { display: grid; gap: 20px; }
.pl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

/* ── type scale ─────────────────────────────────── */
.pl-h-hero { font-size: 66px; line-height: .98; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.pl-h2     { font-size: 40px; line-height: 1.0;  letter-spacing: -.03em;  font-weight: 700; text-wrap: balance; }
.pl-h3     { font-size: 32px; line-height: 1.1;  letter-spacing: -.025em; font-weight: 700; }
.pl-h4     { font-size: 24px; line-height: 1.1;  letter-spacing: -.02em;  font-weight: 700; }
.pl-lead   { font-size: 17.5px; line-height: 1.6; color: var(--pl-t2); text-wrap: pretty; }
.pl-body   { font-size: 15px; line-height: 1.6; color: var(--pl-t2); text-wrap: pretty; }
.pl-small  { font-size: 13px; line-height: 1.5; color: var(--pl-muted); }
.pl-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pl-navy);
}
.pl-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pl-muted);
}
.pl-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 1199px) {
  .pl-h-hero { font-size: 48px; }
  .pl-h2 { font-size: 34px; }
  .pl-h3 { font-size: 27px; }
}
@media (max-width: 767px) {
  .pl-h-hero { font-size: 34px; }
  .pl-h2 { font-size: 27px; }
  .pl-h3 { font-size: 23px; }
  .pl-cols--sidebar, .pl-cols--narrow { grid-template-columns: minmax(0, 1fr); }
  .pl-grid--5, .pl-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .pl-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pl-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-cols--sidebar, .pl-cols--narrow { grid-template-columns: minmax(0, 1fr); }
}

/* ── buttons ────────────────────────────────────── */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 30px; border: 1px solid var(--pl-navy); background: var(--pl-navy);
  color: #fff; font: 700 12.5px/1 var(--pl-font);
  letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
  transition: filter .18s, background .18s, color .18s;
}
.pl-btn:hover { filter: brightness(.92); color: #fff; }
.pl-btn--accent { background: var(--pl-accent); border-color: var(--pl-accent); }
.pl-btn--ink { background: var(--pl-ink); border-color: var(--pl-ink); }
.pl-btn--ghost { background: transparent; color: var(--pl-ink); border-color: var(--pl-ink); }
.pl-btn--ghost:hover { background: var(--pl-ink); color: #fff; filter: none; }
.pl-btn--on-dark { background: transparent; color: var(--pl-on-dark); border-color: rgba(243,245,244,.45); }
.pl-btn--on-dark:hover { background: rgba(243,245,244,.1); color: var(--pl-on-dark); }
.pl-btn--light { background: var(--pl-on-dark); border-color: var(--pl-on-dark); color: var(--pl-ink); }
.pl-btn--light:hover { color: var(--pl-ink); }
.pl-btn--wide { width: 100%; }
.pl-btn--sm { padding: 11px 18px; font-size: 11px; letter-spacing: .13em; }
.pl-link {
  color: var(--pl-navy); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px;
}
.pl-link:hover { color: var(--pl-ink); }

/* ── surfaces ───────────────────────────────────── */
.pl-card { background: var(--pl-surface); border: 1px solid var(--pl-bd); }
.pl-card__body { padding: 22px; }
.pl-panel { background: var(--pl-surface); border: 1px solid var(--pl-bd); padding: 26px; }
.pl-info { background: var(--pl-info-bg); border: 1px solid var(--pl-info-bd); padding: 18px; }
.pl-ok { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }

.pl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--pl-navy); color: #fff;
}
.pl-badge--accent { background: var(--pl-accent); }
.pl-badge--ok { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }
.pl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; font-size: 11.5px; font-weight: 600;
  background: var(--pl-chip); color: var(--pl-t3);
}
.pl-chip--lab { background: var(--pl-info-bg); color: var(--pl-navy); }
.pl-chip--nav { background: transparent; border: 1px solid var(--pl-bd-strong); padding: 9px 14px; font-size: 13px; }
.pl-chip--nav.is-on { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); }

/* ── forms ──────────────────────────────────────── */
.pl-field { margin-bottom: 16px; }
.pl-field > label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pl-muted);
}
.pl-input, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; padding: 14px 15px;
  font: 400 15px/1.4 var(--pl-font); color: var(--pl-ink);
  background: var(--pl-surface); border: 1px solid var(--pl-bd-strong);
  border-radius: 0; outline: none; transition: border-color .16s, box-shadow .16s;
}
.pl-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--pl-navy); box-shadow: 0 0 0 3px rgba(34,55,126,.12);
}
::placeholder { color: var(--pl-faint); }

/* ── price ──────────────────────────────────────── */
.pl-price { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.pl-price--lg { font-size: 34px; }
.pl-price del { color: var(--pl-faint); font-weight: 400; margin-right: 8px; }
.pl-price ins { text-decoration: none; }
.pl-save { color: var(--pl-ok-fg); font-weight: 700; }

/* ── utility ────────────────────────────────────── */
.pl-hairline { height: 1px; background: var(--pl-bd); border: 0; margin: 0; }
.pl-scroll-x { overflow-x: auto; }
.pl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--pl-navy); color: #fff; padding: 12px 20px;
}
.pl-skip:focus { left: 0; }

/* Focus must stay visible — the design has no other affordance for keyboard users. */
:focus-visible { outline: 2px solid var(--pl-navy); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}