/* START Landing page style  */
.landing-main {
  display: flex;
  flex-direction: column;
}

.landing-banner {
  width: 99%;
  margin: var(--size-2) auto var(--size-2);
  align-self: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 1%;

  .main-header__link {
    grid-column: 1/5;
    grid-row: 1/3;

    img {
      margin-left: .5%;
      width: 99%;
    }
  }

  .side-header__link {
    grid-column: 5/7;

    img {
      margin-left: calc(1% * -1);
      width: 100%;
    }
  }

  img {
    object-fit: contain;
    outline: var(--border-style-thin);
    border-radius: var(--border-radius);

    &:hover {
      box-shadow: var(--shadow-2);
      outline: var(--border-style-medium);
      outline-color: var(--brand);
    }
  }

  @media screen and (max-width: 768px) {
    display: block;
    width: 100%;
    margin: 0 0 var(--size-1);

    .main-header__link {
      width: 100%;

      img {
        width: 100%;
        outline: none;
        margin: 0;
        border-radius: unset;
      }
    }

    .side-header__link {
      display: none;
    }
  }
}

.landing-section-container {
  width: 100%;

  @media screen and (max-width: 768px) {
    margin: 0;
  }

  &:nth-of-type(1) {
    .featured-shop__header {
      h2 {
        display: none;
      }
    }
  }

  &:nth-of-type(3) {
    .featured-shop__header {
      img {
        display: none;
      }
    }
  }
}

.landing__header {
  background-color: var(--surface-1);
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: var(--size-9) auto 0;
  padding: var(--size-1) auto 0;
  font-size: 6vw;
  line-height: var(--font-lineheight-1);
  letter-spacing: var(--font-letterspacing-0);
  border-bottom: var(--border-style-medium);
  box-shadow: var(--shadow-1);

  span:nth-child(even) {
    color: var(--brand);
    margin: 0 var(--size-1);
  }

  @media screen and (max-width: 768px) {
    font-size: 10vw;
    padding: var(--size-3) 0;

    span {
      margin: var(--size-000) 0;

      &:nth-child(even) {
        margin: var(--size-000) var(--size-1);
      }
    }
  }
}

.featured-shop {
  width: 100%;
  background-color: var(--surface-3);
  margin-top: var(--size-1);
  padding: var(--size-2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media screen and (max-width: 768px) {
    padding: var(--size-1) 0;
  }
}

.featured-shop__header {
  color: var(--border-color);
  align-self: flex-start;
  display: flex;
  align-items: center;
  margin-left: 6%;

  img {
    width: var(--size-content-3);
    object-fit: contain;
  }

  h2 {
    width: 100%;
    color: var(--text-1);
    text-align: center;
    text-shadow: var(--text-shadow);

    &:hover {
      text-decoration: underline;
    }
  }

  div {
    width: var(--size-header-1);
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: var(--font-letterspacing-0);

    p {
      text-transform: uppercase;
    }
  }

  &:hover {
    color: var(--text-1);

    div p {
      text-decoration: underline;
      text-shadow: var(--text-shadow);
    }
  }

  @media screen and (max-width: 768px) {
    width: 100%;
    flex-flow: column;
    margin: var(--size-1) 0 0;

    h2 {
      text-shadow: unset;
      line-height: var(--font-lineheight-00);
      letter-spacing: var(--font-letterspacing-0);
    }

    img {
      width: 95%;
      margin: auto;
    }

    div {
      color: var(--text-1);
      width: unset;
      margin: calc(var(--size-00) / 2) var(--size-3) calc(var(--size-1));
      padding: 0;
      align-self: end;
      border-bottom: var(--border-style-medium);
      border-color: var(--text-1);
      text-shadow: var(--text-shadow);

      i {
        margin: 0;
      }
    }
  }
}

.product-card-row {
  position: relative;
  width: 95%;
  min-height: var(--size-relative-15);
  display: flex;
  border-radius: var(--border-radius);
  border-color: var(--surface-1);
  overflow-x: auto;
  border-bottom: var(--border-style-thin);
  padding-left: var(--size-1);

  @media screen and (max-width: 768px) {
    width: 100%;
    min-height: calc(var(--size-relative-15) * .80);
    padding: 0;
    border-radius: unset;
    border-right: none;
    border-left: none;
  }
}


.product-card {
  width: calc(var(--size-header-1) * 1.1);
  min-width: calc(var(--size-header-1) * 1.1);
  max-width: calc(var(--size-header-1) * 1.1);
  height: var(--size-relative-15);
  min-height: var(--size-relative-15);
  max-height: var(--size-relative-15);
  margin-right: var(--size-3);
  margin-bottom: var(--size-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--surface-3);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-2);
  border-color: var(--surface-1);

  &:hover {
    box-shadow: var(--shadow-1);
  }

  @media screen and (max-width: 768px) {
    width: 42%;
    min-width: 42%;
    max-width: 42%;
    height: calc(var(--size-relative-15) * .8);
    min-height: calc(var(--size-relative-15) * .8);
    max-height: calc(var(--size-relative-15) * .8);
    margin: 0 1.5% 2%;
  }
}


