:root {
  --font-family: Roboto, sans-serif;

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

  --background: #1E2427;
  --background-2: #505A61;
  --background-3: #505A61cc;
  --border: #505A61;

  --color-1: #F0F5F5;
  --color-2: #A7ACB0;

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

  --asv-color-bg: #1a1f22;
  --asv-color-bg2: #1a1f22;



}

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

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

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

.plain[role=button] {
  --line-height: 2;
  height: 2rem;
  background: transparent;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1pt solid var(--border);
  padding: 0 1.5rem;
  transition: 300ms;
}

.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 {
  display: block;
  width: 100%;
  min-height: 4rem;
  padding: 1rem 0 3rem 0;
  margin: 0;
  position: relative;
  background: linear-gradient(180deg, black, #0002);
  box-shadow: #0002 0 0 1rem 0.7rem;
}

.header-center {
  top: 0;
  width: fit-content;
  margin-left: 50%;
  transform: translate(-50%);
  padding: 1rem;
}

.page-header .header-center .logo {
  padding: 0;
  margin: 0;
  width: 22rem;
  justify-content: center;
}

.page-header .header-center .logo a {
  padding: 0.5rem;
  margin: 0.25rem 0;
  height: 3rem;
  --text-decoration: none;
}

.page-header .header-center .logo a img {
  max-width: unset;
}

.page-header .header-center .logo a span {
  font-size: 1.5rem;
  line-height: 2rem;
}

.header-left {
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap
}

.header-left > * {
  margin-left: 1rem;
}

.header-right {
  padding: 0.75rem 1rem;
  float: right;
  display: flex;
  flex-wrap: wrap;
}
.header-right > * {
  margin-right: 1rem;
}

@media (min-width:450px) {
  .header-row {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width:1080px) {
  .header-center {
    position: absolute;
  }
}

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

form {
  margin-bottom: 0;
}

/*
 * Home Page
 *
 */


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

.home-page {
  padding-top: 3rem;
}


/* 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: 3.2rem;
  line-height: 3.5rem;
  max-width: 50rem;
  margin: 1rem auto;
}

.headline-2 {
  color: white;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.8rem;
  max-width: 38rem;
  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;
    line-height: 2.3rem;
    max-width: 18rem;
  }
  .headline-2 {
    font-size: 1.1rem;
    line-height: 1.2rem;
    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: space-around;
}

.tag-selectors .select-tag {
  width: 10rem;
  --line-height: 1.75;
  color: var(--asv-color-green);
  background-color: var(--background-2);
  background-size: 0.5rem;
  font-size: 0.8rem;
  font-weight: 900;
  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: 24rem;
  border-radius: 1rem;
  background: var(--background-2);
  overflow: hidden;
  margin: 0 1rem 2rem 1rem;
  cursor: pointer;
  transition: 500ms;
  text-decoration: none;
}

.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.4rem;
  font-weight: 900;
  line-height: 1.6rem;
  max-height: 3.2rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.rich-items .item .body .summary {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1rem;
  color: var(--color-1);
  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;
  width: 70rem;
  padding: 2rem;
  margin: 2rem auto;
  background: linear-gradient(180deg, #d7f0ff11, #D0EBFC11);
  border-radius: 1rem;
}

.upsell span {
  display: block;
  width: 46rem;
  margin-bottom: 2rem;
  font-size: 1.6rem;
  line-height: 1.8rem;
  text-align: center;
  color: white;
}

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

.upsell .btns a {
  margin: 0.25rem;
}

@media (max-width:1440px) {
  .upsell {
    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,
.product-header,
.product-body,
.product-footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  position: relative;
}

.product-page {
  width: 72rem;
  padding: 0 1rem;
  margin: 0 auto;
}

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

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

@media (max-width:720px) {
  .product-page {
    max-width: 100vw;
  }
}

.home-link {
  background: transparent;
  border: none;
  width: fit-content;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.home-link:hover {
  background: var(--primary-focus);
}

.home-link::before {
  content: '◀';
  margin: 0 0.5rem 0 0;
}

.product-body .header {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.product-body .header .image {
  height: 38rem;
  border-radius: 1rem;
  overflow: hidden;
}

.product-body .header .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-body .header .feature {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 4rem;
  height: 4rem;
  padding: 0.5rem;
  background: white;
  border-radius: 0.5rem;
}

.product-body .header .feature img {
  width: 3rem;
  height: 3rem;
}

.product-body .header .info {
  position: absolute;
  top: 14rem;
  left: 2rem;
  height: 24rem;
  width: 35rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

@media (max-width:1440px) {
  .product-body .header .info {
    width: 30rem;
  }
}

@media (max-width:720px) {
  .product-body .header .info {
    left: 0;
    width: 100%;
    padding: 0 2rem;
  }
}

.product-body .header .info .type {
  font-size: 0.8rem;
  font-weight: 500;
  width: fit-content;
  margin-bottom: 2rem;
  padding: 0.2rem 2rem;
  border-radius: 0.2rem;
  background: #ffffff99;
  color: black;
}

.product-body .header .info .title {
  font-size: 3.2rem;
  line-height: 3.75rem;
  font-weight: 500;
  color: white;
  margin-bottom: 1rem;
}

@media (max-width:1080px) {
  .product-body .header .info .title {
    font-size: 2.8rem;
    line-height: 3.25rem;
  }
}


.product-body .header .info .title span {
  background: #0003;
}

.product-body .header .info .summary {
  flex: 1;
  overflow: hidden;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 400;
  color: white;
  margin-bottom: 1rem;
}

@media (max-width:1080px) {
  .product-body .header .info .summary {
    font-size: 1.2rem;
    line-height: 1.45rem;
  }
}

.product-body .header .info .summary span {
  background: #0003;
}

.product-body .header .info .date span {
  color: white;
  background: #0003;
}

.product-side-column {
  position: absolute;
  top: 15rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 16rem;
  z-index: 9999;
}

@media (max-width:1080px) {
  .product-side-column {
    position: relative;
    top: 0;
    right: 0;
    float: right;
    margin: 0.5rem 0 0.5rem auto;
  }
}

@media (max-width:760px) {
  .product-side-column {
    float: unset;
  }
}

.product-info {
  display: flex;
  flex-direction: column;
  width: 16rem;
  min-height: 24rem;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--background-3);
  backdrop-filter: blur(1rem);
  color: white;
  margin: auto;
  margin-bottom: 2rem;
}

@media (max-width:760px) {
  .product-info {
    min-height: unset;
  }
}

.product-info .price {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2rem;
  margin: 1.5rem 1rem 0.5rem 1.5rem;
  width: 10rem;
  min-height: 4rem;
}

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

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

.product-info .authors {
  margin: 0 1.5rem 0.5rem 1.5rem;
  display: flex;
  font-size: 0.9rem;
}

.product-info .authors label {
  font-weight: 500;
}

.product-info .availability {
  flex: 1;
  overflow: hidden;
  margin: 0 1.5rem 0.5rem 1.5rem;
}

.product-info .availability label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.product-info .availability .apps {
  display: flex;
  flex-wrap: wrap;
}

.product-info .availability .apps .app {
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--background);
  color: white;
  padding: 0.2rem 1rem;
  border-radius: 0.3rem;
  margin: 0.2rem;
}

.rich-items .item .action,
.product-info .action {
  height: 2rem;
  font-size: 1rem;
  /* font-weight: 500; */
  padding-top: 0.2rem;
  margin-top: 0.5rem;
  border-radius: 0;
}

.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: 2.5rem;
  right: 2rem;
  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-side-column #unsubscribe-button {
  background: none;
  color: white;
  border: none;
  height: unset;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0.2rem 0.5rem;
  margin: 0 auto 2rem auto;
  transition: 500ms;
}

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

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

.product-subscription-notes {
  /* font-size: 1rem; */
  padding: 2rem 0 0 0;
  margin-right: 21rem;
}

.product-content {
  /* font-size: 1rem; */
  padding: 2rem 0;
  margin-right: 21rem;
}

@media (max-width: 1080px) {
  margin-right: 17rem;
}

@media (max-width: 760px) {
  .product-content {
    margin-right: unset;
  }
}

.related-products > label {
  font-size: 2.4rem;
  font-weight: 500;
  margin: 2rem;
  color: white;
}

/*
 * User Page
 */

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

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