/* Layout primitives and typography. Depends on tokens.css. */

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Uppercase is scoped to exactly four surfaces on the reference: primary nav,
 * section titles, search-suggestion category labels, and the transactional
 * CTA/wishlist buttons (the current reference design sets those in caps).
 * Everything else — product names, prices, body copy — is sentence case.
 * Adding a fifth uppercase rule is how this design starts reading like a
 * different brand.
 */
.pm-nav__link,
.pm-section-title,
.pm-search__category,
.pm-btn--cta,
.pm-btn--outline {
  text-transform: uppercase;
}

.pm-container {
  max-width: var(--pm-content-max);
  margin-inline: auto;
  padding-inline: var(--pm-grid-margin-md);
}

@media (min-width: 960px) {
  .pm-container {
    padding-inline: var(--pm-grid-margin-lg);
  }
}

.pm-container--flush {
  max-width: none;
  padding-inline: 0;
}

/* The 32 -> 52 -> 88 jump is what separates "components sit near each other"
 * from "this is a new section". */
.pm-section {
  margin-block: var(--pm-sp-section-sm);
}

@media (min-width: 960px) {
  .pm-section {
    margin-block: var(--pm-sp-section-lg);
  }
}

.pm-section-title {
  font-family: var(--pm-font-display);
  font-size: var(--pm-title-size);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--pm-sp-5);
  padding-bottom: var(--pm-sp-4);
  border-bottom: 1px solid var(--pm-hairline);
}

.pm-title-plain {
  font-family: var(--pm-font-display);
  font-size: var(--pm-title-size);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.pm-display-1 {
  font-family: var(--pm-font-display);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 960px) {
  .pm-display-1 {
    font-size: 36px;
  }
}

.pm-caption {
  font-size: var(--pm-caption-size);
  color: var(--pm-text-2);
  line-height: 1.3;
}

.pm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pm-surface);
  padding: var(--pm-sp-3) var(--pm-sp-4);
  z-index: 100;
}

.pm-skip:focus {
  left: 0;
}

/* Promo bar + header are fixed, so content needs to clear both. */
.pm-main {
  padding-top: calc(var(--pm-promobar-h) + var(--pm-header-h-sm));
  min-height: 60vh;
}

@media (min-width: 960px) {
  .pm-main {
    padding-top: calc(var(--pm-promobar-h) + var(--pm-header-h-lg));
  }
}