.product-card-image__link {
  width: 100%;
  height: 65%;
  min-height: 65%;
  max-height: 65%;
  background-color: var(--surface-3);

  div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media screen and (max-width: 768px) {
    height: 60%;
    min-height: 60%;
    max-height: 60%;

    div {
      height: 100%;
    }
  }
}

.product-card__img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  border-radius: var(--border-radius);

  @media screen and (max-width: 768px) {
    flex-grow: 1;
    max-width: 98%;
    max-height: 98%;
  }
}

.product-card-merchant__link {
  display: flex;
  align-items: center;
  margin: calc(var(--size-1) / 2) var(--size-1);
  font-size: var(--font-size-0);
  letter-spacing: var(--font-letterspacing-0);
  line-height: var(--font-lineheight-1);
  align-self: start;

  i {
    margin: 0;
    margin-right: calc(var(--size-1) / 2);
  }

  span {
    border-bottom: var(--border-style-thin);
  }

  &:hover,
  &:active {
    span {
      color: var(--border-color);
    }
  }

  @media screen and (max-width: 768px) {
    font-size: var(--font-size-00);
    font-weight: var(--font-weight-5);

    i {
      font-size: var(--font-size-0);
    }
  }
}

.product-card__link {
  width: 90%;
  flex-grow: 1;
  letter-spacing: var(--font-letterspacing-0);
  line-height: var(--font-lineheight-1);

  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* number of lines to show */
    overflow: hidden;
  }

  &:visited {
    color: var(--blue-8);
  }

  &:hover {
    color: var(--brand);
  }

  @media screen and (max-width: 768px) {
    font-size: calc(var(--font-size-1) * .95);
  }
}

.product-card-price-cart {
  width: 95%;
  margin: 0 auto var(--size-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  @media screen and (max-width: 768px) {
    align-items: flex-end;
  }
}

.product-card-price__label {
  background-color: var(--surface-3);
  cursor: default;
  line-height: var(--font-lineheight-0);
  letter-spacing: var(--font-letterspacing-0);
}

.product-card-add-cart-button {
  background-color: var(--brand);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--size-1) var(--size-1) 0;
  border: var(--border-style-medium);
  border-color: var(--brand);
  border-radius: var(--border-radius);
  letter-spacing: var(--font-letterspacing-0);
  margin-left: 1px;

  &::after {
    content: "Add to Cart"
  }

  i {
    margin: 0 2px 0 0;
  }

  &:hover {
    border-color: var(--surface-2);
    box-shadow: var(--shadow-1);
  }

  &:active {
    color: var(--brand);
    background-color: var(--surface-2);
    border-color: var(--brand);
  }

  @media screen and (max-width: 768px) {
    padding: calc(var(--size-1) / 3) calc(var(--size-1) * 1.5) 0;

    &::after {
      content: "Add"
    }
  }
}

.shop-section-banner-img-container {
  max-width: 95%;
  margin: var(--size-1) auto var(--size-3);
  display: flex;
  flex-flow: row wrap;

  a {
    width: 31%;
    margin: auto;
    border-bottom: var(--border-style-medium);
    border-top: var(--border-style-medium);
    border-color: var(--brand);
    object-fit: contain;
    display: flex;

    &:hover {
      box-shadow: var(--shadow-2);
      cursor: pointer;
    }
  }

  img {
    width: 100%;
    height: 100%;
  }

  .featured-brands-banner__img {
    width: 31%;
    box-shadow: var(--shadow-2);

    @media screen and (max-width: 768px) {
      width: 70%;
      margin: var(--size-1) auto;
    }
  }

  @media screen and (max-width: 768px) {
    width: 99%;

    a {
      width: 47.5%;
      margin: var(--size-1) auto;
      box-shadow: var(--shadow-2);
    }
  }
}

