/* 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: #ff6b00;
  --v3-cta-text-color: #fff;
  --v3-cta-passive-color: #f6f6f6;
  --v3-cta-passive-text-color: #767676;
  --v3-benefitbar-bg-color: #f4f4f4;
  --v3-benefitbar-color: #f6f6f6;
  --v3-text-color: #767676;
  --v3-text-color-dark: #4d4d4d;
  --v3-divider-color: #ddd;
  --v3-promo-color: #4E8028;

  --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(54%) sepia(0%) saturate(0%) hue-rotate(117deg) brightness(90%) contrast(89%);
  --filter-v3-trustbar: brightness(0) saturate(100%) invert(70%) sepia(1%) saturate(1157%) hue-rotate(80deg) brightness(103%) contrast(88%);
}

@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: 16px;
  line-height: 1.5;
}

body {
  font-family: var(--v3-font-family);

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

p {
  text-wrap: balance;
  font-size: inherit;
  line-height: inherit;
  &:not(.info-text p, #footer p) {
    max-width: 768px;
  }
}
.t-center p {
  margin-inline: auto;
}

hr {
  border: 0;

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

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

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

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

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

  &.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-top: 50px;
    margin-bottom: 50px;
  }

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

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

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

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

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

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

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

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

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

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

img {
  vertical-align: top;
}

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

h2 {
  color: inherit;
  font-size: 2.3rem;
  line-height: 2.8rem;
  font-weight: normal;
  text-wrap: balance;

  @media (width <=768px) {
    & {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }
}

h2:has(+ p) {
  margin-bottom: 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: 0.5rem;
    white-space: nowrap;
    text-decoration: none !important;

    background-color: var(--v3-cta-color);
    color: var(--v3-cta-text-color);
    padding: 1rem;
    font-size: 1.1rem;
    line-height: 1rem;
    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: 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: 2rem;
        margin: 0 auto;
        display: block;
        background-color: #fff;
      }

      &.btn-large {
        font-size: 1.5rem;
        line-height: 1rem;

        &::after {
          height: 1.8rem;
        }
      }

    }

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

  }
}

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