@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");

/* Nordic Apothecary typography system v3.
   Late-loaded to normalize section overrides, keep mobile headings restrained,
   and preserve a clean semantic hierarchy for search and AI readers. */

:root {
  --na-font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --na-font-editorial: "Libre Baskerville", Georgia, serif;
  --na-font-data: "American Typewriter", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --font-body-family: var(--na-font-ui);
  --font-heading-family: var(--na-font-ui);
  --font-body-style: normal;
  --font-heading-style: normal;
  --font-body-weight: 400;
  --font-heading-weight: 400;

  --na-type-body: clamp(1.5rem, 1.43rem + 0.18vw, 1.6rem);
  --na-type-small: 1.3rem;
  --na-type-eyebrow: 1.1rem;
  --na-type-lead: clamp(1.55rem, 1.42rem + 0.28vw, 1.8rem);
  --na-type-h1: clamp(2.6rem, 2.05rem + 1.45vw, 4.4rem);
  --na-type-h2: clamp(2.2rem, 1.8rem + 0.8vw, 3.2rem);
  --na-type-h3: clamp(1.7rem, 1.52rem + 0.28vw, 2rem);
  --na-type-hero: clamp(2.8rem, 2rem + 1.65vw, 4.8rem);
  --na-type-stat: clamp(3.2rem, 2.2rem + 2.35vw, 5.6rem);

  --na-line-body: 1.6;
  --na-line-copy: 1.68;
  --na-line-heading: 1.16;
  --na-track-heading: 0.04rem;
  --na-track-eyebrow: 0.14em;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
.text-body,
.rte,
.product__description,
.na-pdp,
.na-method,
.na-proof,
.nss,
.na-library,
.na-category,
.na-reviews,
.na-reviews-hero,
.na-sounds,
.na-bundle,
.nse,
.na-dynamic-personalization {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-body);
  line-height: var(--na-line-body);
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--na-font-ui);
  font-style: normal;
  font-weight: 400;
  line-height: var(--na-line-heading);
  letter-spacing: var(--na-track-heading);
}

h1,
.h1 {
  font-size: var(--na-type-h1);
}

h2,
.h2 {
  font-size: var(--na-type-h2);
}

h3,
.h3 {
  font-size: var(--na-type-h3);
}

.h0,
.hxl,
.hxxl {
  font-size: var(--na-type-hero);
  line-height: 1.12;
}

p,
li,
dd,
dt,
summary,
input,
textarea,
select,
button {
  letter-spacing: 0;
}

.caption-with-letter-spacing,
.caption-with-letter-spacing--medium,
.caption-with-letter-spacing--large,
.product__text.caption-with-letter-spacing,
.na-pdp-block__eyebrow,
.na-pdp-intro__eyebrow,
.na-method__eyebrow,
.na-proof__eyebrow,
.nss__eyebrow,
.na-library__eyebrow,
.na-category__eyebrow,
.na-reviews-hero__eyebrow,
.na-reviews__eyebrow,
.na-sounds__eyebrow,
.na-bundle__eyebrow,
.nse-eyebrow,
.na-dynamic-personalization__eyebrow,
.mega-menu-kicker,
.mega-menu-heading,
.na-cat-nav__home,
.na-cat-nav__link {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-eyebrow);
  letter-spacing: var(--na-track-eyebrow);
  line-height: 1.35;
}

/* Header and navigation */
.header,
.header__heading-link,
.header__menu-item,
.menu-drawer__menu-item,
.menu-drawer__close-button,
.mega-menu-link,
.mega-menu-list a,
.country-localization__compact-text {
  font-family: var(--na-font-ui);
}

.header__heading-link .h2 {
  font-family: var(--na-font-ui);
  font-size: clamp(1.7rem, 1.45rem + 0.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: var(--na-track-heading);
}

.mega-menu-link {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

.mega-menu-title {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-h2);
  line-height: var(--na-line-heading);
}

.mega-menu-list a {
  font-size: clamp(1.4rem, 1.3rem + 0.25vw, 1.55rem);
  line-height: 1.55;
}

/* Product UI */
.product__title h1,
.product__title .h1,
.product__title .h2,
.na-featured .product__title,
.na-featured .product__title *,
.na-featured h1,
.na-featured h2,
.na-featured h3 {
  font-family: var(--na-font-ui) !important;
  font-style: normal !important;
  letter-spacing: var(--na-track-heading) !important;
}

.product__title h1,
.product__title .h1,
.na-featured .product__title {
  font-size: var(--na-type-h1) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
}

.product__info-container,
.product__info-container .price,
.product-form,
.product-form__input,
.shopify-payment-button__button,
.product-popup-modal__content-info {
  font-family: var(--na-font-ui);
}

/* Product story and method pages use UI typography for product information. */
.na-pdp {
  --na-pdp-display: var(--na-font-ui);
  --na-pdp-body: var(--na-font-ui);
  --na-pdp-block-y: clamp(6.4rem, 8vw, 9.6rem);
}

.na-pdp-block__heading,
.na-method__heading,
.na-proof__heading,
.nss-block__heading,
.na-reviews__title {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--na-track-heading);
}

.nss-hero__heading,
.na-category__title,
.na-dynamic-personalization__heading {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-h1);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--na-track-heading);
}

.na-pdp-block__intro,
.na-method__intro,
.na-proof__intro,
.nss-hero__intro,
.nss-block__intro,
.na-category__lede,
.na-library__lede,
.na-reviews-hero__lede,
.na-sounds__lede,
.na-bundle__lede,
.nse-lede,
.na-dynamic-personalization__intro {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-lead);
  line-height: var(--na-line-copy);
  letter-spacing: 0;
}

