/* config */

: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: #f4f4f4;
  --v3-benefitbar-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;
}

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

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

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

  &:not(.info-text p, #footer p, .tabify-wrapper p, .top-header p, .top-header-new p, .nav) {
    max-width: 768px;
  }
  &:is(.t-center p) {
    margin-inline: auto;
  }
}

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

a:not(.btn, #main-nav a) {
  text-decoration: underline;
  color: inherit;
}

.entry-content>h1:first-child,
h1.entry-title {
  color: var(--v3-text-color);
}

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

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

h3:not(.info-text h3, .info-text-v2 h3) {
  font-size: max(17px, 1.5rem);
  line-height: 1.5;
}

h4 {
  font-size: 1.4rem;
  line-height: 1.5;
}

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

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



/* header */

#site-header {
  background-color: #fff;
  border-bottom: 1px solid var(--v4-neutral-color-3);

  >.wrap {
    display: flex;
    flex-flow: row;
    gap: 0.6rem;
    align-items: center;
    max-width: var(--v3-container-max-w);
    margin-inline: auto;
    padding-block: 1rem;

    @media (width < 1200px) {
      & {
        padding-inline: 1rem;
      }
    }
  }
}

#logo {
  padding: 0.6rem;
  flex-grow: 1;

  img {
    height: 40px;
  }

  @media (width <=768px) {
    & {
      padding-inline: 0;

      img {
        max-width: 90%;
      }
    }
  }
}

.mobile-menu .icon {
  font-size: 24px;
}

@media (width >=1200px) {
  .mobile-menu {
    display: none;
  }
}


.top-nav {
  .close {
    display: none;
  }

  >ul {
    display: flex;
    flex-flow: row;
    align-content: center;
    gap: 1rem;

    >li {
      margin: 0;
      color: inherit;

      a {
        margin: 0;
        color: inherit;
      }
    }
  }
}

#page:has(#main-nav.active)::after {
  content: "";
  width: 100vw;
  height: 100vh;
  z-index: 999998;
  background: rgb(0, 0, 0, 0.5);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

#main-nav {
  @media (width < 1200px) {
    &:not(.active) {
      /*display: none;*/
      visibility: hidden;
      pointer-events: none;
    }

    &.active {
      left: 0;
    }

    & {
      position: fixed;
      top: 0;
      left: -100%;
      z-index: 999999;
      width: clamp(200px, 300px, 80%);
      height: 100%;
      background: #fff;
      padding: 1rem;
      transition: all 0.3s ease;

      .close {
        display: block;
        text-align: right;
        font-size: 2rem;
        margin-bottom: 1rem;
      }

      >ul {
        display: flex;
        flex-flow: column;
        gap: 0;

        li {
          border-top: 1px solid var(--v4-neutral-color-3);

          a {
            padding-block: 0.5rem;
            display: block;
            text-decoration: none;
          }
        }
      }
    }
  }
}

#meta-nav {
  ul {
    justify-content: right;
    gap: 1.5rem;
    padding: 0;
    display: flex;
    flex-flow: row;

    li {
      margin: 0;
      position: relative;

      &:not(:last-child)::after {
        background: var(--v4-neutral-color-3);
        content: "";
        height: 0.75rem;
        width: 2px;
        position: absolute;
        right: -0.8rem;
        top: 0.4rem;
      }

      a {
        &::before {
          aspect-ratio: 1;
          font-family: unset;
          content: "";
          width: 1.5em;
          display: inline-block;
          background-size: contain;
          background-repeat: no-repeat;
          background-color: #7b7b7b;
          margin: 0;
          vertical-align: top;
        }
      }

      &:nth-child(1) a::before {
        mask: url("https://xxlpix-all.b-cdn.net/icons-huge/delivery-truck.svg") no-repeat center / contain;
      }

      &:nth-child(2) a::before {
        mask: url("https://xxlpix-all.b-cdn.net/icons-huge/chatting.svg") no-repeat center / contain;
      }

      &:nth-child(3) a::before {
        mask: url("https://xxlpix-all.b-cdn.net/icons-huge/shopping-cart-02.svg") no-repeat center / contain;
      }
    }

    .js-count-cart {
      font-size: 12px;
      line-height: 20px;
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      background: #e13333;
      color: #fff;
      text-align: center;
      font-weight: bold;
      border-radius: 100%;
    }

    .js-count-cart:empty {
      display: none;
    }

    span:not(.js-count-cart) {
      display: none;
    }
  }
}

@media (width > 960px) {
  & {
    width: fit-content;
  }
}


#page .promotion-header {
  padding: 10px 0 12px 0;
  background-color: var(--v3-promo-color);
}


/* content */

#content:has(.top-header-new) {
  margin-top: 0;
}

benefit-bar {
  display: block;
  margin-bottom: 7rem;

  @media (width <=1200px) {
    & {
      z-index: -1;
      margin-bottom: 7rem;
    }
  }

}

.upload-tester .headline {
  line-height: 1.5;
}

.trustbar-new {
  img {
    filter: var(--filter-v3-text-color);
  }
}

#page .top-header + .trustbar-new {
  margin-top: 0;
}
#page .trustbar-new.mode-header .item img {
  height: max(25px, 1.8rem);
}

@media (max-width: 768px) {
  #page .trustbar-new.mode-header .wrap {
    flex-flow: row;
    gap: max(1rem, 10px);
    padding: max(1rem, 10px);

    .item {
      margin: 0;


    }
  }
}