.landing-services-cards {
  background-color: var(--surface-3);
  padding: 2.5% 0;
  display: flex;
  justify-content: space-around;
  align-items: center;

  @media screen and (max-width: 768px) {
    flex-flow: row wrap;
  }
}

.topup-smart-card,
.merchant-vouchers-card {
  width: 22%;
  height: 22vw;
  cursor: pointer;

  img {
    background-color: var(--brand);
    width: 100%;
    height: 100%;
    border-radius: calc(var(--border-radius) * 2);
    box-shadow: var(--shadow-1);
    object-fit: contain;

    &:hover {
      box-shadow: var(--shadow-2);
    }
  }

  @media screen and (max-width: 768px) {
    width: 47.5%;
    height: 47.5vw;

    img {
      box-shadow: var(--shadow-2);
    }
  }
}

.recharge-diaspora-talk-card {
  background-color: var(--surface-2);
  color: var(--text-2);
  width: 22%;
  height: 22vw;
  display: flex;
  position: relative;
  border-radius: calc(var(--border-radius) * 2);
  box-shadow: var(--shadow-2);
  font-weight: var(--font-weight-6);
  line-height: var(--font-lineheight-1);

  div {
    width: 95%;
    max-height: 90vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    letter-spacing: var(--font-letterspacing-0);
    z-index: 2;

    h2,
    p {
      width: 85%;
    }
  }

  @media screen and (max-width: 768px) {
    width: 47.5%;
    height: 47.5vw;
    margin: var(--size-3) auto;
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-00);
    letter-spacing: var(--font-letterspacing-0);
  }
}

.diaspora-talk-card__img {
  background-color: var(--brand);
  position: absolute;
  height: 100%;
  right: -1;
  object-fit: contain;
  z-index: 1;
}

.recharge-diaspora-talk-button {
  width: 100%;
  margin: var(--size-5) auto;

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

  &:hover {
    filter: brightness(125%);
  }

  @media screen and (max-width: 768px) {
    margin: var(--size-1) auto;
  }
}

.landing-services-cards-small {
  width: 21%;
  height: 21vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  h2 {
    letter-spacing: var(--font-letterspacing-0);
  }

  @media screen and (max-width: 768px) {
    width: 47.5%;
    height: 47.5vw;
  }
}

.pay-direct-card,
.runner-requests-card {
  width: 85%;
  max-height: 40%;
  pointer-events: none;
  opacity: 75%;
  filter: brightness(50%);

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

.greenwood-prescription-steps-card {
  width: 90%;
  margin: var(--size-5) auto;
  border: var(--border-style-thin);
  box-shadow: var(--shadow-2);
  border-radius: var(--border-radius);

  img {
    width: 100%;
    object-fit: contain;
    z-index: 1;
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 768px) {
    margin: var(--size-3) auto;
  }
}


.join-today-container {
  background-color: var(--surface-3);
  width: 90%;
  padding: var(--size-5) 5%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: var(--border-style-thin);
}

.join-today-prompt {
  width: 30%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  a {
    background-color: var(--brand);
    padding: var(--size-3);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-1);

    &:hover {
      box-shadow: var(--shadow-2);
      transition: var(--transition);
    }
  }

  @media screen and (max-width: 768px) {
    width: 50%;
    text-align: center;

    a {
      padding: var(--size-2);
    }
  }
}

/* END Landing Page Style  */



/* START Shop Page Style */
.shop-now-main {
  margin: 0 auto;
}

.shop-now-banner {
  margin: auto;
  width: 80%;

  img {
    width: 100%;
  }

  @media screen and (max-width: 768px) {
    width: 99%;
  }
}

.pahukama-shop-cards-section {
  width: 100%;
  margin: var(--size-3) auto;

  @media screen and (max-width: 768px) {
    margin: var(--size-1) auto;
    font-size: var(--font-size-4);
  }
}

