/* Storefront heading roles. Loaded after page styles; adjust this scale once
   for all pages. Product-card titles, prices, form controls and body copy keep
   their component styles. New components can use the sf-heading-* classes. */
.storefront-body {
  --sf-heading-page: clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);
  --sf-heading-section: clamp(1.375rem, 1.15rem + .8vw, 1.625rem);
  --sf-heading-product: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
  --sf-heading-panel: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --sf-heading-dialog: clamp(1.4375rem, 1.25rem + .7vw, 1.625rem);
  --sf-heading-hero: clamp(2.375rem, 1.4rem + 3.3vw, 3.75rem);
  --sf-heading-feature: clamp(1.875rem, 1.35rem + 2vw, 2.625rem);
  --sf-heading-footer: clamp(1.1875rem, 1.1rem + .3vw, 1.25rem);
  --sf-heading-leading: 1.14;
  --sf-heading-tracking: -.03em;
  --sf-page-inset: clamp(1.5rem, 3.5vw, 3rem);
  --sf-page-outset: clamp(1.5rem, 3vw, 2.5rem);
}

/* The footer already reserves space for the mobile bottom navigation.
   Do not also leave an empty navigation-sized strip above it. */
.storefront-body .storefront-main { padding-bottom: 0; }
.storefront-body .storefront-footer { margin-top: clamp(1rem, 2.5vw, 2rem); }

.storefront-body :is(.account-home,.account-page,.account-details-hub,.account-orders,.address-book,.account-security,.account-reviews,.account-questions,.catalog-page,.cart-page,.checkout-page,.content-page) {
  padding-block: var(--sf-page-inset) var(--sf-page-outset);
}

/* Page titles, including account, catalog, checkout, legal and post-sale pages. */
.storefront-body .storefront-main h1,
.storefront-body :is(.account-home,.account-page,.account-details-hub,.account-orders,.address-book,.account-security,.account-reviews)>header h1,
.storefront-body .return-request-page .post-sale-hero h1,
.storefront-body .sf-heading-page {
  font-size: var(--sf-heading-page);
  line-height: var(--sf-heading-leading);
  letter-spacing: var(--sf-heading-tracking);
  overflow-wrap: anywhere;
}

/* A product name is a page title, with a slightly smaller mobile minimum. */
.storefront-body .product-purchase h1,
.storefront-body .sf-heading-product {
  font-size: var(--sf-heading-product);
  line-height: var(--sf-heading-leading);
  letter-spacing: var(--sf-heading-tracking);
}

.storefront-body .section-heading :is(h1,h2),
.storefront-body :is(.product-reviews,.product-questions)>header h2,
.storefront-body .sf-heading-section {
  font-size: var(--sf-heading-section);
  line-height: var(--sf-heading-leading);
  letter-spacing: var(--sf-heading-tracking);
}

.storefront-body :is(.auth-card,.cart-order-summary,.checkout-summary,.secure-payment-summary,.address-form,.address-section-heading,.security-card-heading,.post-sale-card,.cart-empty,.catalog-empty,.account-review-empty) h2,
.storefront-body .sf-heading-panel {
  font-size: var(--sf-heading-panel);
  line-height: var(--sf-heading-leading);
  letter-spacing: var(--sf-heading-tracking);
}

.storefront-body :is(.order-detail-modal,.checkout-address-modal)>header h2,
.storefront-body .drawer-header h2,
.storefront-body .sf-heading-dialog {
  font-size: var(--sf-heading-dialog);
  line-height: var(--sf-heading-leading);
  letter-spacing: var(--sf-heading-tracking);
}

.storefront-body .hero-copy h2,
.storefront-body .sf-heading-hero {
  font-size: var(--sf-heading-hero);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.storefront-body .campaign-card h2,
.storefront-body .sf-heading-feature {
  font-size: var(--sf-heading-feature);
  line-height: 1.1;
  letter-spacing: var(--sf-heading-tracking);
}

.storefront-body .storefront-footer.is-refined :is(.storefront-footer-page-group h2,.storefront-footer-pages-title) {
  font-size: var(--sf-heading-footer);
  line-height: var(--sf-heading-leading);
}