:root {
  --icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' width='24' height='24' fill='rgb(162,175,185)'%3E%3Cpath d='M880.1%20154H143.9c-24.5%200-39.8%2026.7-27.5%2048L349%20597.4V838c0%2017.7%2014.2%2032%2031.8%2032h262.4c17.6%200%2031.8-14.3%2031.8-32V597.4L907.7%20202c12.2-21.3-3.1-48-27.6-48zM603.4%20798H420.6V642h182.9v156zm9.6-236.6l-9.5%2016.6h-183l-9.5-16.6L212.7%20226h598.6L613%20561.4z'%3E%3C/path%3E%3C/svg%3E");

  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 8L10 0H0L5 8Z' fill='rgb(30,36,39)'/%3E%3C/svg%3E");

  --icon-tick-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2753 0.430739L18.2353 2.15265C18.6294 2.49957 19.1092 2.64019 19.6286 2.56126L22.2081 2.172C23.0685 2.04194 23.8808 2.56418 24.1208 3.40062L24.8377 5.90878C24.9822 6.4146 25.3089 6.79144 25.7887 7.00629L28.1698 8.07297C28.9637 8.4295 29.3656 9.30734 29.1141 10.1409L28.3615 12.6394C28.2102 13.1424 28.2815 13.6368 28.5686 14.077L29.9948 16.2624C30.4708 16.9909 30.333 17.9468 29.6709 18.5124L27.6869 20.2064C27.287 20.5475 27.0799 21.0023 27.0837 21.5275L27.102 24.1359C27.1078 25.007 26.4758 25.7364 25.6133 25.854L23.0279 26.2066C22.5066 26.2779 22.0875 26.5477 21.8061 26.9919L20.4108 29.1966C19.9455 29.9318 19.0194 30.2045 18.2302 29.8374L15.8646 28.737C15.3886 28.5153 14.8885 28.5153 14.4124 28.737L12.0468 29.8374C11.2576 30.2045 10.3315 29.9327 9.86616 29.1966L8.47087 26.9919C8.18951 26.5477 7.76942 26.2779 7.24906 26.2066L4.66373 25.854C3.80135 25.7364 3.16922 25.006 3.17497 24.1359L3.19327 21.5275C3.19714 21.0014 2.98991 20.5475 2.5901 20.2064L0.606067 18.5124C-0.0558563 17.9468 -0.193675 16.991 0.282252 16.2624L1.70837 14.077C1.99549 13.6367 2.0668 13.1434 1.9155 12.6394L1.16292 10.1409C0.911462 9.30734 1.31327 8.4295 2.10725 8.07297L4.48827 7.00629C4.96819 6.79144 5.29481 6.41367 5.4393 5.90878L6.15622 3.40062C6.39524 2.56324 7.20751 2.04192 8.06895 2.172L10.6484 2.56126C11.1677 2.63936 11.6476 2.49957 12.0417 2.15265L14.0017 0.430739C14.656 -0.14358 15.6205 -0.14358 16.2749 0.430739H16.2753ZM5.37027 15.4039L13.4635 22.6904L24.906 9.97684L23.1214 8.1923L13.2408 16.2874L8.01042 12.2511L5.36926 15.4049L5.37027 15.4039Z' fill='rgb(219,255,0)'/%3E%3C/svg%3E");

  --icon-tick-star-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2753 0.430739L18.2353 2.15265C18.6294 2.49957 19.1092 2.64019 19.6286 2.56126L22.2081 2.172C23.0685 2.04194 23.8808 2.56418 24.1208 3.40062L24.8377 5.90878C24.9822 6.4146 25.3089 6.79144 25.7887 7.00629L28.1698 8.07297C28.9637 8.4295 29.3656 9.30734 29.1141 10.1409L28.3615 12.6394C28.2102 13.1424 28.2815 13.6368 28.5686 14.077L29.9948 16.2624C30.4708 16.9909 30.333 17.9468 29.6709 18.5124L27.6869 20.2064C27.287 20.5475 27.0799 21.0023 27.0837 21.5275L27.102 24.1359C27.1078 25.007 26.4758 25.7364 25.6133 25.854L23.0279 26.2066C22.5066 26.2779 22.0875 26.5477 21.8061 26.9919L20.4108 29.1966C19.9455 29.9318 19.0194 30.2045 18.2302 29.8374L15.8646 28.737C15.3886 28.5153 14.8885 28.5153 14.4124 28.737L12.0468 29.8374C11.2576 30.2045 10.3315 29.9327 9.86616 29.1966L8.47087 26.9919C8.18951 26.5477 7.76942 26.2779 7.24906 26.2066L4.66373 25.854C3.80135 25.7364 3.16922 25.006 3.17497 24.1359L3.19327 21.5275C3.19714 21.0014 2.98991 20.5475 2.5901 20.2064L0.606067 18.5124C-0.0558563 17.9468 -0.193675 16.991 0.282252 16.2624L1.70837 14.077C1.99549 13.6367 2.0668 13.1434 1.9155 12.6394L1.16292 10.1409C0.911462 9.30734 1.31327 8.4295 2.10725 8.07297L4.48827 7.00629C4.96819 6.79144 5.29481 6.41367 5.4393 5.90878L6.15622 3.40062C6.39524 2.56324 7.20751 2.04192 8.06895 2.172L10.6484 2.56126C11.1677 2.63936 11.6476 2.49957 12.0417 2.15265L14.0017 0.430739C14.656 -0.14358 15.6205 -0.14358 16.2749 0.430739H16.2753ZM5.37027 15.4039L13.4635 22.6904L24.906 9.97684L23.1214 8.1923L13.2408 16.2874L8.01042 12.2511L5.36926 15.4049L5.37027 15.4039Z' fill='rgb(255,0,0)'/%3E%3C/svg%3E");

  --asv-color-darkviolet: #6a52a9;
  --asv-color-hover-darkviolet: #8a75bd;

}