.pahukama-shop-now-cards {
  margin: auto;
  width: 95%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.shop-now__link {
  position: relative;
  overflow: hidden;
  width: 30%;
  margin: 1%;
  max-width: var(--size-header-3);
  border: var(--border-style-thick);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    z-index: 0;
  }

  div {
    position: absolute;
    opacity: .75;
    width: 75%;
    height: 50%;
    background-color: var(--surface-1);
    margin: 25% 12%;
    border-radius: var(--radius-3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    text-align: center;
  }

  @media screen and (max-width: 768px) {
    width: 45%;
    margin: var(--size-1) auto;
    box-shadow: none;

    div {
      opacity: .85;
      width: 90%;
      height: 70%;
      margin: 15% 5%;
    }
  }

  &:hover {
    transition: var(--transition);
    box-shadow: var(--shadow-3);

    img {
      transform: scale(1.2);
      filter: blur(var(--border-radius));
    }

    div {
      opacity: .97;
    }
  }
}


/* Merchant Shop Page START */
.merchant-shop-main {
  background-color: var(--surface-3);
  display: flex;
  flex-direction: column;
}

.merchant-shop-banner {
  display: none;

  img {
    flex-grow: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  @media screen and (max-width: 768px) {
    display: flex;
    width: 100%;
    margin: var(--size-2) auto 0;
  }
}

.merchant-shop-filter-section {
  width: 97.5%;
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  margin: auto;
  border-bottom: var(--border-style-thick);

  .merchant-shop-banner {
    display: flex;
    width: auto;
    max-width: 60%;
    height: var(--size-header-2);
    margin: var(--size-1) var(--size-2) 0;
  }

  @media screen and (max-width: 768px) {
    background-color: var(--surface-1);
    width: 100%;
    margin: calc(var(--size-1) / 2) 0 0 0;
    flex-flow: row;
    overflow: auto;
    box-shadow: var(--inner-shadow-3);
    border-bottom: var(--border-style-medium);

    .merchant-shop-banner {
      display: none;
    }
  }
}

.shop-products-sidebar {
  flex-grow: 1;
  min-width: var(--size-content-1);
  max-width: var(--size-content-2);
  max-height: var(--size-header-2);
  margin: var(--size-2) var(--size-1) 0;
  overflow: none;

  @media screen and (max-width: 768px) {
    margin: 0;
    min-width: 65vw;
    max-width: 65vw;
    max-height: var(--size-header-2);
    margin-right: var(--size-1);
  }
}

.filter-group__header {
  flex-grow: 1;
  color: var(--text-2);
  background-color: var(--surface-2);
  padding: var(--size-1) var(--size-2);
  border: var(--border-style-thin);
  box-shadow: var(--shadow-1);
  border-radius: var(--border-radius);

  @media screen and (max-width: 768px) {
    border-radius: unset;
    box-shadow: unset;
  }
}

.filter-group {
  background-color: var(--surface-1);
  flex-grow: 1;
  max-height: var(--size-header-1);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-1);

  &:hover {
    box-shadow: var(--shadow-2);
  }

  @media screen and (max-width: 768px) {
    background-color: var(--surface-3);
    max-height: calc(var(--size-header-1) * .75);
    border-left: none;
    border-right: none;
    border-radius: none;
    padding-bottom: var(--size-1);
    box-shadow: var(--shadow-2);
  }
}

.filter-control {
  display: flex;
  align-items: center;
  margin: 0;
  margin: auto;
  padding: 0 var(--size-2);

  &:has(> .with__count, > :checked) {
    /* put critical filter controls at the top of the group */
    order: -1;
  }
}

.filter-control__input {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */

  color: var(--border-color);
  background-color: var(--surface-1);
  margin: 0;
  height: calc(var(--font-size-1) * .8);
  width: calc(var(--font-size-1) * .8);
  border: var(--border-style-medium);
  border-radius: var(--border-radius);
  box-shadow: inset .5em .5em var(--surface-3);

  &:checked {
    border-color: var(--text-1);
    box-shadow: inset .5em .5em var(--brand);
    transition: var(--transition);
  }

  &:hover:not(:checked) {
    transition: var(--transition);
    border-color: var(--brand);
    cursor: pointer;
  }

  @media screen and (max-width: 768px) {
    height: calc(var(--font-size-1) * .75);
    width: calc(var(--font-size-1) * .75);
    box-shadow: inset .5em .5em var(--surface-1);

    &:checked {
      box-shadow: inset .4em .4em var(--brand);
    }
  }
}

.filter-control__label {
  margin-left: var(--size-2);
  letter-spacing: var(--font-letterspacing-0);
  line-height: var(--font-lineheight-0);
  padding: calc(var(--size-1) * .75) 0;

  &.with__count {
    font-weight: var(--font-weight-5);

    b {
      color: var(--border-color);
      margin-left: var(--size-1);
    }
  }

  &:hover:not(:checked+&) {
    color: var(--brand);
    border-color: var(--brand);
    cursor: pointer;
  }

  :checked+& {
    font-weight: var(--font-weight-7);

    &:hover {
      color: var(--border-color);
    }
  }

  @media screen and (max-width: 768px) {
    margin-left: var(--size-1);
  }
}

.filter-reset-button {
  color: var(--text-2);
  background-color: var(--surface-2);
  width: 60%;
  margin: var(--size-2) 3% 0 30%;
  padding: var(--size-2) 0;
  border-radius: var(--border-radius);

  &:hover {
    color: var(--brand);
    box-shadow: var(--shadow-2);
  }

  @media screen and (max-width: 768px) {
    width: 80%;
    margin: var(--size-1) auto var(--size-1);
  }
}

.merchant-products-section {
  flex-grow: 1;
  max-width: 95%;
  margin: var(--size-4) auto auto;
  display: flex;
  flex-direction: column;

  @media screen and (max-width: 768px) {
    max-width: 100%;
    min-width: 100%;
  }
}

.merchant-products-filter-bar {
  color: var(--text-1);
  width: 95%;
  margin: var(--size-2) auto;
  line-height: var(--font-lineheight-1);
  border-bottom: var(--border-style-thick);

  @media screen and (max-width: 768px) {
    margin: var(--size-1) auto;
    text-align: center;
    padding: 0;
    width: 98%;
  }
}

.product-card-flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  margin-bottom: var(--size-3);

  .product-card {

    @media screen and (max-width: 768px) {
      width: 45%;
      min-width: 45%;
      max-width: 45%;
      margin: var(--size-2) auto;

      &:hover {
        box-shadow: var(--shadow-2);
      }
    }
  }
}

