: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");

  --icon-up-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.6'%3E%3Cpath d='M6.5126 7.82768C6.61482 7.93516 6.75307 7.9967 6.90185 8.00034C7.05042 8.00378 7.19171 7.94953 7.29919 7.84711C7.30283 7.84367 7.30668 7.84023 7.31053 7.83699L9.82129 5.44909C9.89861 5.37562 10.0197 5.3746 10.098 5.44687L12.7063 7.85217C12.9316 8.06005 13.2842 8.04568 13.4925 7.81999C13.7004 7.59531 13.6858 7.2427 13.4601 7.0336L10.3294 4.14695C10.2231 4.04898 10.0877 4 9.95246 4C9.81724 4 9.67596 4.05101 9.56908 4.15303L6.53264 7.04049C6.42071 7.14635 6.35938 7.28946 6.35938 7.4441C6.35938 7.58721 6.41382 7.72344 6.5126 7.82768Z' fill='white'/%3E%3Cpath d='M13.4917 12.1804C13.284 11.9547 12.9314 11.9405 12.7053 12.1484L10.0972 14.5535C10.0188 14.6257 9.8978 14.6249 9.82048 14.5512L7.29939 12.1536C7.19515 12.0542 7.05953 12 6.91602 12C6.91136 12 6.9065 12 6.90185 12C6.75307 12.0036 6.61482 12.065 6.5126 12.1727C6.41382 12.2771 6.35938 12.4133 6.35938 12.5564C6.35938 12.7111 6.42071 12.8542 6.53224 12.9597L9.56888 15.8473C9.77696 16.0459 10.1031 16.052 10.3182 15.8637C10.3215 15.8603 10.3249 15.8568 10.3283 15.8536L13.4595 12.9663C13.6846 12.7578 13.6992 12.405 13.4917 12.1801V12.1804Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");

  --icon-checkbox-2: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2384_6269)'%3E%3Cpath d='M12.3396 0H2.66037C1.18871 0 0 1.18871 0 2.66037V12.3396C0 13.8113 1.18871 15 2.66037 15H12.3396C13.8113 15 15 13.8113 15 12.3396V2.66037C15 1.21694 13.7831 0 12.3396 0ZM5.80195 11.6886L2.37741 8.23583L3.99066 6.65082L5.8304 8.49055L11.0096 3.3114L12.6228 4.92464L5.83231 11.7151' fill='%23706F75'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2384_6269'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

  --icon-cloud: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4617 0C12.7563 0 14.624 1.82733 14.6898 4.10617C16.257 4.3468 17.4562 5.7007 17.4562 7.33433C17.4562 9.14367 15.978 10.6093 14.189 10.6007L2.218 10.6014C1.00472 10.6085 0 9.61316 0 8.38428C0 7.03507 1.19375 6.00061 2.529 6.18895C2.24853 3.96711 4.35167 2.22411 6.461 2.85461C7.0321 1.19368 8.607 0.000614421 10.4618 0.000614421L10.4617 0Z' fill='white'/%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: 500;
  font-size: 2.4rem;
  line-height: 1.2;
  max-width: 40rem;
  margin: 2rem auto 1rem auto;
}

.headline-2 {
  color: white;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
  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-content-header-min-height: 24rem;
}

.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;
  margin: 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:960px) {
  .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:960px) {
  .home-link[role=button] {
    margin-left: 0.5rem;
  }
}

.product-left-column .header {
  min-height: calc(var(--product-content-header-min-height) - 4rem);
  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:960px) {
  .product-left-column .header {
    margin: 2rem 0.5rem;
  }

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

.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: 0 2rem;
}

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

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



.product-right-column .header {
  min-height: calc(var(--product-content-header-min-height) - 4rem);
  margin: 2rem 0;
}

@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: 1.1rem;
  padding: 0;
}

.product-info .benefits li {
  list-style-type: none;
  color: white;
  border-bottom: 1pt solid #606060;
  padding: 0.75rem 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;
}


/*
 * Pricing Page
 */

.pricing-page {
  display: flex;
  flex-direction: column;
  max-width: 74rem;
  margin: auto;

  --pricing-color-1: white;
  --pricing-color-2: #8D9397;

  --pricing-background-1: #1B1A23;
  --pricing-background-2: #281A78;
  --pricing-background-2-t: #281A7880;
  --pricing-background-2-h: #301F90;
  --pricing-background-3: #121212;
  --pricing-background-4: #323139;
  --pricing-background-4-h: #4B4A55;

  --pricing-border-1: #52515f;
  --pricing-border-2: #2B3034;
}

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

.pricing-page .pricing-background .pricing-image {
  display: block;
  width: 100%;
  height: 30rem;
  object-fit: cover;
  filter: grayscale(1) brightness(1);
}

.pricing-page .pricing-background .pricing-shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #000f, #0000);
}