.flat-primary[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1.25rem;
  border: none;
  padding: 0 1rem;
  transition: 300ms;
}

.flat-black[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1.25rem;
  border: none;
  padding: 0 1rem;
  transition: 300ms;
  color: white;
  background: black;
}

.flat-black[role=button]:hover {
  background: #222;
}

.flat-white[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1.25rem;
  border: none;
  padding: 0 1rem;
  transition: 300ms;
  background: var(--asv-color-silver);
  color: black;
}

.flat-white[role=button]:hover {
  background: white;
}

.flat-gray[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border: none;
  border-radius: 1.25rem;
  padding: 0 1rem;
  transition: 300ms;
  background: var(--background-3-t);
  backdrop-filter: blur(2rem);
  color: white;
}

.flat-gray[role=button]:hover {
  background: var(--primary-focus);
  border-color: var(--primary-focus);
}

.flat-plain[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border: 1pt solid var(--border);
  border-radius: 1.25rem;
  padding: 0 1rem;
  transition: 300ms;
  background: transparent;
  backdrop-filter: blur(2rem);
  color: white;
}

.flat-plain[role=button]:hover {
  background: var(--primary-focus);
  border-color: var(--primary-focus);
}

body {
  min-height: 100vh;
  background: var(--background);
  display: flex;
}

body>div {
  flex: 1;
  display: flex;
}

.page {
  flex: 1;
  width: 100%;
  height: 100%;
}

.page-header .live::before {
  display: inline-block;
  vertical-align: middle;
  content: ' ';
  width: 0.5rem;
  height: 0.5rem;
  background: #7ACF12;
  border-radius: 50%;
  margin: 0 0.5rem 0 0;
}

form {
  margin-bottom: 0;
}

/*
 * Home Page
 *
 */


.home-page {
  display: flex;
  flex-direction: column;
}

.home-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
}

