/* Self-hosted webfonts — replaces the render-blocking fonts.googleapis.com CSS.
   Latin subset only, variable-weight files (one file covers all used weights),
   so three requests total replace the previous ten+ cross-origin ones.
   Regenerate by requesting the css2 URL with a modern-browser User-Agent and
   downloading the `latin` @font-face srcs into this folder. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('cormorant-garamond-400_700.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('cormorant-garamond-400_600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('inter-300_700.woff2') format('woff2');
}

/* ---------- Performance utilities ---------- */
/* Reserve the hero headline's final height before JS fills it from
   /api/settings, so the text arriving (and the webfont swap) cannot push
   the whole page down (Lighthouse CLS 0.19 -> 0). Keep in sync with the
   mobile-first .hero-title sizing; desktop sizes override below. */
.hero-title { min-height: 2.24em; }
.hero-desc { min-height: 3.6em; }
@media (min-width: 768px) {
  .hero-title { min-height: 0; }
  .hero-desc { min-height: 0; }
}

/* Footer legal links: raise contrast on the dark footer (Lighthouse
   color-contrast: 3.79 -> >4.5). The dark-inline style blocks on the home
   and shop pages also restyle .footer-legal a — loaded after this file,
   they win there; this rule covers every other page. */
.footer-bottom a { color: #b9c4b6; }
.footer-bottom a:hover { color: var(--cream-light); }

/* Shop-grid heading order: product cards use <h3> directly under the
   section <h1>; promoting them to <h2> restores sequential order. The
   .product-title rule already fixes the visual size, so no style change. */