.pagination-buttons {
  width: 100%;
  margin: var(--size-3) auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-top: var(--border-style-thick);
}

.page-button {
  background-color: var(--brand);
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: var(--size-2);
  line-height: var(--font-lineheight-0);

  &:hover {
    color: var(--brand);
    background-color: var(--surface-2);
  }

  @media screen and (max-width: 768px) {
    width: 40%;
  }
}

/* END Shop Style */



/* START Product Page Style */
.main-breadcrumbs {
  background-color: var(--surface-1);
  list-style-type: none;
  margin-top: var(--size-2);
  padding-top: var(--size-4);
  padding-left: var(--size-3);
  border-bottom: var(--border-style-thin);

  @media screen and (max-width: 768px) {
    padding-left: var(--size-2);
    display: flex;
    flex-flow: row wrap;
  }
}

.main__breadcrumb {
  font-size: var(--font-size-0);
  display: inline-flex;
  flex-direction: row;

  a:hover {
    color: var(--brand);
    text-decoration: underline;
  }

  &:last-child {
    font-weight: var(--font-weight-5);
  }

  &:not(:last-child) {
    color: var(--blue-8);
  }
}

.main__breadcrumb:not(:last-child)::after {
  color: var(--text-1);
  margin: 0 var(--size-1);
  content: '/';
  font-weight: var(--font-weight-5);
}

.single-product {
  width: 92.5%;
  min-height: var(--size-content-2);
  max-height: var(--size-content-3);
  overflow: auto;
  margin: var(--size-3) auto 0;
  display: flex;

  @media screen and (max-width: 768px) {
    width: 97.5%;
    flex-direction: column;
    align-items: center;
    min-height: unset;
    max-height: unset;
    height: unset;
  }
}

.product-page-image {
  margin: 1% 2%;
  max-width: 25%;
  min-width: 25%;
  min-height: 100%;
  max-height: var(--size-content-2);
  display: flex;
  flex-flow: row wrap;

  hr {
    width: 100%;
    height: .1px;
    border: var(--border-style-thin);
  }

  @media screen and (max-width: 768px) {
    margin: auto;
    max-width: 90%;
    min-width: 90%;
    max-height: var(--size-header-2);
    flex-flow: row;

    hr {
      margin: auto;
      width: .1px;
      min-height: var(--size-header-2);
      border: var(--border-style-thin);
    }
  }
}