.home-background .shadow {
  flex: 1;
  background: linear-gradient(180deg, #000, #0001 70%, var(--background-1));
}

.home-header,
.home-body {
  position: relative;
  display: flex;
  flex-direction: column;
}


/* Top Features */

/* .top-features { */
/*   display: flex; */
/*   flex-wrap: wrap; */
/*   justify-content: space-between; */
/*   width: 46rem; */
/*   margin: 0 auto; */
/* } */

/* @media (max-width:920px) { */
/*   .top-features { */
/*     width: 19rem; */
/*   } */
/* } */

/* .top-features .feature { */
/*   height: 9.5rem; */
/*   width: 7.5rem; */
/*   display: flex; */
/*   flex-direction: column; */
/*   justify-content: space-between; */
/*   margin-bottom: 2rem; */
/* } */

/* .top-features .feature .box { */
/*   width: 7.5rem; */
/*   height: 7.5rem; */
/*   border: 1pt solid var(--border); */
/*   border-radius: 1rem; */
/* } */

/* .top-features .feature .box img { */
/*   margin: auto; */
/*   transform: translateY(-50%); */
/*   margin-top: 50%; */
/* } */

/* .top-features .feature span { */
/*   font-weight: 900; */
/*   color: white; */
/* } */

/* Headlines */

.headline-1 {
  color: white;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  max-width: 40rem;
  margin: 2rem auto 1rem auto;
}

.headline-2 {
  color: white;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  margin: 0 auto;
}

@media (max-width:1000px) {
  .headline-1 {
    max-width: 36rem;
  }
  .headline-2 {
    max-width: 36rem;
  }
}

@media (max-width:720px) {
  .headline-1 {
    font-size: 2.1rem;
    max-width: 18rem;
  }
  .headline-2 {
    font-size: 1.1rem;
    max-width: 18rem;
  }
}

/* Search box */

.search-box {
  max-width: 34rem;
  --line-height: 2.4;
  margin: 1rem auto;
}

@media (max-width:680px) {
  .search-box {
    max-width: 18rem;
  }
}

.search-box input[type=search] {
  margin-top: 2rem;
  font-size: 1.2rem;
  color: white;
  background-size: 1.2rem;
  background-color: transparent;
  background-image: var(--icon-search);
  background-repeat: no-repeat;
  background-position: center right 0.6rem;
  border: 1pt solid var(--border);
  border-radius: 0.25rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 2.25rem;
}

.search-box input:focus {
  border-color: var(--primary-focus);
}

/* Filters */

.tag-selectors {
  display: flex;
  flex-wrap: wrap;
  width: 60rem;
  margin: 1.5rem auto;
  justify-content: center;
}

.tag-selectors .select-tag {
  width: 10rem;
  height: 2rem;
  --line-height: 1;
  color: var(--asv-color-green);
  background-color: var(--background-3);
  background-size: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  margin: 0.5rem 1rem;
}

.tag-selectors .select-tag:has(option:checked[value=all]) {
  color: white;
}

.tag-selectors .select-tag option {
  color: white;
}

.tag-selectors .select-tag option:checked {
  color: silver;
}

@media (max-width:1200px) {
  .tag-selectors {
    width: 36rem;
  }
}

@media (max-width:720px) {
  .tag-selectors {
    width: 24rem;
  }
}

@media (max-width:480px) {
  .tag-selectors {
    width: 18rem;
  }

  .tag-selectors .select-tag {
    width: 16rem;
  }
}

.tag-selectors .select-tag optgroup,
.tag-selectors .select-tag option {
  background: var(--background);
}

/* grid */

.rich-items {
  display: flex;
  flex-wrap: wrap;
  width: 72rem;
  margin: 0 auto;
  /* justify-content: space-around; */
}

@media (max-width:1440px) {
  .rich-items {
    width: 54rem;
  }
}

@media (max-width:1080px) {
  .rich-items {
    width: 36rem;
  }
}

@media (max-width:720px) {
  .rich-items {
    width: 18rem;
  }
}

.rich-items .item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 16rem;
  height: 25rem;
  border-radius: 1rem;
  background: linear-gradient(181.44deg, #2B3034 1.22%, #1A1922 98.78%);
  overflow: hidden;
  margin: 0 1rem 2rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: unset;
}

.rich-items .item:hover {
  background: black;
}

.rich-items .item .image {
  background: black;
  height: 10rem;
}

.rich-items .item .image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* .rich-items .item .type { */
/*   position: absolute; */
/*   top: 1.5rem; */
/*   left: 1.5rem; */
/*   font-size: 0.8rem; */
/*   font-weight: 500; */
/*   padding: 0.2rem 1rem; */
/*   border-radius: 0.2rem; */
/*   background: #ffffff99; */
/*   color: black; */
/*   transition: 500ms; */
/* } */

/* .rich-items .item:hover .type { */
/*   background: black; */
/*   color: white; */
/* } */

.rich-items .item .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  color: white;
}

.rich-items .item .body .title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  max-height: 3.2rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.rich-items .item .body .summary {
  flex: 1;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-3);
  margin-bottom: 1rem;
  overflow: hidden;
}

