sempli-website-lib 7.1.0-beta.2 → 7.1.0-beta.4

package/styles/partials/app/_my-products.scss

@@ -1,1019 +1,1019 @@
-/*#############################################################################
-# MY PRODUCTS
-#############################################################################*/
-
-
-// Products Box Base Styles
-// To be extended
-.my-products-base-box {
-  background-color: #fff;
-  padding: 20px 30px;
-  @include border-radius(4px);
-  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
-}
-
-.my-products-list-wrapper {
-  max-width: 1000px;
-  margin: 0 auto;
-
-  .product-box {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr) 120px;
-    justify-items: center;
-    margin: 0 0 20px;
-    @extend .my-products-base-box;
-    // @extend %transition-all;
-
-    @include responsive-max($breakpoint-small) {
-      grid-template-columns: none;
-      grid-gap: 1rem;
-
-      .credit-id {
-        justify-self: center !important;
-      }
-
-      .product-box-column {
-        padding: 0 !important;
-        text-align: center !important;
-
-        .product-box-title {
-          margin: 0;
-        }
-      }
-
-      .credit-actions {
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        margin-top: 20px;
-        a.product-box-action {
-          opacity: 1;
-
-          &.small {
-            font-weight: 900;
-            padding: 10px 20px;
-          }
-        }
-      }
-    }
-
-    &:last-child {
-      margin: 0;
-    }
-
-    // General Box Columns
-    .product-box-column {
-      padding: 0 20px;
-
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-
-    // Specific Box Columns
-    .credit-id {
-      justify-self: start;
-    }
-
-    // Content Elements
-
-    .product-box-title {
-      color: $color-secondary;
-      font-size: rem-calc(10px);
-      text-transform: uppercase;
-      margin: 0 0 10px;
-    }
-
-    .product-box-content {
-      font-size: rem-calc(14px);
-      margin: 0;
-    }
-
-    .product-box-credit-amount {
-      font-size: rem-calc(20px);
-      margin: 0;
-    }
-
-    .progress-bar {
-      min-width: 120px;
-      margin-top: 18px;
-    }
-
-    .product-box-payment-status {
-      font-size: rem-calc(12px);
-      font-weight: 900;
-      margin: 0;
-    }
-
-    a.product-box-action {
-      display: block;
-      opacity: 0;
-      font-size: rem-calc(12px);
-      text-align: center;
-      margin: 0 0 12px;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
-
-    // HOVER STATE
-
-    &:hover {
-      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));
-
-      a.product-box-action {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-header.product-details {
-  margin: 0 0 40px;
-
-  .product-details-id {
-    color: $color-secondary;
-    font-size: rem-calc(14px);
-    text-transform: uppercase;
-    margin: 0;
-  }
-
-  .product-details-amount {
-    font-size: rem-calc(28px);
-    margin: 0 0 30px;
-  }
-
-  // Secondary Info container
-  .secondary-product-info {
-    display: flex;
-    flex-flow: row wrap;
-
-    .product-info-box {
-      margin-right: 70px;
-    }
-
-    // Content Elements
-    .product-info-title {
-      color: $color-secondary;
-      font-size: rem-calc(12px);
-      text-transform: uppercase;
-      margin: 0;
-    }
-
-    .product-info-value {
-      font-size: rem-calc(14px);
-      font-weight: 900;
-      margin: 0;
-    }
-  }
-}
-
-.product-details-wrapper {
-  display: grid;
-  grid-template-columns: 1fr 360px;
-  grid-column-gap: 30px;
-  margin: 0 0 40px;
-
-  @include responsive-max($breakpoint-small) {
-    grid-template-columns: none;
-    grid-gap: 1rem;
-  }
-
-  &:last-child {
-    margin: 0;
-  }
-
-  // Product Details Box Structure Elements
-  .product-details-box {
-    @extend .my-products-base-box;
-    min-height: 500px;
-    padding: 0;
-
-    header.product-details-header {
-      padding: 20px 20px 0;
-      border-bottom: 1px solid $color-secondary-light;
-
-      nav {
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: space-evenly;
-
-        a {
-          color: $color-secondary;
-          font-size: rem-calc(14px);
-          padding: 0 5px 15px;
-
-          @include responsive-max($breakpoint-small) {
-            width: 50%;
-            text-align: center;
-            margin-bottom: 15px;
-          }
-
-          &.active {
-            border-bottom: 2px solid $color-primary;
-            color: $color-primary;
-            font-weight: 900;
-          }
-
-          &:hover {
-            color: darken($color-secondary, 20%);
-          }
-        }
-      }
-    }
-
-    .box-content {
-      padding: 30px;
-
-      .col {
-        &:first-child {
-          padding: 0 30px 0 20px;
-        }
-
-        &:last-child {
-          padding: 0 20px 0 30px;
-        }
-      }
-    }
-
-    footer.product-details-footer {
-      border-top: 1px solid $color-secondary-light;
-      padding: 20px 60px;
-      @include border-bottom-radius(4px);
-
-      a {
-        display: inline-block;
-        font-size: rem-calc(14px);
-        font-weight: 900;
-      }
-    }
-  }
-
-  // Content Elements
-
-  h5.payments-table-title {
-    font-size: rem-calc(14px);
-    margin: 0 0 20px;
-  }
-
-  header.payment-details-header {
-    margin-bottom: 20px;
-    @include pie-clearfix;
-
-    h6 {
-      font-size: rem-calc(14px);
-      margin: 0;
-      @include float(left);
-    }
-
-    p {
-      color: $color-secondary;
-      font-size: rem-calc(14px);
-      font-weight: 900;
-      margin: 0;
-      @include float(right);
-    }
-  }
-
-  a.next-installment-pay {
-    display: block;
-    text-align: center;
-    margin: 30px 0;
-  }
-
-  p.next-installment-text {
-    font-size: rem-calc(12px);
-    margin: 0;
-  }
-
-  footer.next-installment {
-    border-top: 1px solid $color-secondary-light;
-    margin-top: 15px;
-    padding-top: 15px;
-
-    p {
-      font-size: rem-calc(12px);
-      margin: 0;
-
-      a {
-        font-weight: bold;
-      }
-    }
-  }
-
-  p.payment-simulator {
-    font-size: rem-calc(14px);
-    margin: 20px 0 0;
-    padding: 0 20px;
-  }
-}
-
-ul.payments-table {
-  border-bottom: 1px solid $color-secondary-light;
-  list-style: none;
-  margin: 0 0 15px;
-  padding: 0 0 15px;
-
-  li {
-    margin: 0 0 10px;
-    padding-left: 15px;
-    position: relative;
-    @include pie-clearfix;
-
-    &:last-child {
-      margin: 0;
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      background-color: $color-primary;
-      width: 5px;
-      height: 5px;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      @include border-radius(10px);
-      @include transform(translateY(-50%));
-
-    }
-  }
-
-  &.no-decoration {
-    li {
-      padding-left: 0;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-}
-
-ul.payments-history {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 30px;
-    align-items: center;
-    border-bottom: 1px solid $color-secondary-light;
-    padding: 10px 0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .history-box {
-      span {
-        display: block;
-
-        &.installment {
-          color: $color-secondary;
-          font-size: rem-calc(12px);
-        }
-
-        &.date {
-          font-size: rem-calc(14px);
-        }
-
-        &.amount {
-          font-size: rem-calc(14px);
-          font-weight: 900;
-          text-align: right;
-
-          &.penalty {
-            color: $color-alert;
-            font-size: rem-calc(12px);
-            font-weight: 400;
-          }
-        }
-      }
-
-      &.left {
-        justify-self: start;
-      }
-
-      &.right {
-        justify-self: end;
-      }
-    }
-  }
-}
-
-ul.statements-history {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    display: grid;
-    grid-template-columns: 24px 1fr 1fr;
-    grid-column-gap: 15px;
-    align-items: center;
-    border-bottom: 1px solid $color-secondary-light;
-    padding: 10px 0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    img.icon {
-      display: block;
-      width: 100%;
-    }
-
-    .history-box {
-      span {
-        display: block;
-
-        &.statement {
-          color: $color-secondary;
-          font-size: rem-calc(12px);
-        }
-
-        &.date {
-          font-size: rem-calc(14px);
-        }
-
-        &.actions {
-          font-size: rem-calc(14px);
-          font-weight: 900;
-          text-align: right;
-        }
-      }
-
-      &.left {
-        justify-self: start;
-      }
-
-      &.right {
-        justify-self: end;
-      }
-    }
-  }
-}
-
-ul.documents-history {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    display: grid;
-    grid-template-columns: 24px 1fr 1fr;
-    grid-column-gap: 15px;
-    align-items: center;
-    border-bottom: 1px solid $color-secondary-light;
-    padding: 10px 0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    img.icon {
-      display: block;
-      width: 100%;
-    }
-
-    .history-box {
-      span {
-        display: block;
-
-        &.document {
-          font-size: rem-calc(14px);
-        }
-
-        &.file-size {
-          color: $color-secondary;
-          font-size: rem-calc(12px);
-        }
-
-        &.actions {
-          font-size: rem-calc(14px);
-          font-weight: 900;
-          text-align: right;
-        }
-      }
-
-      &.left {
-        justify-self: start;
-      }
-
-      &.right {
-        justify-self: end;
-      }
-    }
-  }
-}
-
-span.payments-table-item-title {
-  font-size: rem-calc(12px);
-  font-weight: 900;
-  @include float(left);
-}
-
-span.payments-table-item-value {
-  font-size: rem-calc(12px);
-  @include float(right);
-}
-
-.payments-table-totals {
-  @include pie-clearfix;
-
-  span.item-title {
-    font-size: rem-calc(13px);
-  }
-
-  span.item-value {
-    font-size: rem-calc(13px);
-    font-weight: 900;
-  }
-
-  &.large {
-    span {
-      font-size: rem-calc(14px);
-    }
-  }
-}
-
-p.payment-simulation-result {
-  font-size: rem-calc(14px);
-  margin-top: 30px;
-}
-
-// Products Box Base Styles
-.virtual-card-section {
-  padding: 50px 60px 0;
-  margin-bottom: 30px;
-  background-color: #fff;
-  border: 1px solid #E9EAEA;
-  @include box-shadow(-10px 10px 20px 0 rgba( black, 0.05));
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-column-gap: 6rem;
-
-  .card-section {
-    .credit-card-container {
-      display: flex;
-      flex-flow: column-reverse nowrap;
-      align-items: center;
-
-      .v-card {
-        width: 85.60mm;
-        height: 52.98mm;
-        border-radius: 20px;
-        margin-bottom: 0;
-        -moz-box-shadow: -3px 6px 12px #4d4c4d;
-        -webkit-box-shadow: -3px 6px 12px #4d4c4d;
-        box-shadow: -3px 6px 12px #4d4c4d;
-        -webkit-transform-style: preserve-3d;
-        transform-style: preserve-3d;
-        transition: -webkit-transform 0.6s;
-        -webkit-transition: -webkit-transform 0.6s;
-        transition: transform 0.6s, -webkit-transform 0.6s;
-        cursor: pointer;
-
-        &.disabled {
-          cursor: not-allowed;
-        }
-
-        .disabled-layer {
-          width: 100%;
-          height: 102%;
-          position: absolute;
-          z-index: 2;
-          background-color: $default-color-hover;
-          opacity: 0.6;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 17px 17px 14px 16px;
-
-          .icon {
-            width: 72px;
-          }
-        }
-
-        .front {
-          display: flex;
-          flex-flow: nowrap column;
-          position: absolute;
-          width: 85.6mm;
-          height: 53.98mm;
-          -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-          -webkit-font-smoothing: antialiased;
-          background-size: contain;
-          padding: 10px;
-
-          .credit-card-data {
-            color: #CBCECE;
-            height: 100%;
-            display: flex;
-            align-items: flex-end;
-
-            .person-data {
-              margin: 0 28px;
-              font-size: rem-calc(12px);
-              .name {
-                font-weight: 600;
-                font-family: 'Montserrat', serif;
-              }
-            }
-          }
-        }
-
-        .back {
-          position: absolute;
-          width: 85.6mm;
-          height: 53.98mm;
-          -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-          -webkit-font-smoothing: antialiased;
-          background-size: contain;
-          -webkit-transform: rotateY(180deg);
-          transform: rotateY(180deg);
-          padding: 10px;
-
-          .white-space {
-            height: 30%;
-          }
-
-          .card-data-back {
-            color: #CBCECE;
-            position: relative;
-            height: 70%;
-            font-family: 'Karla', serif;
-
-            .pan {
-              letter-spacing: 1px;
-              font-size: rem-calc(15px);
-              text-align: center;
-              font-weight: 600;
-              height: 70%;
-              display: flex;
-              align-items: flex-end;
-              justify-content: center;
-            }
-
-            .security-data {
-              display: flex;
-              flex-flow: row nowrap;
-              height: 30%;
-              justify-content: flex-end;
-              align-items: flex-end;
-              margin-right: 17%;
-
-              .title {
-                letter-spacing: 0.5px;
-                font-size: 10px;
-              }
-
-              .data {
-                font-size: rem-calc(12px);
-              }
-
-              .exp-date-wrapper {
-                margin-right: 10px;
-              }
-            }
-          }
-        }
-
-
-        &.flipped {
-          -webkit-transform: rotateY(180deg);
-          transform: rotateY(180deg);
-          box-shadow: 9px 9px 12px #4d4c4d;
-        }
-      }
-
-      .cta-secction {
-        margin: 0 0 10px;
-        display: flex;
-
-        .button {
-          margin: 0 10px;
-        }
-
-        .view-card-information {
-          font-size: rem-calc(12px);
-          font-weight: 900;
-          cursor: pointer;
-          color: $color-primary;
-        }
-
-        .status-container {
-          width: fit-content;
-          animation: heartbeat 1s 6;
-
-          .card-status-details {
-            font-size: rem-calc(12px);
-            font-weight: bold;
-          }
-        }
-
-        .count-down-hide-data {
-          font-size: rem-calc(12px);
-        }
-      }
-    }
-
-    .credit-card-footer-message {
-      display: flex;
-      justify-content: center;
-      p {
-        margin-top: 15px;
-        font-size: rem-calc(12px);
-      }
-    }
-  }
-
-  .summary-section {
-    display: flex;
-    flex-direction: column;
-
-    .tab {
-      .accordion-control {
-        display: none;
-      }
-
-      .accordion-label {
-        display: none;
-      }
-    }
-
-    .credit-card-summary {
-      display: flex;
-      justify-content: space-around;
-      flex-flow: row wrap;
-
-      .section-separator {
-        border-right: 1px solid #afb3c07d;
-      }
-
-      .separator-line {
-        border-bottom: 1px solid #afb3c07d;
-        margin: 15px 0px;
-        width: 100%;
-      }
-
-      .title {
-        color: $color-secondary;
-        font-size: rem-calc(12px);
-        margin-bottom: 0;
-      }
-
-      section.main-summary {
-        .description {
-          font-size: rem-calc(14px);
-          font-weight: 900;
-        }
-      }
-
-      section.summary-cta {
-        margin-top: 20px;
-        font-size: 14px !important;
-      }
-
-      section.secondary-summary {
-        .description {
-          font-size: rem-calc(12px);
-          font-weight: 900;
-        }
-      }
-    }
-
-    .summary-footer {
-      display: flex;
-      align-items: center;
-      height: 100%;
-      justify-content: space-around;
-
-      .toggle-button-with-label {
-        .onoffswitch {
-          margin-left: 10px;
-        }
-      }
-    }
-  }
-
-  @include responsive-max($breakpoint-xlarge) {
-    padding: 0;
-    grid-template-columns: 1fr;
-
-    .card-section {
-      .credit-card-container {
-        .v-card {
-          display: flex;
-          justify-content: center;
-          width: auto;
-          height: 40.98mm;
-
-          .disabled-layer {
-            width: 65.6mm;
-            height: 40.98mm;
-            border-radius: 10px;
-            .icon {
-              width: 48px;
-            }
-          }
-
-          .front {
-            width: 65.6mm;
-            height: 40.98mm;
-
-            .credit-card-data {
-              .person-data {
-                margin: 0 10px;
-                font-size: rem-calc(10px);
-              }
-            }
-          }
-
-          .back {
-            width: 65.6mm;
-            height: 40.98mm;
-          }
-        }
-
-        .cta-secction {
-          margin: 20px 0 10px;
-
-          .button {
-            font-size: rem-calc(12px);
-          }
-        }
-      }
-
-      .credit-card-footer-message {
-        display: flex;
-        justify-content: center;
-
-        p {
-          margin-left: unset;
-        }
-      }
-    }
-
-    .summary-section {
-      /* Accordion styles */
-      .tab {
-        .accordion-label {
-          cursor: pointer;
-          display: block;
-        }
-
-        .accordion_container {
-          &:first-of-type {
-            border-top-left-radius: 20px;
-            border-top-right-radius: 20px;
-          }
-
-          &:last-of-type {
-            border-bottom-left-radius: 20px;
-            border-bottom-right-radius: 20px;
-            border-bottom: none;
-          }
-        }
-
-        .accordion-content {
-          /* Height animation:
-          only really works well if the height is close to content - too high and the animation still goes to the max-height number, messing up the timing
-          For widely variable height content, best not to animate. Switch display attribute instead */
-          max-height: 0;
-          overflow: hidden;
-          transition: max-height 0.2s;
-          background-size: 260px;
-          background-repeat: no-repeat;
-          background-position: center;
-        }
-
-        .accordion-control {
-          display: none;
-
-          + label {
-            position: relative;
-            height: 40px;
-            margin: 0 15px 0 24px;
-            display: block;
-            font-family: arial, serif;
-            font-size: 1em;
-            line-height: 1em;
-            z-index: 0;
-
-            &:before {
-              content: attr(data-label-closed);
-              display: contents;
-              position: relative;
-            }
-
-            &::after {
-              right: 0;
-              content: "❯";
-              margin-right: 8px;
-              height: 1em;
-              text-align: center;
-              transition: all 0.35s;
-              position: absolute;
-            }
-          }
-
-          &:checked {
-            + label {
-              cursor: pointer;
-
-              &:before {
-                content: attr(data-label-open);
-              }
-
-              &:after {
-                transform: rotate(90deg);
-              }
-
-              + .accordion-content {
-                max-height: 450px;
-              }
-            }
-          }
-
-          &[type="radio"] {
-            + label {
-              &:before,
-              &:after {
-                content: '';
-              }
-            }
-
-            &:checked {
-              + label {
-                cursor: default;
-
-                &:before {
-                  border-left-color: #999;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .credit-card-summary {
-        flex-flow: column nowrap;
-        padding: 0 20px;
-
-        .summary-sections {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .summary-cta {
-          display: flex;
-          justify-content: flex-end;
-        }
-
-        .separator-line {
-          margin: 0;
-          width: 0;
-        }
-
-        .section-separator {
-          border-right: unset;
-          border-bottom: 1px solid #afb3c07d;
-          margin: 15px 0;
-        }
-      }
-
-      .summary-footer {
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        gap: 10px;
-        margin: 20px 20px;
-
-        .toggle-button-with-label {
-          padding-top: unset;
-        }
-      }
-    }
-  }
-
-  @include responsive-max($breakpoint-medium) {
-    .summary-section {
-      .summary-footer {
-        align-items: flex-end;
-        gap: 18px;
-        flex-direction: column;
-      }
-    }
-  }
-}
+/*#############################################################################
+# MY PRODUCTS
+#############################################################################*/
+
+
+// Products Box Base Styles
+// To be extended
+.my-products-base-box {
+  background-color: #fff;
+  padding: 20px 30px;
+  @include border-radius(4px);
+  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
+}
+
+.my-products-list-wrapper {
+  max-width: 1000px;
+  margin: 0 auto;
+
+  .product-box {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr) 120px;
+    justify-items: center;
+    margin: 0 0 20px;
+    @extend .my-products-base-box;
+    // @extend %transition-all;
+
+    @include responsive-max($breakpoint-small) {
+      grid-template-columns: none;
+      grid-gap: 1rem;
+
+      .credit-id {
+        justify-self: center !important;
+      }
+
+      .product-box-column {
+        padding: 0 !important;
+        text-align: center !important;
+
+        .product-box-title {
+          margin: 0;
+        }
+      }
+
+      .credit-actions {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        margin-top: 20px;
+        a.product-box-action {
+          opacity: 1;
+
+          &.small {
+            font-weight: 900;
+            padding: 10px 20px;
+          }
+        }
+      }
+    }
+
+    &:last-child {
+      margin: 0;
+    }
+
+    // General Box Columns
+    .product-box-column {
+      padding: 0 20px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    // Specific Box Columns
+    .credit-id {
+      justify-self: start;
+    }
+
+    // Content Elements
+
+    .product-box-title {
+      color: $color-secondary;
+      font-size: rem-calc(10px);
+      text-transform: uppercase;
+      margin: 0 0 10px;
+    }
+
+    .product-box-content {
+      font-size: rem-calc(14px);
+      margin: 0;
+    }
+
+    .product-box-credit-amount {
+      font-size: rem-calc(20px);
+      margin: 0;
+    }
+
+    .progress-bar {
+      min-width: 120px;
+      margin-top: 18px;
+    }
+
+    .product-box-payment-status {
+      font-size: rem-calc(12px);
+      font-weight: 900;
+      margin: 0;
+    }
+
+    a.product-box-action {
+      display: block;
+      opacity: 0;
+      font-size: rem-calc(12px);
+      text-align: center;
+      margin: 0 0 12px;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+
+    // HOVER STATE
+
+    &:hover {
+      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));
+
+      a.product-box-action {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+header.product-details {
+  margin: 0 0 40px;
+
+  .product-details-id {
+    color: $color-secondary;
+    font-size: rem-calc(14px);
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .product-details-amount {
+    font-size: rem-calc(28px);
+    margin: 0 0 30px;
+  }
+
+  // Secondary Info container
+  .secondary-product-info {
+    display: flex;
+    flex-flow: row wrap;
+
+    .product-info-box {
+      margin-right: 70px;
+    }
+
+    // Content Elements
+    .product-info-title {
+      color: $color-secondary;
+      font-size: rem-calc(12px);
+      text-transform: uppercase;
+      margin: 0;
+    }
+
+    .product-info-value {
+      font-size: rem-calc(14px);
+      font-weight: 900;
+      margin: 0;
+    }
+  }
+}
+
+.product-details-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  grid-column-gap: 30px;
+  margin: 0 0 40px;
+
+  @include responsive-max($breakpoint-small) {
+    grid-template-columns: none;
+    grid-gap: 1rem;
+  }
+
+  &:last-child {
+    margin: 0;
+  }
+
+  // Product Details Box Structure Elements
+  .product-details-box {
+    @extend .my-products-base-box;
+    min-height: 500px;
+    padding: 0;
+
+    header.product-details-header {
+      padding: 20px 20px 0;
+      border-bottom: 1px solid $color-secondary-light;
+
+      nav {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-evenly;
+
+        a {
+          color: $color-secondary;
+          font-size: rem-calc(14px);
+          padding: 0 5px 15px;
+
+          @include responsive-max($breakpoint-small) {
+            width: 50%;
+            text-align: center;
+            margin-bottom: 15px;
+          }
+
+          &.active {
+            border-bottom: 2px solid $color-primary;
+            color: $color-primary;
+            font-weight: 900;
+          }
+
+          &:hover {
+            color: darken($color-secondary, 20%);
+          }
+        }
+      }
+    }
+
+    .box-content {
+      padding: 30px;
+
+      .col {
+        &:first-child {
+          padding: 0 30px 0 20px;
+        }
+
+        &:last-child {
+          padding: 0 20px 0 30px;
+        }
+      }
+    }
+
+    footer.product-details-footer {
+      border-top: 1px solid $color-secondary-light;
+      padding: 20px 60px;
+      @include border-bottom-radius(4px);
+
+      a {
+        display: inline-block;
+        font-size: rem-calc(14px);
+        font-weight: 900;
+      }
+    }
+  }
+
+  // Content Elements
+
+  h5.payments-table-title {
+    font-size: rem-calc(14px);
+    margin: 0 0 20px;
+  }
+
+  header.payment-details-header {
+    margin-bottom: 20px;
+    @include pie-clearfix;
+
+    h6 {
+      font-size: rem-calc(14px);
+      margin: 0;
+      @include float(left);
+    }
+
+    p {
+      color: $color-secondary;
+      font-size: rem-calc(14px);
+      font-weight: 900;
+      margin: 0;
+      @include float(right);
+    }
+  }
+
+  a.next-installment-pay {
+    display: block;
+    text-align: center;
+    margin: 30px 0;
+  }
+
+  p.next-installment-text {
+    font-size: rem-calc(12px);
+    margin: 0;
+  }
+
+  footer.next-installment {
+    border-top: 1px solid $color-secondary-light;
+    margin-top: 15px;
+    padding-top: 15px;
+
+    p {
+      font-size: rem-calc(12px);
+      margin: 0;
+
+      a {
+        font-weight: bold;
+      }
+    }
+  }
+
+  p.payment-simulator {
+    font-size: rem-calc(14px);
+    margin: 20px 0 0;
+    padding: 0 20px;
+  }
+}
+
+ul.payments-table {
+  border-bottom: 1px solid $color-secondary-light;
+  list-style: none;
+  margin: 0 0 15px;
+  padding: 0 0 15px;
+
+  li {
+    margin: 0 0 10px;
+    padding-left: 15px;
+    position: relative;
+    @include pie-clearfix;
+
+    &:last-child {
+      margin: 0;
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      background-color: $color-primary;
+      width: 5px;
+      height: 5px;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      @include border-radius(10px);
+      @include transform(translateY(-50%));
+
+    }
+  }
+
+  &.no-decoration {
+    li {
+      padding-left: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+ul.payments-history {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 30px;
+    align-items: center;
+    border-bottom: 1px solid $color-secondary-light;
+    padding: 10px 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .history-box {
+      span {
+        display: block;
+
+        &.installment {
+          color: $color-secondary;
+          font-size: rem-calc(12px);
+        }
+
+        &.date {
+          font-size: rem-calc(14px);
+        }
+
+        &.amount {
+          font-size: rem-calc(14px);
+          font-weight: 900;
+          text-align: right;
+
+          &.penalty {
+            color: $color-alert;
+            font-size: rem-calc(12px);
+            font-weight: 400;
+          }
+        }
+      }
+
+      &.left {
+        justify-self: start;
+      }
+
+      &.right {
+        justify-self: end;
+      }
+    }
+  }
+}
+
+ul.statements-history {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: grid;
+    grid-template-columns: 24px 1fr 1fr;
+    grid-column-gap: 15px;
+    align-items: center;
+    border-bottom: 1px solid $color-secondary-light;
+    padding: 10px 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    img.icon {
+      display: block;
+      width: 100%;
+    }
+
+    .history-box {
+      span {
+        display: block;
+
+        &.statement {
+          color: $color-secondary;
+          font-size: rem-calc(12px);
+        }
+
+        &.date {
+          font-size: rem-calc(14px);
+        }
+
+        &.actions {
+          font-size: rem-calc(14px);
+          font-weight: 900;
+          text-align: right;
+        }
+      }
+
+      &.left {
+        justify-self: start;
+      }
+
+      &.right {
+        justify-self: end;
+      }
+    }
+  }
+}
+
+ul.documents-history {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: grid;
+    grid-template-columns: 24px 1fr 1fr;
+    grid-column-gap: 15px;
+    align-items: center;
+    border-bottom: 1px solid $color-secondary-light;
+    padding: 10px 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    img.icon {
+      display: block;
+      width: 100%;
+    }
+
+    .history-box {
+      span {
+        display: block;
+
+        &.document {
+          font-size: rem-calc(14px);
+        }
+
+        &.file-size {
+          color: $color-secondary;
+          font-size: rem-calc(12px);
+        }
+
+        &.actions {
+          font-size: rem-calc(14px);
+          font-weight: 900;
+          text-align: right;
+        }
+      }
+
+      &.left {
+        justify-self: start;
+      }
+
+      &.right {
+        justify-self: end;
+      }
+    }
+  }
+}
+
+span.payments-table-item-title {
+  font-size: rem-calc(12px);
+  font-weight: 900;
+  @include float(left);
+}
+
+span.payments-table-item-value {
+  font-size: rem-calc(12px);
+  @include float(right);
+}
+
+.payments-table-totals {
+  @include pie-clearfix;
+
+  span.item-title {
+    font-size: rem-calc(13px);
+  }
+
+  span.item-value {
+    font-size: rem-calc(13px);
+    font-weight: 900;
+  }
+
+  &.large {
+    span {
+      font-size: rem-calc(14px);
+    }
+  }
+}
+
+p.payment-simulation-result {
+  font-size: rem-calc(14px);
+  margin-top: 30px;
+}
+
+// Products Box Base Styles
+.virtual-card-section {
+  padding: 50px 60px 0;
+  margin-bottom: 30px;
+  background-color: #fff;
+  border: 1px solid #E9EAEA;
+  @include box-shadow(-10px 10px 20px 0 rgba( black, 0.05));
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-column-gap: 6rem;
+
+  .card-section {
+    .credit-card-container {
+      display: flex;
+      flex-flow: column-reverse nowrap;
+      align-items: center;
+
+      .v-card {
+        width: 85.60mm;
+        height: 52.98mm;
+        border-radius: 20px;
+        margin-bottom: 0;
+        -moz-box-shadow: -3px 6px 12px #4d4c4d;
+        -webkit-box-shadow: -3px 6px 12px #4d4c4d;
+        box-shadow: -3px 6px 12px #4d4c4d;
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        transition: -webkit-transform 0.6s;
+        -webkit-transition: -webkit-transform 0.6s;
+        transition: transform 0.6s, -webkit-transform 0.6s;
+        cursor: pointer;
+
+        &.disabled {
+          cursor: not-allowed;
+        }
+
+        .disabled-layer {
+          width: 100%;
+          height: 102%;
+          position: absolute;
+          z-index: 2;
+          background-color: $default-color-hover;
+          opacity: 0.6;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 17px 17px 14px 16px;
+
+          .icon {
+            width: 72px;
+          }
+        }
+
+        .front {
+          display: flex;
+          flex-flow: nowrap column;
+          position: absolute;
+          width: 85.6mm;
+          height: 53.98mm;
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+          -webkit-font-smoothing: antialiased;
+          background-size: contain;
+          padding: 10px;
+
+          .credit-card-data {
+            color: #CBCECE;
+            height: 100%;
+            display: flex;
+            align-items: flex-end;
+
+            .person-data {
+              margin: 0 28px;
+              font-size: rem-calc(12px);
+              .name {
+                font-weight: 600;
+                font-family: 'Montserrat', serif;
+              }
+            }
+          }
+        }
+
+        .back {
+          position: absolute;
+          width: 85.6mm;
+          height: 53.98mm;
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+          -webkit-font-smoothing: antialiased;
+          background-size: contain;
+          -webkit-transform: rotateY(180deg);
+          transform: rotateY(180deg);
+          padding: 10px;
+
+          .white-space {
+            height: 30%;
+          }
+
+          .card-data-back {
+            color: #CBCECE;
+            position: relative;
+            height: 70%;
+            font-family: 'Karla', serif;
+
+            .pan {
+              letter-spacing: 1px;
+              font-size: rem-calc(15px);
+              text-align: center;
+              font-weight: 600;
+              height: 70%;
+              display: flex;
+              align-items: flex-end;
+              justify-content: center;
+            }
+
+            .security-data {
+              display: flex;
+              flex-flow: row nowrap;
+              height: 30%;
+              justify-content: flex-end;
+              align-items: flex-end;
+              margin-right: 17%;
+
+              .title {
+                letter-spacing: 0.5px;
+                font-size: 10px;
+              }
+
+              .data {
+                font-size: rem-calc(12px);
+              }
+
+              .exp-date-wrapper {
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+
+
+        &.flipped {
+          -webkit-transform: rotateY(180deg);
+          transform: rotateY(180deg);
+          box-shadow: 9px 9px 12px #4d4c4d;
+        }
+      }
+
+      .cta-secction {
+        margin: 0 0 10px;
+        display: flex;
+
+        .button {
+          margin: 0 10px;
+        }
+
+        .view-card-information {
+          font-size: rem-calc(12px);
+          font-weight: 900;
+          cursor: pointer;
+          color: $color-primary;
+        }
+
+        .status-container {
+          width: fit-content;
+          animation: heartbeat 1s 6;
+
+          .card-status-details {
+            font-size: rem-calc(12px);
+            font-weight: bold;
+          }
+        }
+
+        .count-down-hide-data {
+          font-size: rem-calc(12px);
+        }
+      }
+    }
+
+    .credit-card-footer-message {
+      display: flex;
+      justify-content: center;
+      p {
+        margin-top: 15px;
+        font-size: rem-calc(12px);
+      }
+    }
+  }
+
+  .summary-section {
+    display: flex;
+    flex-direction: column;
+
+    .tab {
+      .accordion-control {
+        display: none;
+      }
+
+      .accordion-label {
+        display: none;
+      }
+    }
+
+    .credit-card-summary {
+      display: flex;
+      justify-content: space-around;
+      flex-flow: row wrap;
+
+      .section-separator {
+        border-right: 1px solid #afb3c07d;
+      }
+
+      .separator-line {
+        border-bottom: 1px solid #afb3c07d;
+        margin: 15px 0px;
+        width: 100%;
+      }
+
+      .title {
+        color: $color-secondary;
+        font-size: rem-calc(12px);
+        margin-bottom: 0;
+      }
+
+      section.main-summary {
+        .description {
+          font-size: rem-calc(14px);
+          font-weight: 900;
+        }
+      }
+
+      section.summary-cta {
+        margin-top: 20px;
+        font-size: 14px !important;
+      }
+
+      section.secondary-summary {
+        .description {
+          font-size: rem-calc(12px);
+          font-weight: 900;
+        }
+      }
+    }
+
+    .summary-footer {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      justify-content: space-around;
+
+      .toggle-button-with-label {
+        .onoffswitch {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  @include responsive-max($breakpoint-xlarge) {
+    padding: 0;
+    grid-template-columns: 1fr;
+
+    .card-section {
+      .credit-card-container {
+        .v-card {
+          display: flex;
+          justify-content: center;
+          width: auto;
+          height: 40.98mm;
+
+          .disabled-layer {
+            width: 65.6mm;
+            height: 40.98mm;
+            border-radius: 10px;
+            .icon {
+              width: 48px;
+            }
+          }
+
+          .front {
+            width: 65.6mm;
+            height: 40.98mm;
+
+            .credit-card-data {
+              .person-data {
+                margin: 0 10px;
+                font-size: rem-calc(10px);
+              }
+            }
+          }
+
+          .back {
+            width: 65.6mm;
+            height: 40.98mm;
+          }
+        }
+
+        .cta-secction {
+          margin: 20px 0 10px;
+
+          .button {
+            font-size: rem-calc(12px);
+          }
+        }
+      }
+
+      .credit-card-footer-message {
+        display: flex;
+        justify-content: center;
+
+        p {
+          margin-left: unset;
+        }
+      }
+    }
+
+    .summary-section {
+      /* Accordion styles */
+      .tab {
+        .accordion-label {
+          cursor: pointer;
+          display: block;
+        }
+
+        .accordion_container {
+          &:first-of-type {
+            border-top-left-radius: 20px;
+            border-top-right-radius: 20px;
+          }
+
+          &:last-of-type {
+            border-bottom-left-radius: 20px;
+            border-bottom-right-radius: 20px;
+            border-bottom: none;
+          }
+        }
+
+        .accordion-content {
+          /* Height animation:
+          only really works well if the height is close to content - too high and the animation still goes to the max-height number, messing up the timing
+          For widely variable height content, best not to animate. Switch display attribute instead */
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.2s;
+          background-size: 260px;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        .accordion-control {
+          display: none;
+
+          + label {
+            position: relative;
+            height: 40px;
+            margin: 0 15px 0 24px;
+            display: block;
+            font-family: arial, serif;
+            font-size: 1em;
+            line-height: 1em;
+            z-index: 0;
+
+            &:before {
+              content: attr(data-label-closed);
+              display: contents;
+              position: relative;
+            }
+
+            &::after {
+              right: 0;
+              content: "❯";
+              margin-right: 8px;
+              height: 1em;
+              text-align: center;
+              transition: all 0.35s;
+              position: absolute;
+            }
+          }
+
+          &:checked {
+            + label {
+              cursor: pointer;
+
+              &:before {
+                content: attr(data-label-open);
+              }
+
+              &:after {
+                transform: rotate(90deg);
+              }
+
+              + .accordion-content {
+                max-height: 450px;
+              }
+            }
+          }
+
+          &[type="radio"] {
+            + label {
+              &:before,
+              &:after {
+                content: '';
+              }
+            }
+
+            &:checked {
+              + label {
+                cursor: default;
+
+                &:before {
+                  border-left-color: #999;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .credit-card-summary {
+        flex-flow: column nowrap;
+        padding: 0 20px;
+
+        .summary-sections {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .summary-cta {
+          display: flex;
+          justify-content: flex-end;
+        }
+
+        .separator-line {
+          margin: 0;
+          width: 0;
+        }
+
+        .section-separator {
+          border-right: unset;
+          border-bottom: 1px solid #afb3c07d;
+          margin: 15px 0;
+        }
+      }
+
+      .summary-footer {
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin: 20px 20px;
+
+        .toggle-button-with-label {
+          padding-top: unset;
+        }
+      }
+    }
+  }
+
+  @include responsive-max($breakpoint-medium) {
+    .summary-section {
+      .summary-footer {
+        align-items: flex-end;
+        gap: 18px;
+        flex-direction: column;
+      }
+    }
+  }
+}