/* Sarah's ticket 13 (13 Nov 2026): brand fonts on customer pages only.
   Headers, logo, brand name and product names: Playfair Display Bold. "Editorial Serif" is the shipped,
   renamed Playfair Display subset, used here at weight 700.
   Sub headers: Libre Baskerville Regular, shipped as the renamed latin subset "Editorial Subhead"
   (the OFL reserves the name "Libre Baskerville").
   Regular text, buttons, forms, prices and labels: Inter.
   Only customer layouts set html.vf-store and link this file. Staff, till, sell-host and Tea Lab pages
   never do, so they keep the :root tokens in site.css. */

@font-face {
  font-family: "Editorial Subhead";
  src: url("/fonts/EditorialSubhead-latin-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0-17F, U+300-36F, U+2000-206F, U+20A0-20CF, U+2082, U+2212;
}

html.vf-store {
  --font-display: "Editorial Serif", Georgia, "Times New Roman", serif;
  --font-subhead: "Editorial Subhead", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-utility: var(--font-body);
  --font-sans: var(--font-body);
}

/* Headers, brand name and product names: Bold. */
.vf-store .site-menu-brand strong,
.vf-store .route-heading h1,
.vf-store .route-hero h1,
.vf-store .pdp-title h1,
.vf-store .account-intro h1,
.vf-store .empty-state h1,
.vf-store .category-hero h1,
.vf-store .info-page__header h1,
.vf-store .sample-offer__copy h1,
.vf-store .checkout-result h1,
.vf-store .cart-heading h1,
.vf-store .cart-empty h1,
.vf-store .account-page-shell h1,
.vf-store .vf-track-page h1,
.vf-store .newsletter-page h1,
.vf-store .search-result__content h2,
.vf-store .subscription-card h2,
.vf-store .cart-line h2,
.vf-store .black-friday-card__name,
.vf-store .home-loyalty-card h3,
.vf-store .newsletter-email__seal {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Sub headers: sentence-case section headings that wrap freely. */
.vf-store .reviews-section h2,
.vf-store .related-products h2,
.vf-store .subcategory-strip h2,
.vf-store .reference-section h2,
.vf-store .reference-card h2,
.vf-store .reference-card__subheading,
.vf-store .serve-methods h3,
.vf-store .related-category-links h2,
.vf-store .info-section h2,
.vf-store .cart-summary h2,
.vf-store .cart-review__heading h2,
.vf-store .cart-addons > header h2,
.vf-store .checkout-page--simple .checkout-order-card h2,
.vf-store .checkout-form--simple .checkout-section-heading h2,
.vf-store .checkout-form--simple .checkout-fulfillment-choice legend,
.vf-store .newsletter-page h2,
.vf-store .newsletter-page h3,
.vf-store .vf-newsletter__title,
.vf-store .sample-offer__steps h2 {
  font-family: var(--font-subhead);
  font-weight: 400;
}

.vf-store .cart-estimator > strong {
  font-family: var(--font-subhead);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.08;
  letter-spacing: -.025em;
}

/* Small labels that are headings in the markup: Inter, like the other labels. */
.vf-store .filter-rail h2,
.vf-store .account-sections h2 {
  font-family: var(--font-body);
}

/* Headings with no family rule of their own used to inherit Charter from body. Keep them in the
   brand serifs instead of letting them turn into Inter. :where() has zero specificity, so every rule
   above and every existing family rule still wins; being unlayered, it still beats Tailwind preflight. */
:where(html.vf-store main h1) {
  font-family: var(--font-display);
  font-weight: 700;
}
:where(html.vf-store main h2, html.vf-store main h3) {
  font-family: var(--font-subhead);
}

@media (max-width: 359px) {
  .vf-store .mobile-search .search-form input::placeholder {
    font-size: 15px;
  }
  .vf-store .brand-bar__inner .wordmark {
    grid-template-columns: 30px auto;
    gap: 6px;
  }
  .vf-store .brand-bar__inner .wordmark .wordmark__mark {
    width: 30px;
    height: 30px;
  }
  .vf-store .brand-bar__inner .wordmark__copy strong {
    font-size: 15px;
  }
  .vf-store .brand-bar__inner .header-actions {
    gap: 0;
  }
}