/* vars */
:root {
  --v3-primary-color: #82B338;
  --v3-secondary-color: #4E8028;
  --v3-secondary-color-hover: #4E8028;
  --v3-highlight-color: #00b4ff;
  --v3-cta-color: #f49919;
  --v3-cta-color-hover: color-mix(in srgb, var(--v3-cta-color) 90%, white);
  --v3-cta-text-color: #fff;
  --v3-cta-passive-color: #f6f6f6;
  --v3-cta-passive-text-color: #767676;
  --v3-benefitbar-bg-color: #f6f6f6;
  --v3-text-color: #767676;
  --v3-text-color-dark: #4d4d4d;
  --v3-divider-color: #ddd;
  --v3-promo-color: #4E8028;

  --v4-neutral-color-1: #4d4d4d;
  --v4-neutral-color-2: #767676;
  --v4-neutral-color-3: #ddd;
  --v4-neutral-color-4: #f6f6f6;

  --v3-container-max-w: 1200px;
  --v3-container-min-w: 340px;
  --v3-font-family: 'Open Sans New', serif;
  --v3-vw-tablet: 550px;
  --v3-vw-desktop: 960px;
  --v3-border-radius-box: 10px;

  --filter-v3-text-color: brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(373%) hue-rotate(174deg) brightness(81%) contrast(83%);
}

@font-face {
  font-family: 'Open Sans New';
  src: url('https://xxlpix-all.b-cdn.net/fonts/opensans-variable.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'playfair';
  src: url('https://xxlpix-all.b-cdn.net/fonts/playfair-variable.woff2') format('woff2');
  font-display: swap;
}

html {
  font-size: min(18px, 1vw);
  line-height: 1.5;
}

body {
  font-family: var(--v3-font-family);
  font-size: max(1rem, 18px);
  line-height: 1.5;

  @media (width <=768px) {
    & {
      font-size: max(0.8rem, 16px);
    }
  }

  *~p:last-child {
    margin-bottom: 0;
  }
}

p {
  font-size: inherit;
  line-height: inherit;

  &:not(.info-text p, #footer p) {
    max-width: 768px;
  }

  &:is(.t-center p) {
    margin-inline: auto;
  }
}



.t-center p {
  margin-inline: auto;
}

hr {
  border: 0;

  &.divider {
    border-top: 1px solid var(--divider-color);
  }

  &.size-5 {
    margin-block: max(5px, 0.3rem);
  }

  &.size-10 {
    margin-block: max(10px, 0.5rem);
  }

  &.size-15 {
    margin-block: max(10px, 0.83rem);
  }

  &.size-20 {
    margin-block: max(15px, 1.1rem);
  }

  &.size-25 {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  &.size-30 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  &.size-35 {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  &.size-40 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  &.size-45 {
    margin-top: 45px;
    margin-bottom: 45px;
  }

  &.size-50 {
    margin-block: max(30px, 2.8rem);
  }

  &.size-55 {
    margin-block: max(30px, 3rem);
  }

  &.size-60 {
    margin-block: max(35px, 3.3rem);
  }

  &.size-65 {
    margin-block: max(35px, 3.6rem);
  }

  &.size-70 {
    margin-block: max(40px, 3.9rem);
  }

  &.size-75 {
    margin-block: max(40px, 4.1rem);
  }

  &.size-80 {
    margin-block: max(45px, 4.4rem);
  }

  &.size-85 {
    margin-block: max(45px, 4.7rem);
  }

  &.size-90 {
    margin-block: max(50px, 5rem);
  }

  &.size-95 {
    margin-block: max(50px, 5.3rem);
  }

  &.size-100 {
    margin-block: max(55px, 5.6rem);
  }
}

img {
  vertical-align: top;
}

.wrap-full-grid {
  width: clamp(340px, calc(100% - 1rem), 1200px);
}

.entry-content ul {
  li {
    margin-top: 10px;
  }
}

h1 {
  color: var(--v3-text-color);
  font-size: max(28px, 2.25rem);
}

h2 {
  color: var(--v3-text-color);
  font-size: max(26px, 2rem);
  line-height: 1.3;
  font-weight: normal;
  text-wrap: balance;
}
h3 {
  font-size: max(18px, 1.3rem);
  font-weight: 500;
}

h2:has(+ p) {
  margin-bottom: max(15px, 1rem);
}

.col-2 {
  column-count: 2;
  column-gap: 2rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.hide-mobile {
  @media (width <=768px) {
    & {
      display: none;
    }
  }
}

.hide-desktop {
  @media (width >768px) {
    & {
      display: none;
    }
  }
}

#page {
  .btn {
    all: unset;
    cursor: pointer;
  }

  .btn {
    border-radius: var(--v3-border-radius-box);
    display: inline-flex;
    align-items: center;
    gap: max(5px, 0.5rem);
    white-space: nowrap;
    text-decoration: none !important;

    background-color: var(--v3-cta-color);
    color: var(--v3-cta-text-color);
    padding: max(10px, 1rem);
    font-size: max(18px, 1.1rem);
    line-height: 1;
    font-family: var(--v3-font-family);
    font-weight: 700;

    &.passive {
      background-color: var(--v3-cta-passive-color);
      color: var(--v3-cta-passive-text-color);

      &.ghost {
        background: transparent;
        outline: 1px solid var(--v3-cta-passive-text-color);
        color: var(--v3-cta-passive-text-color) !important;
      }
    }

    &.js-upload-btn {
      padding-block: max(5px, 0.5rem);

      &::after {
        content: "";
        mask: url('https://xxlpix-all.b-cdn.net/icons-huge/arrow-up-02.svg') no-repeat center / contain;
        aspect-ratio: 1;
        height: 1.8em;
        margin: 0 auto;
        display: block;
        background-color: #fff;
      }

      &.btn-large {
        font-size: max(16px, 1.3rem);
        line-height: 1;
      }

    }

    span[class*="icon-"] {
      display: none;
    }

  }
}

/* hide components */
print-size-preview-selector,
light-switch {
  visibility: hidden;
}