.rich-items .item .actions-menu {
  background: cyan;
  height: 1.5rem;
  width: 1.5rem;
  position: absolute;
  left: 1.5rem;
  top: 4rem;
  padding: 0 0.2rem;
  border-radius: 0.2rem;
  background: #f63;
}

.rich-items .item .actions-menu .icon {
  color: white;
}

.rich-items .item .actions-menu:not(:hover) .popover {
  display: none;
}

.rich-items .item .actions-menu:hover .popover {
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
  background: #3339;
  display: flex;
  flex-direction: column;
}

.product-body .header .date,
.rich-items .item .body .date {
  color: var(--color-2);
  font-size: 0.7rem;
  position: relative;
}

.product-body .header .date .actual,
.rich-items .item .body .date .actual {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transition: 500ms;
  background: var(--background-2);
  padding: 0.2rem 1rem;
  border-radius: 0.2rem;
  color: white;
}

.product-body .header .date:hover .actual,
.rich-items .item .body .date:hover .actual {
  opacity: 1;
}



.product-info .subscribed,
.rich-items .item .subscribed {
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--icon-tick-star) no-repeat center/1.5rem;
}
.product-info .subscribed.expired,
.rich-items .item .subscribed.expired {
  background: var(--icon-tick-star-red) no-repeat center/1.5rem;
}

/* .product-info .subscribed:hover::before, */
/* .rich-items .item .subscribed:hover::before { */
/*   position: absolute; */
/*   content: "Subscribed"; */
/*   top: -0.5rem; */
/*   right: -1rem; */
/*   transform: translateY(-100%); */
/*   padding: 0.2rem 1rem; */
/*   background: #DBFF27; */
/*   color: black; */
/*   border-radius: 0.5rem; */
/*   z-index: 1; */
/* } */

/* .product-info .subscribed.expired:hover::before, */
/* .rich-items .item .subscribed.expired:hover::before { */
/*   content: "Expired"; */
/*   background: var(--asv-color-red); */
/*   color: white; */
/* } */

/* .product-info .sustainability, */
/* .rich-items .item .sustainability { */
/*   position: absolute; */
/*   right: 1rem; */
/*   top: 1rem; */
/*   width: 2rem; */
/*   height: 2rem; */
/*   background-image: url('/images/green-leaf.png'); */
/*   background-size: 1.5rem; */
/*   background-position: center; */
/*   border-radius: 50%; */
/*   background-color: #ffffff99; */
/*   box-shadow: #fff 0 0 1rem 0.2rem; */
/* } */

/* .product-info .sustainability:hover::before, */
/* .rich-items .item .sustainability:hover::before { */
/*   content: "Sustainability"; */
/*   position: absolute; */
/*   bottom: -0.5rem; */
/*   right: -0.5rem; */
/*   transform: translateY(100%); */
/*   padding: 0.2rem 1rem; */
/*   background: #0c6a0c; */
/*   color: white; */
/*   border-radius: 0.5rem; */
/*   z-index: 1; */
/* } */

/* .product-info .popular, */
/* .rich-items .item .popular { */
/*   position: absolute; */
/*   right: 1rem; */
/*   top: 9rem; */
/* } */