.pricing-page .pricing-header {
  position: relative;
  max-width: 34rem;
  margin: 3rem auto 1rem auto;
  text-align: center;
}

.pricing-page .pricing-body {
  position: relative;
}

.pricing-body .current-plan {
  padding: 0.5rem;
  margin: 2rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--pricing-color-1);
  background: #92e76199;
  font-size: 1rem;
  font-weight: 400;
}

.pricing-body .current-plan .title {
  font-size: 1.2rem;
  font-weight: 700;
}

.pricing-body .current-plan .description {}

.pricing-body .toggle-period {
  display: flex;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: var(--pricing-background-1);
  margin: 0.5rem auto;
  width: fit-content;
}

.pricing-body .toggle-period .period {
  display: flex;
  margin: 0.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  color: var(--pricing-color-1);
}

.pricing-body.monthly .toggle-period .period.monthly,
.pricing-body.yearly .toggle-period .period.yearly {
  background: white;
  color: var(--pricing-background-1);
}

.pricing-body.monthly .toggle-period .period.yearly:hover,
.pricing-body.yearly .toggle-period .period.monthly:hover {
  background: var(--secondary-hover);
  cursor: pointer;
}

.pricing-body .toggle-period .discount {
  background: var(--primary);
  color: var(--pricing-background-1);
  font-size: 0.6rem;
  line-height: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  margin: 0 0 0 0.5rem;
}


.pricing-body .pricing-tiers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pricing-body .pricing-tier {
  display: flex;
  flex-direction: column;
  width: 16rem;
  min-height: 37rem;
  margin: 1rem;
  padding: 1rem;
  background: linear-gradient(180deg, #222129 1.22%, #1A1922 98.78%);
  border-radius: 1rem;
}

.pricing-body.monthly .pricing-tier .yearly,
.pricing-body.yearly .pricing-tier .monthly {
  display: none;
}

.pricing-tier > .title {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: var(--pricing-color-1);
}

.pricing-tier > .description {
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem 0;
  color: var(--pricing-color-2);
}

.pricing-tier .plan {
  display: flex;
  padding: 1.5rem 0 0.25rem 0.5rem;
}

.pricing-tier .plan .value {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--pricing-color-1);
}

.pricing-tier .plan .suffix {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-2);
  padding: 0.75rem 0 0 1rem;
}

.pricing-tier .credits {
  display: flex;
  border: 1px dashed var(--pricing-border-1);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.pricing-tier .popup-anchor .credits {
  background-image: var(--icon-up-down);
  background-position: right 0.25rem top 50%;
  cursor: pointer;
}

.pricing-tier .popup-anchor .credits:hover {
  background-color: var(--secondary-hover);
}

.pricing-tier .credits .value {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--pricing-color-1);
}

.pricing-tier .credits .suffix {
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--pricing-color-1);
  padding: 0.5rem 0 0 1rem;
}

.pricing-tier .credits.custom .suffix {
  padding: 5px 0 0 1rem;
  line-height: 1.1;
}

.pricing-tier .credits > svg {
  margin: 0.25rem 0;
  color: var(--pricing-color-1);
}

.pricing-tier .popup-anchor {
  position: relative;
}

.pricing-tier .popup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 20rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: var(--pricing-background-3);
  overflow: auto;
}

.pricing-tier .popup-anchor:not(.active) .popup {
  display: none;
}

.pricing-tier .popup-item {
  background: var(--pricing-background-4);
  border-radius: 0.25rem;
  margin: 0.05rem;
  padding: 0.5rem;
  cursor: pointer;
}

.pricing-tier .popup-item:hover {
  background: var(--pricing-background-4-h);
}

.pricing-tier .popup-item.active {
  background: none;
}

.pricing-tier .popup-item .line-1 {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-1);
}

.pricing-tier .popup-item .line-2 {
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--pricing-color-2);
}

.pricing-tier > [role=button] {
  margin: 1rem 0;
}

.pricing-tier > .custom[role=button] {
  background: var(--pricing-background-2);
  border-color: var(--pricing-background-2);
}

.pricing-tier > .custom[role=button]:hover {
  background: var(--pricing-background-2-h);
}

.pricing-tier .benefits .title {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-1);
  border-bottom: 1px solid var(--pricing-border-2);
  padding: 0.5rem;
}

.pricing-tier .benefits .benefit {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-2);
  background-position: left 0.5rem top 50%;
  background-image: var(--icon-checkbox-2);
  padding: 0.2rem 0.2rem 0.2rem 1.8rem;
}

.pricing-tier .footer {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-1);
  padding: 0 0.2rem 0 1.8rem;
  background-image: var(--icon-cloud);
  background-position: left 0.5rem top 50%;
}

.pricing-page .pricing-footer {
  position: relative;
}

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