/* Naturesbest brand specific styles */

:root {
  --buttons-radius: 2.3rem;
  --color-button-text: var(--color-base-background);
  --color-brand-copper: 173, 83, 39;
  --color-brand-darkgreen: 17, 69, 51;
  --color-button-disabled: 170, 170, 170;
  --color-sale: var(--color-brand-copper);
  --input-focus-border: var(--color-black);

  --text-size-mobile-5xl: 3rem;
  --text-size-mobile-4xl: 2.6rem;
  --text-size-mobile-3xl: 2.8rem;
  --text-size-mobile-2xl: 2.6rem;
  --text-size-mobile-xl: 2.2rem;
  --text-size-mobile-lg: 1.6rem;
  --text-size-mobile-base: 1.4rem;
  --text-size-mobile-s: 1.2rem;
  --text-size-mobile-xs: 1.1rem;
  --text-size-mobile-xxs: 1rem;
  --text-size-body: 1.8rem;

  --text-size-mini-label: 1.6rem;

  --color-brand-primary-extra-light: 225, 240, 231;
  --color-brand-primary-light: 159, 208, 178;
  --color-brand-primary-normal: 4, 101, 72;
  --color-brand-darkblue: 17, 69, 51;
}

.brand-natures-best {
  /* Custom Naturesbest styles*/

  .button,
  .shopify-challenge__button,
  .customer button {
    font-family: var(--font-body-family);
    font-size: var(--text-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--buttons-radius);
    padding: 0 var(--space-19);
    transition: all var(--duration-medium) ease-in-out;
    max-width: unset;
    min-width: unset;

    &.button--tertiary {
      --color-button: var(--color-base-background);
      --color-button-text: var(--color-base-brand-primary);
    }

    &.button--outline.outline-white {
      --color-button: transparent;
      backdrop-filter: blur(0.1rem);
      --color-button-text: var(--color-white);
      --color-button-border-color: var(--color-white);
      --alpha-button-background: 1;
      --buttons-border-opacity: 1;
    }

    @media (min-width: 750px) {
      &.button--link {
        padding: 0;
        background: transparent;
      }

      &.button--secondary {
        --color-button-text: var(--color-base-brand-primary);
        --color-button: var(--color-base-light);
        --alpha-button-background: 1;
        --buttons-border-opacity: 0;
      }

      &.button--tertiary {
        --color-button: var(--color-base-background);
        --color-button-text: var(--color-base-brand-primary);
      }

      &.button--outline {
        --color-button: transparent;
        backdrop-filter: blur(0.1rem);
        --color-button-text: var(--color-base-brand-primary);
        --color-button-border-color: var(--color-base-brand-primary);
        --alpha-button-background: 1;
        --buttons-border-opacity: 1;
      }

      &.button--outline.outline-white {
        --color-button: transparent;
        backdrop-filter: blur(0.1rem);
        --color-button-text: var(--color-white);
        --color-button-border-color: var(--color-white);
        --alpha-button-background: 1;
        --buttons-border-opacity: 1;
      }

      &.disabled:not(.button--outline),
      &[disabled]:not(.button--outline),
      &[aria-disabled="true"]:not(.button--outline) {
        --color-button: var(--color-button-disabled);
        --color-button-text: var(--color-base-background);
        --color-button-border-color: var(--color-button-disabled);
        --alpha-button-background: 1;
        opacity: 1;
        background-color: rgba(var(--color-button), var(--alpha-button-background));
      }

      &.disabled.button--outline,
      &[disabled].button--outline,
      &[aria-disabled="true"].button--outline {
        --color-button: transparent;
        --color-button-text: var(--color-button-disabled);
        --color-button-border-color: var(--color-button-disabled);
        --alpha-button-background: 1;
        opacity: 1;
        background-color: rgba(var(--color-button), var(--alpha-button-background));
      }

      &.disabled.button--link,
      &[disabled].button--link,
      &[aria-disabled="true"].button--link {
        background: transparent;
        cursor: not-allowed;
        opacity: 0.5;
      }
    }
  }

  @media (max-width: 749px) {
    .btn-mob.button--mobile {
      --color-button-text: var(--color-white) !important;
      --color-button: var(--color-base-brand-primary) !important;
      --color-base-solid-button-labels: var(--color-white) !important;
    }

    .btn-mob.button--mobile--secondary {
      --color-button-text: var(--color-white) !important;
      --color-button: var(--color-base-brand-secondary) !important;
      --color-base-solid-button-labels: var(--color-white) !important;
    }

    .btn-mob.button--mobile--tertiary {
      --color-button: var(--color-base-background) !important;
      --color-button-text: var(--color-base-brand-primary) !important;
      --color-base-solid-button-labels: var(--color-base-brand-primary) !important;
    }

    .btn-mob.button--mobile--outline {
      --color-button: transparent;
      --color-button-text: var(--color-base-brand-primary) !important;
      --alpha-button-background: 1;
      --buttons-border-opacity: 1;
      --color-button-border-color: var(--color-base-brand-primary) !important;
    }

    .btn-mob.button--mobile--white {
      --color-button: var(--color-white) !important;
      --color-button-text: var(--color-base-brand-primary) !important;
    }
  }

  .button:not([disabled]):not(.disabled):not([aria-disabled="true"]):hover,
  .shopify-challenge__button:hover,
  .customer button:hover,
  .shopify-payment-button__button--unbranded:hover {
    --color-button-text: var(--color-base-background);
    --color-button: var(--color-base-brand-secondary);

    &.button--outline {
      --color-button: var(--color-base-brand-primary);
      --color-button-text: var(--color-white);
      --buttons-border-opacity: 1;
    }
    &.button--outline.outline-white {
      --color-button: var(--color-white);
      --color-button-text: var(--color-base-brand-primary);
      --buttons-border-opacity: 1;
    }
  }

  /* Custom Newsletter styles*/
  .newsletter-form .field.input-with-button .field__input {
    border-radius: var(--buttons-radius);
  }

  .newsletter__inner .newsletter__left .h2 {
    font-family: var(--font-body-family);
  }

  @media screen and (max-width: 990px) {
    .newsletter__inner .newsletter__left .h2 {
      font-size: var(--text-size-2xl);
    }

    .newsletter__inner .newsletter__left .footer-block__details-content {
      font-family: var(--font-body-family);
      font-size: var(--text-size-lg);
    }
  }

  .newsletter__inner .newsletter__left .footer-block__details-content p {
    font-weight: var(--font-weight-regular);
  }

  /* Custom Product Card styles */
  .product-card-wrapper,
  .price-per-unit {
    --product-card-title-weight: var(--font-weight-medium);
    --product-card-price-size: var(--text-size-base);
    --product-card-price-weight: var(--font-weight-bolder);
    --product-card-from-text-size: var(--text-size-base);
    --product-card-from-text-weight: var(--font-weight-regular);
    --product-card-unit-size: var(--text-size-xs);
    --product-card-unit-weight: var(--font-weight-normal);
  }

  .card__badge .badge {
    width: 6.9rem;
    height: 6.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    @media screen and (max-width: 990px) {
      width: 5.2rem;
      height: 5.2rem;
    }
  }

  @media screen and (min-width: 1201px) {
    .product__media-wrapper-inner .card__badge .badge {
      width: 8.2rem;
      height: 8.2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0.6rem;
    }
  }

  .card__badge.sale .badge {
    padding: var(--space-1);
  }

  .card__badge.sale .badge span {
    font-family: var(--font-heading-family);
    font-size: var(--text-size-2xl);
    font-weight: var(--font-weight-bolder);
    padding: 0;
  }

  .card__badge span {
    position: relative;
    background: none;
    z-index: 2;
  }

  .badge__wrapper:not(.title-badges) {
    .card__badge .badge::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: var(--color-badge-background);
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 69'><path d='M31.2078 0.479719C21.3353 1.97172 0.48598 13.2733 0.0119131 32.0094C-0.423611 49.2418 11.1448 61.495 24.4687 66.2569C39.1455 71.5043 50.7544 67.8702 54.9843 66.4135C61.0836 64.3126 66.7319 59.1787 70.4204 54.826C74.4057 50.1249 79.7244 42.8685 81.085 36.8046C82.4841 30.5703 82.4975 24.5827 79.5799 18.9261C75.6371 11.282 70.7827 9.21045 62.8315 5.94842C54.8822 2.68443 43.7455 -1.41367 31.2078 0.479719Z'/></svg>")
        center / contain no-repeat;
      z-index: -1;
    }
  }

  .card__badge.sold-out .badge::after {
    opacity: 0.7;
  }

  /* Custom Footer styles*/
  .footer__logo-text {
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-regular);
  }

  .footer__list-social .list-social__item {
    border-radius: var(--space-2);
  }

  .facets-container {
    --facets-button-size: var(--text-size-base);
    --facets-sort-label-weight: var(--font-weight-medium);
    --facets-filter-buttons-height: 4.4rem;
    --facets-product-count-mobile-weight: var(--font-weight-medium);
  }

  .facets__form .sorting .facet-filters__field,
  .facets-container .mobile-facets__sort .select,
  .mobile-facets__open {
    border-radius: 10rem;
    padding: 0 var(--space-12);
  }

  .pagination-wrapper {
    --pagination-item-weight: var(--font-weight-medium);
    --pagination-count-size: var(--text-size-lg);
  }

  .feature-cta {
    --button-font-size: var(--text-size-base);
    --button-font-weight: var(--font-weight-regular);
  }

  /* filter menu variables */
  --filters-filter-name-size: var(--text-size-2xl);
  --filters-filter-name-weight: var(--font-weight-medium);
  --filters-show-more-size: var(--text-size-xs);

  @media (max-width: 749px) {
    .image-banner--mobile-show-container .image-banner__content {
      border-radius: 0.5rem;
    }
    .image-banner--mobile-show-container .image-banner__content .image-banner__content {
      border-radius: none;
    }
  }

  @media (min-width: 750px) {
    .image-banner--desktop-show-container .image-banner__content {
      border-radius: 0.5rem;
    }

    .image-banner--desktop-show-container .image-banner__content .image-banner__content {
      border-radius: none;
    }
  }

  @media screen and (min-width: 751px) and (max-width: 989px) {
    .image-banner--tablet-show-container .image-banner__content {
      border-radius: 0.5rem;
    }

    .image-banner--tablet-show-container .image-banner__content .image-banner__content {
      border-radius: none;
    }
  }

  .image-with-text__content .ol-li {
    &::before {
      width: 3.6rem;
      height: 2.9rem;
      /* top: 50%;
      transform: translateY(-50%); */
      top: 0;
      left: 0;
      background-color: transparent;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIyOSIgdmlld0JveD0iMCAwIDM2IDI5IiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTEzLjcwMSAwLjIwMTYxOEM5LjM2NjcgMC44Mjg2ODkgMC4yMTMzNTcgNS41Nzg2MyAwLjAwNTIzMDE2IDEzLjQ1MzJDLTAuMTg1OTc2IDIwLjY5NTggNC44OTI4MiAyNS44NDU3IDEwLjc0MjQgMjcuODQ3MUMxNy4xODU4IDMwLjA1MjUgMjIuMjgyNCAyOC41MjUyIDI0LjEzOTUgMjcuOTEyOUMyNi44MTcyIDI3LjAyOTkgMjkuMjk3IDI0Ljg3MjIgMzAuOTE2MyAyMy4wNDI4QzMyLjY2NTkgMjEuMDY3IDM1LjAwMSAxOC4wMTcyIDM1LjU5ODMgMTUuNDY4NkMzNi4yMTI1IDEyLjg0ODQgMzYuMjE4NCAxMC4zMzE5IDM0LjkzNzUgNy45NTQ0M0MzMy4yMDY1IDQuNzQxNzEgMzEuMDc1MyAzLjg3MTA2IDI3LjU4NDYgMi41MDAwNkMyNC4wOTQ2IDEuMTI4MjMgMTkuMjA1MyAtMC41OTQxNTQgMTMuNzAxIDAuMjAxNjE4WiIgZmlsbD0iIzA0NjU0OCIvPg0KPC9zdmc+);
    }
  }

  .faq__inner {
    border-radius: 1rem;
  }
}