/*
 * HAY LIVIN global typography refinement.
 *
 * This file is enqueued after the child-theme page modules. It changes only
 * typeface, type scale and control inheritance; layout, content and commerce
 * behaviour remain owned by their existing modules.
 */

/*
 * Keep the approved design-system file unchanged. The live theme currently
 * defines its typography variables there, so this later-loaded stylesheet
 * switches only the type family for the HAY LIVIN frontend.
 */
body.haylivin-site {
  --hay-heading-font: "Instrument Sans", Arial, sans-serif;
  --hay-body-font: "Instrument Sans", Arial, sans-serif;
}

body.haylivin-site,
body.haylivin-site :where(
  .elementor,
  .woocommerce,
  .site-content,
  .haylivin-global-header,
  .haylivin-global-footer
) {
  font-family: var(--hay-body-font);
}

body.haylivin-site :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .elementor-heading-title,
  .woocommerce-loop-product__title,
  .product_title
) {
  font-family: var(--hay-heading-font);
}

body.haylivin-site :where(button, input, select, textarea, optgroup, option) {
  font-family: var(--hay-body-font);
}

body.haylivin-site :where(
  .elementor-button,
  .button,
  .wp-element-button,
  .woocommerce a.button,
  .woocommerce button.button,
  input[type="submit"],
  input[type="button"]
) {
  font-family: var(--hay-body-font);
}

@media (max-width: 767px) {
  /* The approved Home stylesheet uses #hero for its display rule. Keep the
     mobile type target scoped to that exact hero so no layout-wide rule wins. */
  body.haylivin-site.home #hero.haylivin-home-content .hero__content h1,
  body.haylivin-site.home #hero.haylivin-home-content .hero__content h2 {
    font-size: clamp(2rem, 9vw, 2.25rem);
    line-height: 1.1;
  }

  body.haylivin-site.home .haylivin-home-content .hero__content h1,
  body.haylivin-site.home .haylivin-home-content .hero__content h2 {
    font-size: clamp(2rem, 9vw, 2.25rem);
    line-height: 1.1;
  }

  body.haylivin-site.home .haylivin-home-content h2 {
    font-size: clamp(1.625rem, 7vw, 1.875rem);
    line-height: 1.18;
  }

  body.haylivin-site.home .haylivin-home-content h3 {
    font-size: clamp(1.3125rem, 5.8vw, 1.5rem);
    line-height: 1.24;
  }

  body.haylivin-site.home .haylivin-home-content .product-card__details h3,
  body.haylivin-site.home .haylivin-home-content .home-product-dynamic-widget .product-card__details h3 {
    font-size: 0.9375rem;
    line-height: 1.3;
  }

  body.haylivin-site.haylivin-editorial-page .page-hero h1 {
    font-size: clamp(2rem, 9vw, 2.25rem);
    line-height: 1.1;
  }

  body.haylivin-site.haylivin-editorial-page .page-copy h2,
  body.haylivin-site.haylivin-editorial-page .section-intro h2,
  body.haylivin-site.haylivin-editorial-page .split-story h2,
  body.haylivin-site.haylivin-editorial-page .contact-intro h2,
  body.haylivin-site.haylivin-editorial-page .contact-details-panel h2,
  body.haylivin-site.haylivin-editorial-page .hours-panel h2,
  body.haylivin-site.haylivin-editorial-page .map-layout h2,
  body.haylivin-site.haylivin-editorial-page .page-cta h2 {
    font-size: clamp(1.625rem, 7vw, 1.875rem);
    line-height: 1.18;
  }

  body.haylivin-site.haylivin-editorial-page .principle-card h3,
  body.haylivin-site.haylivin-editorial-page .lifestyle-story__content h3 {
    font-size: 1.25rem;
    line-height: 1.24;
  }

  body.haylivin-site.haylivin-editorial-page .faq-item h3 {
    font-size: 1rem;
    line-height: 1.3;
  }

  body.haylivin-site.haylivin-shop-archive .haylivin-shop-header h1 {
    font-size: clamp(2rem, 9vw, 2.25rem);
    line-height: 1.1;
  }

  body.haylivin-site.haylivin-shop-archive .haylivin-shop-filter-group legend,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-filter__option,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-filter-toggle {
    font-size: 0.8125rem;
  }

  body.haylivin-site.haylivin-shop-archive .haylivin-shop-filter-group__note,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-filter__price-fields,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-filter__price-fields input,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-controls,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-controls .orderby {
    font-size: 0.75rem;
  }

  body.haylivin-site.haylivin-shop-archive .haylivin-shop-card .woocommerce-loop-product__title {
    font-size: 0.9375rem;
    line-height: 1.3;
  }

  body.haylivin-site.haylivin-shop-archive .haylivin-shop-card__meta,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-card__sku,
  body.haylivin-site.haylivin-shop-archive .haylivin-shop-card .price {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  body.haylivin-site.haylivin-woocommerce-product .summary .product_title {
    font-size: clamp(1.75rem, 8.5vw, 2rem);
    line-height: 1.12;
  }

  body.haylivin-site.haylivin-woocommerce-product .summary p.price,
  body.haylivin-site.haylivin-woocommerce-product .summary span.price {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  body.haylivin-site.haylivin-woocommerce-product .summary .variations,
  body.haylivin-site.haylivin-woocommerce-product .summary .variations label,
  body.haylivin-site.haylivin-woocommerce-product .summary .quantity,
  body.haylivin-site.haylivin-woocommerce-product .summary .single_add_to_cart_button,
  body.haylivin-site.haylivin-woocommerce-product .summary .haylivin-buy-now-button {
    font-size: 0.875rem;
  }

  body.haylivin-site.haylivin-woocommerce-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
  body.haylivin-site.haylivin-woocommerce-product .haylivin-product-related__header h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  body.haylivin-site.woocommerce-cart h1,
  body.haylivin-site.woocommerce-checkout h1,
  body.haylivin-site.woocommerce-cart .entry-title,
  body.haylivin-site.woocommerce-checkout .entry-title {
    font-size: 2rem;
    line-height: 1.1;
  }

  body.haylivin-site.woocommerce-cart h2,
  body.haylivin-site.woocommerce-checkout h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  body.haylivin-site .haylivin-global-footer .footer-newsletter h2 {
    font-size: 1.125rem;
    line-height: 1.25;
  }

  body.haylivin-site .haylivin-global-footer .footer-link-group h2,
  body.haylivin-site .haylivin-global-footer .haylivin-footer-menu h2 {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  body.haylivin-site .haylivin-global-footer .footer-link-group a,
  body.haylivin-site .haylivin-global-footer .footer-menu a,
  body.haylivin-site .haylivin-global-footer .store-details,
  body.haylivin-site .haylivin-global-footer .footer-bottom {
    font-size: 0.8125rem;
    line-height: 1.45;
  }
}