/* config */

:root {
  --v3-primary-color: #82b338;
  --v3-secondary-color: #4e8028;
  --v3-secondary-color-hover: #457123;
  --v3-highlight-color: #00b4ff;
  --v3-cta-color: #ff9b00;
  --v3-cta-color-hover: #ff6b00;
  --v3-cta-text-color: #fff;
  --v3-cta-passive-color: #f2f2f2;
  --v3-cta-passive-text-color: #7b7b7b;
  --v3-benefitbar-bg-color: #f4f4f4;
  --v3-benefitbar-color: #a0a0a0;
  --v3-text-color: #7b7b7b;
  --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;
}

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

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

p {
  text-wrap: balance;
  font-size: inherit;
  line-height: 1.5rem;
}

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

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

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;
    }
  }
}

h3:not(.accordion h3, .info-text h3, .info-text-v2 h3, .accordion-new h3) {
  font-size: 1.8rem;
  line-height: 2.1rem;
}

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

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

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



/* header */

#site-header {
  background-color: #fff;
  border-bottom: 1px solid #ddd;

  >.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: 41px;
  }

  @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 #ddd;

          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: #ddd;
        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;
    }
  }

}


/* 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.3rem;
    }

    strong {
      font-weight: 600;
    }

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

      >p {
        color: #ddd;
        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: 2rem;
        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: #ddd;
    }
  }

  .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 {
  line-height: 1.5rem;
}