/* footer */

#content:has(.info-text)~#footer {
  margin-top: 0;
}

.entry-footer {
  display: none;
}

#footer {
  padding: 1rem;
  margin-top: 140px;

  >div {
    max-width: var(--v3-container-max-w);
    margin-inline: auto;

    >section:not(:first-child) {
      border-top: 1px solid #888;
    }

    >section {
      padding-block: 1.5rem;
      display: flex;
      flex-flow: row;
      gap: 2rem;
      justify-content: center;

      &:nth-child(2) {
        >div {
          width: 50%;

          &:last-child {
            width: 100%;
            flex-grow: 1;
          }

          @media (width <=768px) {
            &:last-child {
              display: none;
            }
          }
        }

        p {
          font-size: 0.9rem;
        }

      }

      &:nth-child(3) {
        >div {
          width: 50%;
        }
      }
    }

    p {
      font-size: 1rem;
      line-height: 1.5;
    }

    strong {
      font-weight: 600;
    }

    .trustbar-payment {
      background-color: transparent !important;
      padding: 0;
      margin: 0 !important;

      >p {
        color: var(--v4-neutral-color-3);
        margin: 0;
      }
    }

    .trustbar-new {
      background-color: transparent !important;
      z-index: 0;
      margin: 0;
      position: static;
      max-width: 100%;
      overflow: auto;

      >.wrap {
        display: flex;
        justify-content: center;
        gap: max(10px, 2rem);
        flex-flow: wrap;
        max-width: none;
        margin: 0;

        @media (width <=768px) {
          & {
            gap: 1rem;
          }
        }

        img {
          filter: brightness(3) saturate(0%);
          opacity: 0.9;
          height: 40px;
          margin: 0;

          @media (width <=768px) {
            & {
              height: 25px;
            }
          }
        }
      }
    }

  }

  .social-icons {
    [class*=icon]::before {
      all: unset;
    }

    [class*=icon]::after {
      content: "";
      aspect-ratio: 1;
      height: 48px;
      margin: 0 auto;
      display: block;
      background-color: var(--v4-neutral-color-3);
    }
  }

  .social-icons .icon-facebook::after {
    mask: url('https://xxlpix-all.b-cdn.net/icons-huge/facebook-01.svg') no-repeat center / contain;
  }

  .social-icons .icon-twitter::after {
    mask: url('https://xxlpix-all.b-cdn.net/icons-huge/new-twitter.svg') no-repeat center / contain;
  }

  .social-icons .icon-pinterest::after {
    mask: url('https://xxlpix-all.b-cdn.net/icons-huge/pinterest.svg') no-repeat center / contain;
  }

}

.info-text,
.info-text-v2 {
  h2 {
    text-align: center;
  }

  h3 {
    font-size: 1.3em;
    color: inherit;
    font-family: inherit;
    font-weight: 600;

    &:first-of-type {
      margin-top: 0;
    }
  }
}

.top-header .subheadline,
.top-header-new .subheadline {
  line-height: 1.5;
}

#page .top-header,
#page .top-header-new {
  margin-top: 0;
}

.top-header:has(+ benefit-bar),
.top-header-new:has(+ benefit-bar) {
  margin-bottom: 0;
}

#page .top-header-new,
#page .top-header {
  .ratingbox-new {
    background: #fff !important;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: -4px 4px 4px 0px rgba(0, 0, 0, 0.1);

    >a {
      text-decoration: none;
    }

    div:nth-child(1) {
      background-color: #e7e7e7;
    }

    div:nth-child(2) {
      margin-top: 7px;

      &::before {
        display: block;
        content: "";
        background:
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="%23ffc000"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>') 0px 0px no-repeat,
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="%23ffc000"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>') 25px 0px no-repeat,
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="%23ffc000"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>') 50px 0px no-repeat,
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="%23ffc000"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>') 75px 0px no-repeat,
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="%23ffc000"><path d="M309.5 13.5C305.5 5.2 297.1 0 287.9 0s-17.6 5.2-21.6 13.5L197.7 154.8 44.5 177.5c-9 1.3-16.5 7.6-19.3 16.3s-.5 18.1 5.9 24.5L142.2 328.4 116 483.9c-1.5 9 2.2 18.1 9.7 23.5s17.3 6 25.3 1.7l137-73.2 137 73.2c8.1 4.3 17.9 3.7 25.3-1.7s11.2-14.5 9.7-23.5L433.6 328.4 544.8 218.2c6.5-6.4 8.7-15.9 5.9-24.5s-10.3-14.9-19.3-16.3L378.1 154.8 309.5 13.5zM288 384.7l0-305.6 52.5 108.1c3.5 7.1 10.2 12.1 18.1 13.3l118.3 17.5L391 303c-5.5 5.5-8.1 13.3-6.8 21l20.2 119.6L299.2 387.5c-3.5-1.9-7.4-2.8-11.2-2.8z"/></svg>') 100px 0px no-repeat;
        width: 100%;
        height: 20px;
        margin-left: 13px;
        margin-bottom: 4px;
      }
    }
  }
}

.col {
  line-height: 1.5;
}

ul.accordion {
  max-width: 768px;
  margin-inline: auto;

  h3 {
    padding-right: 1em;
  }
}

/* color fixes */
.three-steps ul li {
  color: var(--v3-text-color);
}