subscription-popup.subscription-popup {
  --font-heading-family: "Poppins";

  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 18px;
  font-family: Poppins, var(--font-body-family);
  background: #6B6967;

  &.active {
    display: flex;
  }

  & .subscription-popup__announcement-bar {
    position: relative;
    top: 10px;
    z-index: 2;

    width: min(100%, 540px);
    padding: 8px 10px 18px;

    border-radius: 22px 22px 0 0;
    background: #584576;
    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-align: center;
  }

  & .subscription-popup__content {
    position: relative;
    z-index: 3;
    width: min(100%, 540px);
    max-height: min(92vh, 786px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 10px 25px 0 rgba(0, 0, 0, 0.15);

    & .subscription-popup__close {
      position: sticky;
      top: 0;
      left: calc(100% - 36px);
      transform: translate(15px, -15px);

      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 50%;
      background: #F5F0EB;
      color: #1D2C4C;
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
      margin-left: auto;
    }

    & .subscription-popup__header { 
      margin-top: -36px;

      & h3 {
        margin: 0 0 6px;
        padding: 0 20px;
        color: #2C2926;
        font-family: var(--font-heading-family);
        font-size: 32px;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: 120%;
        text-align: center;

        & strong {
          color: var(--color-red-text, #d6121a);
          font-weight: 600;
        }
      }

      & .subscription-popup__subtitle {
        padding: 0 20px;

        color: #2C2926;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 130%;
        letter-spacing: -0.5px;
        text-align: center;

        & p {
          margin: 0;
        }
      }

      .subscription-popup__timer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;

        &:has(.subscription-popup__counter.counter--expired) {
          display: none;
        }

        & .subscription-popup__timer-text {
          margin: 0;
          color: var(--color-red-text, #d6121a);
          font-size: 16px;
          font-weight: 600;
          line-height: 120%;
          text-transform: uppercase;
          letter-spacing: -0.3px;

          & p {
            margin: 0;
          }
        }

        reverse-counter.subscription-popup__counter {
          display: flex;
          align-items: center;
          gap: 11px;

          & .reverse-counter__time-block {
            display: flex;
            align-items: center;
            gap: 2px;
            min-height: 30px;


            border-radius: 6px;
            background: #2c2926;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            line-height: 100%;
            padding: 5px 7px;

            flex-direction: row;

            &.separator::after {
              content: ":";
              margin-left: 0;
              right: -8px;
              color: #2C2926;
            }

            & .time-block__unit {
              text-transform: lowercase;
              font-size: 15px;
              font-weight: 600;
              line-height: 100%;
            }
          }
        }
      }
    }

    & .subscription-popup__body {
      display: grid;
      gap: 16px;
      margin: 30px 0 0;

      & .subscription-popup__offer-card {
        border: 1px solid rgba(88, 69, 118, 0.20);
        border-radius: 16px;
        background: rgba(88, 69, 118, 0.08);
        padding: 16px 20px;

        & .subscription-popup__offer-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          margin-bottom: 12px;

          & .subscription-popup__offer-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #101828;
            font-size: 19px;
            font-weight: 600;
            line-height: 150%;
            letter-spacing: -0.5px;

            & strong {
              font-weight: 600;
            }

            & .subscription-popup__save-badge {
              display: inline-flex;
              align-items: center;
              min-height: 30px;
              border-radius: 7px;
              background: #d6121a;
              color: #fff;
              font-size: 17px;
              font-weight: 600;
              line-height: 150%;
              letter-spacing: -0.5px;
              padding: 0 10px;
              text-transform: uppercase;

              & strong {
                font-weight: 600;
              }
            }
          }

          & .subscription-popup__offer-price {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--color-red-text, #d6121a);
            font-size: 28px;
            font-weight: 600;
            line-height: 100%;
            letter-spacing: -1px;
            
            & del {
              color: #6E6A67;
              font-size: 20px;
              font-weight: 600;
              line-height: 100%;
            }
          }
        }

        & .subscription-popup__savings {
          border-radius: 10px;
          background: #FFF2CA;
          color: #2C2926;
          font-size: 16px;
          font-weight: 700;
          line-height: normal;
          margin-bottom: 12px;
          padding: 10px;
          text-align: center;

          & .title strong {
            color: var(--color-red-text, #d6121a);
            font-weight: 700;
          }

          & .subtitle {
            color: #645243;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.3px;
          }
        }

        & .subscription-popup__frequency {
          margin-bottom: 12px;

          & .subscription-popup__frequncy-label {
            margin: 0 0 12px;
            color: #100F0F;
            font-size: 14px;
            font-weight: 600;
            line-height: normal;
          }

          & .subscription-popup__frequency-buttons {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;

            & .subscription-popup__frequency-button {
              position: relative;
              min-height: 56px;
              border: 1px solid rgba(0, 0, 0, 0.16);
              border-radius: 10px;
              background: #fff;
              color: #100F0F;
              cursor: pointer;
              font: inherit;
              font-size: 13px;
              font-weight: 400;
              line-height: normal;
              padding: 10px;

              transition: all .2s ease;

              &.active {
                border-color: #584576;
                background: rgba(88, 69, 118, 0.10);
                box-shadow: inset 0 0 0 1px #584576;

                &:before {
                  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23584576'/%3E%3Cg clip-path='url(%23clip0_18474_11205)'%3E%3Cpath d='M10.5206 5.25439L11.4275 6.16124L7.18549 10.4032L4.57031 7.78809L5.47713 6.88124L7.18549 8.58954L10.5206 5.25439Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_18474_11205'%3E%3Crect width='6.85714' height='6.85714' fill='white' transform='translate(4.57031 4.40039)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
                  display: block;
                  width: 16px;
                  height: 16px;

                  position: absolute;
                  top: -4px;
                  left: -4px;
                }
              }

              &:hover {
                border: 1px solid #584576;
                background: rgba(88, 69, 118, 0.10);
              }

              & span {
                display: block;
              }

              & strong {
                display: block;
                font-size: 16px;
                font-weight: 600;
                letter-spacing: -0.7px;
              }

              & small {
                position: absolute;
                top: -9px;
                left: 50%;
                min-height: 14px;
                border-radius: 4px;
                background: #2C2926;
                color: #fff;
                font-size: 9px;
                font-weight: 600;
                line-height: normal;
                padding: 2px 5px;
                text-transform: uppercase;
                transform: translateX(-50%);
                white-space: nowrap;
              }
            }
          }
        }

        & .subscription-popup__benefits {
          color: #2C2926;
          font-size: 13px;
          line-height: 130%;
          text-align: center;

          & p {
            margin: 0;
          }

          & ul {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px 16px;
            margin: 0;
            padding: 0;
            list-style: none;

            & li {
              display: grid;
              grid-template-columns: 14px minmax(0, 1fr);
              gap: 4px;
              align-items: center;
              color: #2C2926;
              font-size: 13px;
              font-style: normal;
              font-weight: 500;
              line-height: 130%;
              letter-spacing: -0.3px;
              text-align: left;

              &::before {
                content: "";
                width: 14px;
                height: 14px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cg clip-path='url(%23clip0_18474_11219)'%3E%3Crect x='2.625' y='3.5' width='8.75' height='7' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7317 4.62636C13.4871 5.17045 14 6.01364 14 7C14 7.98636 13.4871 8.83018 12.7317 9.37364C12.8845 10.2913 12.6465 11.256 11.9509 11.9509C11.2541 12.6477 10.29 12.8794 9.37618 12.7305C8.83464 13.4884 7.98382 14 7 14C6.01364 14 5.16855 13.4865 4.62573 12.7298C3.71064 12.8794 2.74591 12.6484 2.04845 11.9509C1.35164 11.2541 1.12 10.2894 1.274 9.37364C0.519273 8.83082 0 7.987 0 7C0 6.013 0.519273 5.16855 1.274 4.62636C1.12 3.71064 1.35164 2.74591 2.04909 2.04909C2.74464 1.35291 3.71 1.11555 4.63082 1.26827C5.17045 0.511636 6.01555 0 7 0C7.98318 0 8.83273 0.511 9.37491 1.26827C10.2925 1.11555 11.256 1.35418 11.9509 2.04909C12.6465 2.744 12.8851 3.70873 12.7317 4.62636ZM9.91518 4.57291C9.98321 4.62146 10.041 4.68293 10.0853 4.75382C10.1296 4.82471 10.1594 4.90363 10.1732 4.98606C10.187 5.0685 10.1844 5.15284 10.1655 5.23426C10.1467 5.31569 10.112 5.39261 10.0635 5.46064L6.88164 9.91518C6.82793 9.99041 6.75847 10.053 6.6781 10.0987C6.59773 10.1444 6.50838 10.172 6.41627 10.1796C6.32415 10.1872 6.23147 10.1747 6.14468 10.1429C6.0579 10.1111 5.97908 10.0607 5.91373 9.99536L4.00464 8.08627C3.88872 7.96625 3.82458 7.80551 3.82603 7.63865C3.82748 7.4718 3.8944 7.31219 4.01239 7.19421C4.13037 7.07622 4.28998 7.00929 4.45684 7.00784C4.62369 7.00639 4.78443 7.07054 4.90445 7.18645L6.28218 8.56418L9.02745 4.72055C9.1256 4.58325 9.27426 4.49057 9.44074 4.46288C9.60722 4.4352 9.77788 4.47477 9.91518 4.57291Z' fill='%2340861e'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_18474_11219'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: contain;
              }
            }
          }
        }
      }

      & .subscription-popup__gifts {
        padding: 0;
        margin-bottom: 22px;

        & .subscription-popup__gifts-title {
          margin: 0 0 8px;
          color: #2C2926;
          font-size: 14px;
          font-weight: 600;
          line-height: normal;
          text-align: center;
          text-transform: uppercase;
        }

        & .subscription-popup__additional-products-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 10px;

          & .subscription-popup__additional-product-card {
            display: grid;
            align-content: start;
            border: 0;
            border-radius: 10px;
            background: linear-gradient(222deg, #FFF4D2 34.57%, #FFE9A4 73.34%);
            padding: 10px 14px;
            text-align: center;

            position: relative;

            & .subscription-popup__additional-product-price {
              display: flex;
              flex-direction: column;
              gap: 2px;
              align-items: center;
              padding: 4px 6px;


              background: #FFF;
              border-radius: 5px;

              font-size: 12px;
              font-weight: 600;
              line-height: 100%;
              letter-spacing: -0.3px;
              text-transform: uppercase;

              position: absolute;
              top: 10px;
              right: 10px;

              & .price__compare {
                position: relative;
                color: var(--color-red-text, #d6121a);
                font-size: 12px;
                font-weight: 600;
                line-height: 100%;

                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  left: -2px;
                  width: calc(100% + 4px);
                  height: 1px;
                  background: currentColor;
                  transform: rotate(0);
                }
              }

              & .price__original {
                color: var(--color-red-text, #d6121a);
                font-size: 14px;
                font-weight: 600;
                line-height: 100%
              }
            }

            & .subscription-popup__additional-product-image {
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              width: 60px;
              height: 60px;
              margin: 0 0 2px;
              background: transparent;

              &.subscription-popup__additional-product-image--icon {
                color: #8a6429;
                font-size: 18px;
                font-weight: 900;
              }

              & img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }

            & .subscription-popup__additional-product-info {
              & .subscription-popup__additional-product-title {
                color: #2C2926;
                font-size: 13px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-align: left;
              }
            }
          }
        }
      }
    }

    & .subscription-popup__guarantee {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      border-radius: 10px;
      background: #F0FCEA;
      color: #2b8d24;
      font-size: 13px;
      font-weight: 400;
      line-height: 120%;
      padding: 12px;

      & .subscription-popup__guarantee-icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: 32px;
        height: 32px;
        
        color: #49a83a;

        &  svg {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      & .subscription-popup__guarantee-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: auto;

        &  strong {
          font-size: 15px;
          font-weight: 600;
          line-height: 130%;
          letter-spacing: -0.5px;
        }
      }
    }

    & .subscription-popup__button {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;

      width: 100%;
      border: 0;
      border-radius: 10px;
      background: #d6121a;
      color: #fff;
      padding: 20px 30px;
      font-size: 20px;
      font-weight: 600;
      line-height: 18px;
      letter-spacing: -0.5px;
      cursor: pointer;

      transition: background-color .2s linear;

      &:hover {
        background: #CA0000;  
      }

      & svg {
        width: 16px;
        height: 16px;
      }
    }

    & .subscription-popup__footer {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      justify-content: center;
      margin-top: 14px;
      color: var(--color-grey-text, #6e6e6e);
      font-size: 13px;
      font-weight: 500;
      line-height: 120%;
      text-align: center;

      & p {
        margin: 0;
      }

      & span {
        &:not(:last-child)::after {
          content: "•";
          margin-left: 5px;
        }

        &.subscription-popup__footer-item--checkout {
          display: inline-flex;
          justify-content: center;
          align-items: center;

          &::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M6.9987 8.45833V9.625M9.91536 5.85013C10.2585 5.87107 10.502 5.91821 10.7099 6.02408C11.0392 6.19185 11.3068 6.45954 11.4746 6.78883C11.6654 7.16322 11.6654 7.65322 11.6654 8.63333V9.45C11.6654 10.4301 11.6654 10.9201 11.4746 11.2945C11.3068 11.6238 11.0392 11.8915 10.7099 12.0592C10.3355 12.25 9.84548 12.25 8.86536 12.25H5.13203C4.15194 12.25 3.66189 12.25 3.28755 12.0592C2.95826 11.8915 2.69055 11.6238 2.52277 11.2945C2.33203 10.9201 2.33203 10.4301 2.33203 9.45V8.63333C2.33203 7.65322 2.33203 7.16322 2.52277 6.78883C2.69055 6.45954 2.95826 6.19185 3.28755 6.02408C3.49537 5.91821 3.73884 5.87107 4.08203 5.85013C4.35703 5.83333 4.69604 5.83333 5.13203 5.83333H8.86536C9.30135 5.83333 9.64038 5.83333 9.91536 5.85013ZM4.08203 5.85013V4.66667C4.08203 3.05584 5.38787 1.75 6.9987 1.75C8.60951 1.75 9.91536 3.05584 9.91536 4.66667V5.85013' stroke='%23999999' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            margin-right: 5px;
          }
        }
      }
    }
  }

  &.is-loading {
    & .subscription-popup__button {
      opacity: 0.65;
      cursor: wait;
    }

    & .subscription-popup__close {
      opacity: 0.65;
      cursor: wait;
    }

    .subscription-popup__frequency-button {
      opacity: 0.65;
      cursor: wait;
    }
  }

  @media screen and (max-width: 749px) {
    padding: 10px;

    & .subscription-popup__announcement-bar {
      padding: 6px 10px 16px;

      border-radius: 16px 16px 0 0;
      font-size: 14px;
    }

    & .subscription-popup__content {
      max-height: min(92dvh, 786px);
      border-radius: 16px;
      padding: 20px 16px;

      & .subscription-popup__close {
        left: calc(100% - 28px);
        transform: translate(6px, -10px);

        width: 28px;
        height: 28px;
        font-size: 18px;
      }

      & .subscription-popup__header { 
        margin-top: -28px;

        & h3 {
          padding: 0 20px 0 0;
          font-size: 22px;
          letter-spacing: -0.5px;
          line-height: 120%;
          text-align: left;
        }

        & .subscription-popup__subtitle {
          padding: 0 20px 0 0;
          font-size: 15px;
          letter-spacing: -0.3px;
          text-align: left;
        }

        .subscription-popup__timer {
          margin-top: 12px;
          justify-content: flex-start;

          & .subscription-popup__timer-text {
            font-size: 13px;
          }

          reverse-counter.subscription-popup__counter {
            gap: 10px;

            & .reverse-counter__time-block {
              gap: 2px;
              min-height: 26px;

              border-radius: 5px;
              font-size: 13px;

              &.separator::after {
                right: -7px;
                font-size: 13px;
              }

              & .time-block__unit {
                font-size: 13px;
              }
            }
          }
        }
      }

      & .subscription-popup__body {
        gap: 16px;
        margin: 20px 0 0;

        & .subscription-popup__offer-card {
          border-radius: 12px;
          padding: 16px 12px;

          & .subscription-popup__offer-header {
            gap: 10px;
            margin-bottom: 12px;

            & .subscription-popup__offer-title {
              gap: 6px;
              font-size: 16px;

              & strong {
                font-size: 16px;
                font-weight: 600;
              }

              & .subscription-popup__save-badge {
                min-height: 25px;
                border-radius: 6px;
                font-size: 15px;
                padding: 0 7px;

                & strong {
                  font-weight: 600;
                }
              }
            }

            & .subscription-popup__offer-price {
              font-size: 24px;
              
              & del {
                font-size: 17px;
              }
            }
          }

          & .subscription-popup__savings {
            font-size: 15px;

            & .subtitle {
              font-size: 13px;
            }
          }

          & .subscription-popup__frequency {
            & .subscription-popup__frequency-buttons {
              & .subscription-popup__frequency-button {
                min-height: 55px;
                font-size: 13px;
                line-height: 110%;

                & strong {
                  font-size: 15px;
                }

                & small {
                  top: -7px;
                  min-height: 12px;
                  border-radius: 3px;
                  font-size: 7px;
                  padding: 1px 4px;
                }
              }
            }
          }

          & .subscription-popup__benefits {
            font-size: 12px;

            & ul {
              gap: 10px 10px;

              & li {
                font-size: 12px;
              }
            }
          }
        }

        & .subscription-popup__gifts {
          & .subscription-popup__additional-products-grid {
            gap: 8px;

            & .subscription-popup__additional-product-card {
              justify-content: center;
              padding: 8px;

              position: relative;

              & .subscription-popup__additional-product-price {
                flex-direction: row;
                justify-content: center;
                position: initial;

                & .price__original {
                  font-size: 12px;
                }
              }

              & .subscription-popup__additional-product-image {
                margin: 0 auto;
                justify-content: center;

                &.subscription-popup__additional-product-image--icon {
                  font-size: 16px;
                }
              }

              & .subscription-popup__additional-product-info {
                & .subscription-popup__additional-product-title {
                  font-size: 12px;
                  text-align: center;
                }
              }
            }
          }
        }
      }

      & .subscription-popup__guarantee {
        gap: 6px;
        font-size: 12px;
        padding: 10px;
        justify-content: flex-start;

        & .subscription-popup__guarantee-icon {
          width: 26px;
          height: 26px;
        }

        & .subscription-popup__guarantee-text {
          &  strong {
            font-size: 14px;
          }
        }
      }

      & .subscription-popup__button {
        gap: 6px;

        padding: 20px;
        font-size: 16px;

        & svg {
          width: 12px;
          height: 12px;
        }
      }

      & .subscription-popup__footer {
        font-size: 12px;
      }
    }
  }
}

body.subscription-open {
  overflow: hidden;
}