.na-pdp-ritual__heading,
.na-pdp-ingredient__name,
.na-pdp-review__headline,
.na-pdp-faq__q,
.na-method__card-title,
.na-proof__block-title,
.nss-principle__title,
.nss-step__title,
.nss-criterion__title,
.nss-faq__summary,
.na-library__card-title,
.na-category__card-title,
.na-sounds__card-title,
.na-bundle__product-name,
.na-bundle__pairings-title,
.na-bundle-prompt__heading,
.nse-product__name,
.nse-cta__heading,
.na-dynamic-personalization__title {
  font-family: var(--na-font-ui) !important;
  font-size: var(--na-type-h3) !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
  letter-spacing: var(--na-track-heading) !important;
}

.na-pdp-mechanism__body,
.na-pdp-faq__a,
.na-pdp-review__body,
.na-pdp-ingredient__rationale,
.na-method__card-text,
.na-proof__block-text,
.nss-block__body,
.nss-principle__text,
.nss-step__text,
.nss-criterion__text,
.nss-faq__answer,
.na-library__card-count,
.na-category__card-excerpt,
.na-sounds__card-text,
.na-bundle__product-note,
.na-bundle__pairings-text,
.nse-product__note,
.nse-cta__text,
.na-dynamic-personalization__body {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-body);
  line-height: var(--na-line-copy);
}

.na-pdp-outcome__stat,
.na-reviews__aggregate-rating {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-stat);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.na-pdp-outcome__unit,
.na-pdp-formulator__text,
.na-pdp-manifesto__line {
  font-family: var(--na-font-ui);
  font-size: var(--na-type-h2);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: var(--na-track-heading);
}

.na-pdp-stickybar__title {
  font-family: var(--na-font-ui);
  font-size: 1.45rem;
  letter-spacing: 0;
}

/* Editorial moments keep a single restrained serif family. */
.na-library__title,
.na-reviews-hero__title,
.na-sounds__title,
.na-bundle__title,
.nse-banner__heading,
.nse-ritual__heading {
  font-family: var(--na-font-editorial) !important;
  font-size: var(--na-type-hero) !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

.nse-product__numeral {
  font-family: var(--na-font-editorial);
  font-size: clamp(3.2rem, 4vw, 5.6rem);
  line-height: 0.95;
}

.nse-step__num,
.nse-quote {
  font-family: var(--na-font-editorial);
}

.nse-quote {
  font-size: clamp(1.9rem, 1.5rem + 0.8vw, 2.8rem);
  line-height: 1.45;
}

/* Verification and machine-readable proof details. */
.na-pdp-ingredient__meta,
.na-pdp-labs__descriptor,
.na-pdp-outcome__basis,
.na-dynamic-personalization__promo-code {
  font-family: var(--na-font-data);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 749px) {
  body,
  .text-body {
    font-size: 1.5rem;
  }

  .header {
    min-height: 5.8rem;
  }

  .header__heading-logo-wrapper {
    max-width: min(16rem, 38vw);
  }

  .menu-drawer__menu-item,
  .menu-drawer__close-button {
    font-size: 1.55rem;
    line-height: 1.35;
  }

  .na-pdp {
    --na-pdp-shell-x: 2rem;
    --na-pdp-block-y: 5.6rem;
  }

  .na-pdp-block__head {
    margin-bottom: 3.2rem;
  }

  .na-pdp-outcome {
    padding: 3.2rem 2rem;
  }

  .na-pdp-manifesto {
    min-height: 56vh;
  }

  .nss-hero {
    padding-top: 5.6rem;
    padding-bottom: 4.8rem;
  }

  .nss-block {
    padding-top: 4.8rem;
    padding-bottom: 4.8rem;
  }

  .na-cat-nav__link {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
  }
}

/* Final font-family enforcement.
   Older theme sections expose font pickers and inline font-family rules with
   high specificity. Keep their sizing/layout, but collapse the family system
   back to the three approved Nordic Apothecary families. */

.header,
.header [class],
.menu-drawer,
.menu-drawer [class],
.mega-menu-wrapper,
.mega-menu-wrapper [class],
.localization-form,
.localization-form [class] {
  font-family: var(--na-font-ui) !important;
}

#MainContent [id^="shopify-section-"] :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  span,
  small,
  div,
  li,
  dt,
  dd,
  summary,
  blockquote,
  button,
  label,
  input,
  textarea,
  select
)[class],
#MainContent [id^="shopify-section-"] [style*="font-family"] {
  font-family: var(--na-font-ui) !important;
}

#MainContent [id^="shopify-section-"] :is(h1, h2, h3, h4, h5, h6, p, li) {
  font-family: var(--na-font-ui) !important;
}

#MainContent [id^="shopify-section-"] :is(
  .na-library__title,
  .na-reviews-hero__title,
  .na-sounds__title,
  .na-bundle__title,
  .nse-banner__heading,
  .nse-ritual__heading,
  .nse-quote,
  .article-template__title,
  .na-article__title,
  .elegant-article__title,
  .editorial-hero__title
) {
  font-family: var(--na-font-editorial) !important;
}

#MainContent [id^="shopify-section-"] :is(
  .na-pdp-ingredient__meta,
  .na-pdp-labs__descriptor,
  .na-pdp-outcome__basis,
  .na-dynamic-personalization__promo-code,
  code,
  pre,
  kbd,
  samp
) {
  font-family: var(--na-font-data) !important;
}