.main-product-image {
  max-height: 70%;
  display: flex;

  img {
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  @media screen and (max-width: 768px) {
    max-width: 65%;
    max-height: 100%;
  }
}

.product-image-mosaic {
  display: flex;
  max-height: 30%;

  img {
    max-width: 50%;
    max-height: 95%;
    background: var(--surface-1);
    padding: var(--size-1);
    border: var(--border-style-thin);
    cursor: pointer;
    object-fit: contain;
  }

  @media screen and (max-width: 768px) {
    max-width: 21%;
    max-height: unset;
    flex-direction: column;

    img {
      max-width: 90%;
      max-height: 30%;
    }
  }
}

.product-page-content {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  .product-content {
    width: 90%;
    margin: auto;
    flex-grow: 1;
  }

  @media screen and (max-width: 768px) {
    width: 95%;

    .product-content {
      width: 100%;
    }
  }
}

.product-shop__header {
  width: 70%;
  background-color: var(--surface-1);
  margin-top: var(--size-2);
  padding: var(--size-1) var(--size-3);
  border-radius: var(--border-radius);
  transform: skew(-20deg);
  line-height: var(--font-lineheight-1);
  z-index: 1;

  span,
  a {
    display: block;
    transform: skew(20deg);
  }

  span {
    margin-bottom: var(--size-00);
    font-weight: var(--font-weight-5);
    letter-spacing: var(--font-letterspacing-0);
  }

  a {
    &:hover {
      color: var(--brand);
    }
  }

  @media screen and (max-width: 768px) {
    margin-left: var(--size-2);
    font-size: var(--font-size-0);

    a {
      font-size: var(--font-size-2);
    }
  }
}

.product__title {
  margin-top: var(--size-1);
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-7);
  line-height: var(--font-lineheight-0);
  letter-spacing: var(--font-letterspacing-0);

  @media screen and (max-width: 768px) {
    margin-left: var(--size-1);
    font-size: var(--font-size-5);
  }
}

.product-category {
  width: 85%;
  margin: 0 auto var(--size-3) auto;

  span {
    margin-right: var(--size-1);
    font-weight: var(--font-weight-5);
    letter-spacing: var(--font-letterspacing-0);
  }

  @media screen and (max-width: 768px) {
    margin-bottom: var(--size-1);
    font-size: var(--font-size-0);
  }
}

.product-page-price-cart {
  display: flex;
  width: 100%;
}

.product-price {
  width: 50%;
  padding: var(--size-3) 0;
  border-right: var(--border-style-medium);
  text-align: center;

  @media screen and (max-width: 768px) {
    width: 60%;
    font-size: var(--font-size-6);
    font-weight: var(--font-weight-7);
  }
}

.product-btn-group {
  display: flex;
  width: 40%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: var(--size-3);

  div,
  button {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--size-header-1);
  }

  span {
    margin-top: var(--size-2);
    margin-bottom: 0;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-6);
    border-bottom: var(--border-style-medium);
    color: var(--border-color);
    text-transform: uppercase;
    line-height: var(--font-lineheight-0);
    letter-spacing: var(--font-letterspacing-0);
  }

  i {
    font-size: var(--font-size-5);
  }

  @media screen and (max-width: 768px) {
    width: 55%;
    padding-bottom: var(--size-1);
  }
}


.quantity-input {
  width: calc(var(--size-header-1) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--size-1);
}

.quantity-input button {
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: var(--font-size-6);
  line-height: var(--font-lineheight-1);
  pointer-events: all;

  &:disabled {
    color: var(--border-color);
    pointer-events: none;
  }

  &:hover {
    color: var(--border-color);
  }

  &:active {
    color: var(--brand);
  }
}

.quantity-input .quantity {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  max-width: 4rem;
  border: none;
  line-height: var(--font-lineheight-1);
  text-align: center;
  pointer-events: none;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
}

