/*
 * THE SUBMITTAL PACKAGE'S PRINTABLE PAGE (W184, Ryan 2026-09-04).
 *
 * Served as a static asset and pulled in by `<PdpPrintStyles>` rather than
 * `import`ed, for the reason given at the top of chrome.css.
 *
 * Class prefix `sf-pspr-` (product spec/print).
 *
 * "BROWSER PRINT-TO-PDF IS THE HONEST V1" — Ryan's own words. This page is a
 * plain document, not a pop-up: no shell, no scrim, no dialog. It renders
 * inside the site's ordinary `[brand]` layout on SCREEN (the header and
 * footer chrome are still there, because a shopper who lands here by URL
 * still needs a way back to the rest of the site) and hides that chrome only
 * `@media print`, where it would be dead weight on every printed page or PDF.
 */

.sf-pspr {
  margin: 0 auto;
  max-width: 720px;
  padding: 48px 24px 80px;
}

.sf-pspr__bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.sf-pspr__print {
  background: var(--brand-color-accent, #c4530a);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--brand-color-surface, #ffffff);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--button-text, 16px);
  font-weight: var(--button-weight, 700);
  min-height: var(--control-height, 48px);
  padding: 0 24px;
}

.sf-pspr__print:hover {
  background: var(--brand-color-accent-strong, #9c420a);
}

.sf-pspr__print:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

.sf-pspr__photo {
  border-radius: var(--radius-media);
  display: block;
  height: auto;
  margin: 0 0 28px;
  width: 100%;
}

.sf-pspr__name {
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-product);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.sf-pspr__description {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-body);
  line-height: 1.55;
  margin: 0 0 36px;
}

.sf-pspr__heading {
  border-bottom: 1px solid var(--brand-color-line, #e8e7e3);
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  padding-bottom: 12px;
}

.sf-pspr__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.sf-pspr__row {
  display: flex;
  gap: 20px;
}

.sf-pspr__label {
  color: var(--brand-color-ink, #17181a);
  flex: none;
  font-weight: 700;
  width: 160px;
}

.sf-pspr__value {
  color: var(--brand-color-ink, #17181a);
  flex: 1;
  margin: 0;
}

.sf-pspr__note {
  color: var(--brand-color-muted, #6c6a62);
}

/* --------------------------------------------------------------- print -- */

@media print {
  /*
   * THE SITE'S OWN CHROME IS NOT THE SUBMITTAL PACKAGE. Header, footer and
   * this page's own print button are all screen furniture; a printed page
   * carrying a "Print or save as PDF" button on it did not proofread its own
   * output.
   */
  .sf-header,
  .sf-footer,
  .sf-pspr__bar {
    display: none !important;
  }

  .sf-pspr {
    margin: 0;
    max-width: none;
    padding: 0;
  }

  /* A hairline under a heading reads as a rule on screen; on paper, most
   * browsers render `border-bottom` on a light-gray token close enough to
   * invisible that INK, not the tint, is what a printed sheet needs. */
  .sf-pspr__heading {
    border-bottom-color: var(--brand-color-ink, #17181a);
  }

  /* NO PAGE BREAK INSIDE ONE SPECIFICATION ROW — a label stranded at the foot
   * of one sheet with its value starting the next is the one thing a
   * printable spec sheet cannot do and still be read at a glance. */
  .sf-pspr__row {
    break-inside: avoid;
  }
}