/* .product-info .popular::before, */
/* .rich-items .item .popular::before { */
/*   display: block; */
/*   height: 1.5rem; */
/*   width: 1.5rem; */
/*   border-radius: 50%; */
/*   font-size: 1.1rem; */
/*   content: '⭐'; */
/*   text-align: center; */
/*   line-height: 1.5rem; */
/*   /\* box-shadow: orange 0 0 0.6rem 0.2rem, inset orange 0 0 0.4rem 0.2rem; *\/ */
/*   box-shadow: #ff5900 0 0 1rem 0.2rem; */
/*   background-color: #ff590099; */
/* } */

/* .product-info .popular:hover::after, */
/* .rich-items .item .popular:hover::after { */
/*   content: "Popular"; */
/*   position: absolute; */
/*   bottom: -0.5rem; */
/*   right: -0.5rem; */
/*   transform: translateY(100%); */
/*   padding: 0.2rem 1rem; */
/*   background: orange; */
/*   color: black; */
/*   border-radius: 0.5rem; */
/*   z-index: 1; */
/* } */

/* upsell */

.upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 70rem;
  padding: 0;
  margin: 4rem auto 1rem auto;
  background: none;
  border-radius: 1rem;
}

.upsell span {
  display: block;
  width: 32rem;
  margin-bottom: 2rem;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 2.4rem;
  text-align: center;
  color: white;
}

.upsell .btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.upsell .btns a {
  margin: 0 0.5rem;
}

@media (max-width:1440px) {
  .upsell {
    max-width: 52rem;
  }

  .upsell span {
    max-width: 35rem;
  }
}

@media (max-width:1080px) {
  .upsell {
    max-width: 34rem;
  }

  .upsell span {
    max-width: 22rem;
    font-size: 1.2rem;
    line-height: 1.3rem;
  }
}

@media (max-width:720px) {
  .upsell {
    max-width: 90vw;
  }

  .upsell span {
    max-width: 15rem;
    font-size: 1.2rem;
    line-height: 1.3rem;
  }
}


/*
 * Product Page
 *
 */

.product-page {
  display: flex;
  flex-direction: column;
  max-width: 62rem;
  padding: 0;
  margin: 0 auto;
}

.product-header,
.product-footer {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 99;
}

.product-body {
  display: flex;
  flex-direction: column;
  min-height: 38rem;
  margin: 0;
  padding: 0;
  background: var(--background-2);
  border-radius: 1rem;
}

.product-body .product-body-row {
  display: flex;
  magin: 0;
  padding: 0;
}

.product-body .product-left-column {
  position: relative;
  flex: 1;
  padding: 0;
}

.product-body .product-right-column {
  position: relative;
  width: 20rem;
  padding: 0;
}

@media (max-width:1440px) {
  .product-page {
    max-width: calc(100% - 2rem);
  }
}

@media (max-width:1080px) {
  .product-body .product-right-column {
    width: 18rem;
  }
}

@media (max-width:720px) {
  .product-body .product-body-row {
    flex-direction: column;
  }

  .product-body .product-right-column {
    width: unset;
  }
}

.product-body .product-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.product-body .product-background .product-image {
  display: block;
  width: 70rem;
  height: 38rem;
  margin: 2rem auto;
  border-radius: 1rem;
  object-fit: cover;
  background: black;
  /* filter: grayscale(0.5) brightness(0.5); */
}

@media (max-width:1440px) {
  .product-page .product-background .product-image {
    margin: 1rem auto;
    max-width: calc(100% - 2rem);
  }
}

.home-link[role=button] {
  font-size: 0.9rem;
  width: fit-content;
  margin: 0 auto 0 2rem;
}

.home-link[role=button]::before {
  content: '◀';
  margin: 0 0.5rem 0 0;
}

@media (max-width:1080px) {
  .home-link[role=button] {
    margin-left: 0.5rem;
  }
}

.product-left-column .header {
  min-height: 24rem;
  margin: 2rem;
}