.product-page-add-cart-button {
  flex-grow: 1;
  background-color: var(--brand);
  padding: var(--size-1) var(--size-2);
  margin-top: var(--size-3);
  border: var(--border-style-medium);
  border-radius: var(--border-radius);
  line-height: var(--font-lineheight-2);

  i {
    font-size: var(--font-size-4);
  }

  &::after {
    content: "Add to Cart"
  }

  &:hover {
    border-color: var(--surface-2);
    box-shadow: var(--shadow-2);
    font-weight: var(--font-weight-6);
    transition: var(--transition);
  }

  @media screen and (max-width: 768px) {
    margin: var(--size-1);
    background-color: var(--brand);

    i {
      font-size: var(--font-size-3);
    }
  }
}

.product-details {
  width: 100%;

  h3 {
    text-decoration: underline;
    letter-spacing: var(--font-letterspacing-0);
  }
}

.product__detail {
  margin: var(--size-1) var(--size-3);

  &.product__description {
    font-size: var(--font-size-2);
    font-weight: var(--font-size-5);
    margin-bottom: var(--size-1);
    line-height: var(--font-lineheight-1);
  }

  &.product__sku {
    font-size: var(--font-size-00);
    margin: var(--size-4) var(--size-2);
    letter-spacing: var(--font-letterspacing-0);

    &:before {
      content: "SKU: ";
      font-weight: var(--font-weight-7);
    }
  }
}

.metadata-block {
  background-color: var(--surface-1);
  margin: 5% 1%;
  min-width: 25%;
  max-width: var(--size-content-1);
  flex-grow: 1;
  align-self: flex-start;

  @media screen and (max-width: 768px) {
    margin: 1% auto 2%;
    max-width: 80%;
  }
}

.metadata-content {
  display: flex;
  margin: var(--size-3) var(--size-1);
  align-items: center;
  font-weight: var(--font-weight-3);
  line-height: var(--font-lineheight-0);

  i {
    margin: 0 var(--size-2) 0 var(--size-1);
    font-size: var(--font-size-5);
  }

  @media screen and (max-width: 768px) {
    margin: var(--size-1) var(--size-3);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-4);

    i {
      font-size: var(--font-size-4);
    }
  }
}

.more-products {
  width: 100%;
  margin: var(--size-5) auto 0;
  background-color: var(--surface-3);

  .more-products__header {
    background-color: var(--surface-1);
    width: 100%;
    margin: auto;
    padding: var(--size-2) 0 var(--size-1);
    letter-spacing: var(--font-letterspacing-0);
    text-indent: var(--size-3);
  }

  .featured-shop__header {
    margin-top: var(--size-1);

    img {
      display: none;
    }
  }

  .product-card-row {
    min-height: calc(var(--size-relative-15) * .90);
  }

  .product-card {
    height: calc(var(--size-relative-15) * .85);
    min-height: calc(var(--size-relative-15) * .85);
    max-height: calc(var(--size-relative-15) * .85);
  }

  .product-card-merchant__link {
    display: none;
  }

  @media screen and (max-width: 768px) {
    height: var(--size-header-3);

    .featured-shop {
      h2 {
        font-size: var(--font-size-5);
      }

      div {
        font-size: var(--font-size-2);
      }
    }

    .product-card-row {
      min-height: calc(var(--size-relative-15) * .70);
    }

    .product-card {
      height: calc(var(--size-relative-15) * .65);
      min-height: calc(var(--size-relative-15) * .65);
      max-height: calc(var(--size-relative-15) * .65);
    }

    .product-card__link {
      margin-top: var(--size-2);
    }

    .product-card-price-cart {
      margin: var(--size-1);
    }
  }
}

/* END Product Page Style */

/* Digital Services Pages Style */
.digital-service-main {
  background-color: var(--surface-1);

  .form-container {
    background-color: var(--surface-3);
  }

  .diaspora-talk-balance {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .number-amount-select {
    margin-left: 5%;
    margin-top: var(--size-1);
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-5);
  }
}

.digital-service-banner {
  background-color: var(--surface-3);
  width: 100%;

  img {
    width: 100%;
    max-width: calc(1024px * .9);
    display: block;
    margin: auto;
  }

  @media screen and (max-width: 768px) {
    img {
      width: 100%;
    }
  }
}

