@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

      :root{
        --kk-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        --kk-font-head: "Playfair Display", Georgia, "Times New Roman", serif;

        --kk-text: #111;
        --kk-text-muted: #6b6b6b;

        --kk-h1: 34px;
        --kk-h2: 28px;
        --kk-h3: 22px;
        --kk-body: 16px;
        --kk-small: 14px;

        --kk-lh-head: 1.15;
        --kk-lh-body: 1.45;
      }

      @media (max-width: 720px){
        :root{
          --kk-h1: 28px;
          --kk-h2: 24px;
          --kk-h3: 20px;
          --kk-body: 16px;
        }
      }

      body,
      button,
      input,
      select,
      textarea{
        font-family: var(--kk-font-body);
        color: var(--kk-text);
      }

      body{
        font-size: var(--kk-body);
        line-height: var(--kk-lh-body);
      }

      h1,h2,h3,h4,h5,h6,
      .entry-title,
      .page-title,
      .wp-block-post-title,
      .woocommerce-products-header__title,
      .product_title,
      .woocommerce-loop-product__title,
      .elementor-heading-title,
      [data-kk-heading="1"],
      [data-kk-heading="2"],
      [data-kk-heading="3"],
      .kk-heading{
        font-family: var(--kk-font-head);
        line-height: var(--kk-lh-head);
        letter-spacing: .2px;
      }

      h1{ font-size: var(--kk-h1); font-weight: 800; }
      h2{ font-size: var(--kk-h2); font-weight: 800; }
      h3{ font-size: var(--kk-h3); font-weight: 700; }

      .promo-title,
      .banner-title,
      .hero-title,
      .kk-promo-title{
        font-family: var(--kk-font-head);
        line-height: var(--kk-lh-head);
      }

      input, select, textarea { font-size: 16px; }