.product-left-column .header .title {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

@media (max-width:1080px) {
  .product-left-column .header {
    margin: 2rem 0.5rem;
  }

  .product-left-column .header .title {
    font-size: 2.8rem;
  }
}

@media(max-width:960px) and (min-width:720px) {
  .product-left-column .header {
    min-height: 28rem;
  }
}

@media(max-width:720px) {
  .product-left-column .header {
    min-height: unset;
  }
}


.product-left-column .header .title span {
  background: #0003;
}

.product-left-column .header .summary {
  flex: 1;
  overflow: hidden;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--color-6);
  margin-bottom: 1rem;
}

.product-left-column .header .summary span {
  background: #0003;
}

.product-left-column .product-subscription-notes {
  border: 1px dashed green;
  margin-top: 7px;
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
}

.product-left-column .product-content {
  padding: 2rem;
}

@media (max-width:1080px) {
  .product-left-column .product-subscription-notes {
    margin: 0.25rem;
    padding: 0.25rem;
  }

  .product-left-column .product-content {
    padding: 0.5rem;
  }
}



.product-right-column .header {
  min-height: 24rem;
  margin: 2rem 0;
}

@media(max-width:960px) {
  .product-right-column .header {
    min-height: 28rem;
  }
}

@media (max-width:720px) {
  .product-right-column .header {
    min-height: unset;
  }
}


.product-info {
  display: flex;
  flex-direction: column;
  width: 16rem;
  min-height: 16rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #2F363BCC, #1C2023CC);
  backdrop-filter: blur(2rem);
  color: white;
  margin: 0 auto;
  overflow: hidden;
}

.product-info .price {
  font-weight: 500;
  font-size: 1.4rem;
  margin: 1rem auto 1rem 1rem;
}

.product-info .benefits {
  overflow: hidden;
  margin: 1rem;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 2rem;
  padding: 0;
}

.product-info .benefits li {
  list-style-type: none;
  color: white;
  border-bottom: 1pt solid #606060;
  padding: 0.5rem 0;
  margin: 0;
}

.product-info .action {
  height: 2rem;
  font-size: 1rem;
  line-height: 1;
  padding-top: 0.35rem;
  margin-top: 0.5rem;
  border-radius: 0;
}

.product-info .action:last-child {
  height: 3rem;
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  overflow: hidden;
}

.product-info .owned {
  text-align: center;
  padding: 0.5rem;
  background: green;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2rem 1rem;
  margin: 0.5rem auto;
  border-radius: 1rem;
}

.product-info .owned.expired {
  background: var(--asv-color-red);
}

.product-info .subscribed {
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
}

/* .product-info .popular { */
/*   top: 0.75rem; */
/*   right: 4rem; */
/* } */

/* .product-info .sustainability { */
/*   top: 0.5rem; */
/*   right: 0.5rem; */
/* } */


.product-right-column #unsubscribe-button {
  display: block;
  width: fit-content;
  background: none;
  backdrop-filter: blur(2rem);
  color: white;
  border: none;
  height: unset;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0.2rem 0.5rem;
  margin: 1rem auto;
  transition: 500ms;
}

.product-right-column #unsubscribe-button:hover {
  background: var(--asv-color-red);
  color: white;
}

.product-right-column .product-side-content {
  font-size: 1rem;
  width: 16rem;
  margin: auto;
}

@media (max-width:720px) {

  .product-right-column .product-side-content {
    width: unset;
    padding: 0.5rem;
    margin: 0;
  }
}

.product-right-column .related-products {
  margin: 2rem 0;
}

.product-right-column .related-products > label {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--primary);
}

.product-right-column .related-products .rich-items {
  width: 16rem;
  margin: auto;
}

.product-right-column .related-products .rich-items .item {
  margin: 1rem 0;
}

/*
 * User Page
 */

.usage {
  background: var(--asv-color-bg);
  padding: 1rem;
}

.usage th {
  font-weight: 900;
  color: var(--asv-color-darkviolet);
}

/*,.markdown-content li,.markdown-content h1, .markdown-content h2, .markdown-content h3*/
.markdown-content p{
    font-size:1.1rem;
    margin-bottom: 0.7rem;

}
.markdown-content h1 {

    font-size:1.6rem;
}
.markdown-content h2 {

    font-size:1.4rem;
}
.markdown-content h3 {

    font-size:1.3rem;
}