.digital-service-description {
  width: 50%;
  margin: var(--size-5) auto;
  text-align: center;

  @media screen and (max-width: 768px) {
    width: 90%;
    margin: var(--size-3) auto;
    font-weight: var(--font-weight-5);
    line-height: var(--font-lineheight-1);
    letter-spacing: var(--font-letterspacing-0);
  }
}

.bundle-details-label {
  line-height: var(--font-lineheight-5);
}

.topup-smart-radio-field {
  display: flex;
  flex-grow: 1;
  height: 15ch;
  padding: var(--size-2);

  input[type=radio] {
    display: none;

    ~label {
      cursor: pointer;
    }
  }

  input[type="radio"]:checked+label {
    background: var(--surface-2);
    color: var(--text-2);

    b {
      color: var(--brand);
    }
  }
}

.topup-smart-radio-field-label {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--surface-1);
  border: var(--border-style-medium);
  border-radius: var(--border-radius);
  position: relative;

  span,
  b {
    text-align: center;
    margin: 0 var(--size-1);
  }

  &:hover {
    color: var(--text-2);
    background-color: 5var(--border-color);
  }
}

.digital-service-card {
  width: var(--size-header-2);
  padding: var(--size-3);
  margin: var(--size-1) auto;
  border-radius: var(--border-radius);

  p {
    display: block;
    margin: calc(var(--size-1) /2) auto;
    text-align: center;
    border-radius: var(--border-radius);
  }

  .digital-service-card-price {
    color: var(--brand);
    background-color: var(--surface-2);
  }

  .digital-service-card-name {
    color: var(--text-2);
    background-color: var(--surface-2);
    padding: var(--size-2) 0;
  }

  .digital-service-card-description {
    background-color: var(--surface-1);
    padding: var(--size-3) 0;
    font-weight: var(--font-weight-5);
  }
}

.order-now-button {
  display: block;
  background-color: var(--surface-1);
  width: var(--size-header-1);
  padding: var(--size-3);
  margin: var(--size-5) auto;
  border: var(--border-size-3) solid var(--brand);
  border-radius: var(--border-radius);
  line-height: var(--font-lineheight-1);

  &:hover {
    transition: var(--transition);
    color: var(--text-2);
    background-color: var(--surface-2);
    border-color: var(--surface-2);
    box-shadow: var(--shadow-1);
    font-weight: var(--font-weight-6);
  }
}

.digital-service-tab {
  display: flex;
  width: var(--size-header-1);
  padding: var(--size-1);
  color: var(--border-color);
  border-bottom: var(--border-size-2) solid var(--text-1);

  p {
    width: 100%;
    text-align: center;
    color: var(--text-1);
    cursor: pointer;
    padding: var(--size-2) 0;
    line-height: var(--font-lineheight-0);
  }

  &:hover,
  :active {
    background-color: var(--surface-1);
  }

  &.show-form {
    border-top: var(--border-size-2) solid var(--text-1);
    border-right: var(--border-size-2) solid var(--text-1);
    border-left: var(--border-size-2) solid var(--text-1);
    border-bottom: none;
    pointer-events: none;

    p {
      font-weight: var(--font-weight-6);
    }
  }
}

.tab-form-content-container {
  display: none;

  &.show-form {
    display: block;
  }
}

.merchant-voucher-container {
  display: flex;
  flex-direction: row wrap;
  justify-content: space-around;
  align-items: start;

  .check-balance-jump {
    display: none;
  }

  .form-container {
    flex-basis: 40%;
    margin: 0 auto;
  }

  .balance-form-container {
    flex-basis: 40%;
    margin: 0 auto;
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;

    .form-container {
      flex-basis: 40%;
      margin: 0 auto;
    }

    .check-balance-jump {
      background-color: var(--surface-2);
      color: var(--brand);
      display: initial;
      width: 100vw;
      margin: 0;
      line-height: var(--font-lineheight-5);
      text-align: center;

      &:hover,
      &:active {
        opacity: .8;
      }
    }

    .balance-form-container {
      margin: var(--size-5) auto;
      padding: var(--size-5) 0;
    }
  }
}

.balance-form-container {
  background-color: var(--surface-1);
  padding: var(--size-1);
  border-bottom: var(--border-style-thin);
  border-top: var(--border-style-thin);

  .submit__button {
    max-width: 80%;
    width: 80%;
    padding: var(--size-4) var(--size-7);
    margin: var(--size-4) auto var(--size-1);
  }
}