From f1a2e2721421d362221f91dc36f94858dba23d2e Mon Sep 17 00:00:00 2001
From: Alexandru-Butuza <abutuza@bitdefender.com>
Date: Wed, 22 Jan 2025 13:20:32 +0200
Subject: [PATCH] fixed styling issues

---
 .../products-sideview/products-sideview.css   |  27 +-
 .../products-sideview/products-sideview.js    |   3 +-
 .../products-sideview/products-sideview.scss  | 345 +++++++++---------
 3 files changed, 206 insertions(+), 169 deletions(-)

diff --git a/_src-lp/blocks/products-sideview/products-sideview.css b/_src-lp/blocks/products-sideview/products-sideview.css
index f23e1012..cc81c6a5 100644
--- a/_src-lp/blocks/products-sideview/products-sideview.css
+++ b/_src-lp/blocks/products-sideview/products-sideview.css
@@ -24,8 +24,28 @@
   padding: 30px;
 }
 
+.products-sideview .pricing-wrapper > p a {
+  color: #006EFF;
+}
+
+.products-sideview .display-flex {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
 .products-sideview .prod-oldprice {
   text-decoration: line-through;
+  text-align: left;
+  margin-bottom: 10px;
+  margin-right: 8px;
+}
+
+.products-sideview .prod-save, .products-sideview .percent {
+  margin-bottom: 10px;
+  color: #1C7928;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .products-sideview .price-element-wrapper {
@@ -169,7 +189,7 @@
 .products-sideview .features-tabs li > a {
   color: var(--tab-header-color-blue);
   font-size: var(--body-font-size-xs);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   position: relative;
   display: inline-block;
   letter-spacing: 0.004em;
@@ -213,8 +233,7 @@
 }
 
 .products-sideview .features-tabs .features-tabs-content > p {
-  font-size: var(--body-font-size-xxs);
-  font-weight: var(--font-weight-regular);
+  font-size: 14px;
   line-height: 1.6;
 }
 
@@ -224,7 +243,7 @@
 
 @media (min-width: 480px) {
   .products-sideview .features-tabs li > a {
-    font-size: 15px;
+    font-size: 16px;
   }
 }
 @media (min-width: 768px) {
diff --git a/_src-lp/blocks/products-sideview/products-sideview.js b/_src-lp/blocks/products-sideview/products-sideview.js
index 61182c67..dd85bd45 100644
--- a/_src-lp/blocks/products-sideview/products-sideview.js
+++ b/_src-lp/blocks/products-sideview/products-sideview.js
@@ -259,8 +259,7 @@ function renderPrice(block, ...price) {
     pricesBox.innerHTML = `<div>
         <div class="display-flex">
           <span class="prod-oldprice oldprice-${productCode}-${prodUsers}${prodYears}"></span>
-          <span class="d-none prod-save"> ${saveText}<span class="save-${productCode}-${prodUsers}${prodYears}"></span></span>
-          <span class="d-none percent percent-${productCode}-${prodUsers}${prodYears}">0%</span>
+          <span class="percent percent-${productCode}-${prodUsers}${prodYears}">${saveText ?? ''} 0%</span>
         </div>
         <div class="display-flex">
           <span class="prod-newprice newprice-${productCode}-${prodUsers}${prodYears}"></span>
diff --git a/_src-lp/blocks/products-sideview/products-sideview.scss b/_src-lp/blocks/products-sideview/products-sideview.scss
index 916faf9c..0f123115 100644
--- a/_src-lp/blocks/products-sideview/products-sideview.scss
+++ b/_src-lp/blocks/products-sideview/products-sideview.scss
@@ -2,53 +2,74 @@
     --tab-header-color-blue: #005ed9;
     --tab-description-color-light-grey: #3c3c3c;
     --tab-emphasis-color: #2cb43d;
-}
-
-.products-sideview .features-wrapper {
+  }
+  
+  .products-sideview .features-wrapper {
     background: #eff6ff;
     padding: 30px;
     border-radius: 0 0 20px 20px;
-}
-
-.products-sideview .features-wrapper > p,
-.products-sideview .pricing-wrapper > p {
+  }
+  
+  .products-sideview .features-wrapper > p,
+  .products-sideview .pricing-wrapper > p {
     font-size: 18px;
     line-height: 1.5;
-    letter-spacing: .006em;
+    letter-spacing: 0.006em;
     font-weight: var(--font-weight-regular);
-}
-
-.products-sideview .pricing-wrapper {
+  }
+  
+  .products-sideview .pricing-wrapper {
     background: #f6f6f6;
     border-radius: 20px 20px 0 0;
     padding: 30px;
-}
-
-.products-sideview .prod-oldprice {
+  }
+  
+  .products-sideview .pricing-wrapper > p a{
+      color:#006EFF;
+  }
+  
+  .products-sideview .display-flex{
+      display: flex;
+      align-items: baseline;
+      gap: 5px;
+  }
+  
+  .products-sideview .prod-oldprice {
     text-decoration: line-through;
-}
-
-.products-sideview .price-element-wrapper {
+    text-align: left;
+    margin-bottom: 10px;
+    margin-right: 8px;
+  }
+  
+  .products-sideview .prod-save, .products-sideview .percent {
+      margin-bottom: 10px;
+      color: #1C7928;
+      font-size: 16px;
+      font-weight: bold;
+  
+  }
+  
+  .products-sideview .price-element-wrapper {
     margin: 20px 0;
     font-family: Arial, sans-serif;
-}
-
-.products-sideview .pricing-wrapper > p:last-child {
+  }
+  
+  .products-sideview .pricing-wrapper > p:last-child {
     text-align: center;
-}
-
-.products-sideview p.button-container > a {
+  }
+  
+  .products-sideview p.button-container > a {
     width: 100%;
     justify-content: center;
-}
-
-.products-sideview .prod-newprice {
+  }
+  
+  .products-sideview .prod-newprice {
     font-size: 32px;
     font-weight: bold;
     text-align: left;
-}
-
-.products-sideview .tag-blue {
+  }
+  
+  .products-sideview .tag-blue {
     background: var(--tab-header-color-blue);
     color: white;
     padding: 0 10px;
@@ -57,34 +78,33 @@
     font-size: 14px;
     line-height: 1;
     font-weight: bolder;
-}
-
-.radioBoxParent{
+  }
+  
+  .radioBoxParent {
     gap: 10px;
-}
-
-.d-radio {
+  }
+  
+  .d-radio {
     display: inline-flex;
     align-items: center;
-}
-
-.d-radio input {
+  }
+  
+  .d-radio input {
     width: 20px;
     height: 20px;
     margin: 0;
-}
-
-
-.d-radio label {
+  }
+  
+  .d-radio label {
     margin-left: 5px;
     margin-right: 11px;
-}
-
-.products-sideview-selector {
+  }
+  
+  .products-sideview-selector {
     position: relative;
-}
-
-.products-sideview-selector select {
+  }
+  
+  .products-sideview-selector select {
     appearance: none;
     width: 100%;
     border: 1px solid #ccc;
@@ -93,10 +113,10 @@
     font-size: 18px;
     font-weight: bold;
     border-radius: 5px;
-}
-
-.products-sideview-selector::after {
-    content: '';
+  }
+  
+  .products-sideview-selector::after {
+    content: "";
     background: url("/_src-lp/icons/tabs_arrow.svg") no-repeat;
     position: absolute;
     top: 50%;
@@ -105,82 +125,81 @@
     pointer-events: none;
     width: 15px;
     height: 15px;
-}
-
-.products-sideview li {
+  }
+  
+  .products-sideview li {
     padding: 0;
     margin: 0 0 10px;
-}
-
-
-.products-sideview .benefits-list > li {
+  }
+ 
+  .products-sideview .benefits-list > li {
     position: relative;
     padding-left: 25px;
     margin: 0 0 5px;
-}
-
-.products-sideview .benefits-list > li::before {
+  }
+  
+  .products-sideview .benefits-list > li::before {
     content: url("/_src-lp/icons/checkmark_solid-circle_2.svg");
     position: absolute;
     left: 0;
     top: 4px;
     width: 18px;
     height: 18px;
-}
-
-.products-sideview-wrapper {
+  }
+  
+  .products-sideview-wrapper {
     padding: 0 var(--body-padding);
-}
-
-.products-sideview > div {
+  }
+  
+  .products-sideview > div {
     display: flex;
     flex-direction: column;
     align-items: stretch;
-}
-
-.products-sideview img {
+  }
+  
+  .products-sideview img {
     width: 100%;
-}
-
-.products-sideview > div > div {
+  }
+  
+  .products-sideview > div > div {
     position: relative;
     order: 1;
-}
-
-.products-sideview > div > div:last-child::after {
+  }
+  
+  .products-sideview > div > div:last-child::after {
     display: none;
-}
-
-.products-sideview > div > .features-img-col {
+  }
+  
+  .products-sideview > div > .features-img-col {
     order: 0;
-}
-
-.products-sideview > div > .features-img-col img {
+  }
+  
+  .products-sideview > div > .features-img-col img {
     display: block;
-}
-
-.products-sideview p.features-tabs-hidden {
+  }
+  
+  .products-sideview p.features-tabs-hidden {
     display: none;
-}
-
-.products-sideview ul {
+  }
+  
+  .products-sideview ul {
     padding: 0;
     list-style: none;
-}
-
-.products-sideview .features-tabs li > a {
+  }
+  
+  .products-sideview .features-tabs li > a {
     color: var(--tab-header-color-blue);
     font-size: var(--body-font-size-xs);
-    font-weight: var(--font-weight-bold);
+    font-weight: 600;
     position: relative;
     display: inline-block;
-    letter-spacing: .004em;
+    letter-spacing: 0.004em;
     cursor: pointer;
     text-decoration: none;
     padding-left: 25px;
-}
-
-.products-sideview .features-tabs li > a::after {
+  }
+  
+  .products-sideview .features-tabs li > a::after {
     content: "";
     position: absolute;
     left: 0;
@@ -192,135 +211,135 @@
     background: url("/_src-lp/icons/tabs_arrow.svg") no-repeat;
     background-size: 100%;
     transform: rotate(180deg);
-    transition: all .3s linear;
-}
-
-.products-sideview .features-tabs li > a.is-open::after {
-    transform: rotate(0)
-}
-
-.products-sideview .features-tabs .features-tabs-content {
+    transition: all 0.3s linear;
+  }
+  
+  .products-sideview .features-tabs li > a.is-open::after {
+    transform: rotate(0);
+  }
+  
+  .products-sideview .features-tabs .features-tabs-content {
     opacity: 0;
     height: 0;
     overflow: hidden;
     margin-left: 25px;
     transition: all 0.3s ease-in-out;
-}
-
-.products-sideview .features-tabs .features-tabs-content.expanded {
+  }
+  
+  .products-sideview .features-tabs .features-tabs-content.expanded {
     opacity: 1;
     height: auto;
     transition: all 0.3s ease-in-out;
     display: block;
-}
-
-.products-sideview .features-tabs .features-tabs-content > p {
-    font-size: var(--body-font-size-xxs);
-    font-weight: var(--font-weight-regular);
+  }
+  
+  .products-sideview .features-tabs .features-tabs-content > p {
+    font-size: 14px;
     line-height: 1.6;
-}
-
-.hide{
+  }
+  
+  .hide {
     display: none;
-}
-
-@media (min-width >= 480px) {
+  }
+  
+  @media (min-width >= 480px) {
     .products-sideview .features-tabs li > a {
-        font-size: 15px;
+      font-size: 16px;
     }
-}
+  }
 
-@media (min-width >= 768px) {
+  @media (min-width >= 768px) {
     .products-sideview .features-wrapper {
-        border-radius: 0 20px 20px 0;
-        width: 50%;
+      border-radius: 0 20px 20px 0;
+      width: 50%;
     }
 
     .products-sideview .pricing-wrapper {
-        border-radius: 20px 0 0 20px; /* desktop */
-        width: 50%
+      border-radius: 20px 0 0 20px; /* desktop */
+      width: 50%;
     }
 
     .products-sideview .pricing-wrapper h4 {
-        font-size: 26px;
-        line-height: 32.5px;
-        font-weight: 700;
+      font-size: 26px;
+      line-height: 32.5px;
+      font-weight: 700;
     }
 
     .products-sideview .features-wrapper h2 {
-        font-size: 38px;
-        line-height: 45.6px;
-        font-weight: 700;
+      font-size: 38px;
+      line-height: 45.6px;
+      font-weight: 700;
     }
 
     .features-tabs {
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: 30px;
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 30px;
     }
 
     .features-tabs > li {
-        position: relative;
+      position: relative;
     }
 
     .products-sideview > div {
-        flex-flow: wrap;
+      flex-flow: wrap;
     }
 
     .products-sideview > div > div {
-        padding: 0 20px 20px;
+      padding: 0 20px 20px;
     }
 
     .products-sideview-wrapper {
-        max-width: var(--section-desktop-max-width);
-        padding: 0 var(--section-desktop-padding);
-        margin: 0 auto;
+      max-width: var(--section-desktop-max-width);
+      padding: 0 var(--section-desktop-padding);
+      margin: 0 auto;
     }
 
     .products-sideview > div > div:nth-child(2)::after {
-        display:none;
+      display: none;
     }
-}
-
-@media (min-width >= 993px) {
+  }
+  
+  @media (min-width >= 993px) {
     .products-sideview.features-3-cols > div > div {
-        width: calc(33.33% - 30px);
-        margin: 0 15px;
+      width: calc(33.33% - 30px);
+      margin: 0 15px;
     }
 
     .products-sideview.features-3-cols > div > div:nth-child(2)::after {
-        display:block;
+      display: block;
     }
 
     .products-sideview.features-2-cols > div > div:nth-child(2)::after {
-        display:none;
+      display: none;
     }
-}
 
-@media (min-width >= 1200px) {
+  }
+
+  @media (min-width >= 1200px) {
     .products-sideview .pricing-wrapper {
-        width: 33.33%;
+      width: 33.33%;
     }
 
     .products-sideview .features-wrapper {
-        width: 66.66%;
-        min-height: fit-content;
+      width: 66.66%;
+      min-height: fit-content;
     }
 
     .products-sideview .features-tabs > li {
-        width: calc(50% - 30px);
-        flex-shrink: 0;
-        margin-bottom: 25px;
+      width: calc(50% - 30px);
+      flex-shrink: 0;
+      margin-bottom: 25px;
     }
 
     .products-sideview .features-tabs .features-tabs-content > p {
-        font-size: var(--body-font-size-xs);
+      font-size: var(--body-font-size-xs);
     }
-}
+  }
 
-@media (min-width >= 1600px) { /* large desktop */
+  @media (min-width >= 1600px) { /* large desktop */
     .products-sideview-wrapper {
-        max-width: var(--section-large-desktop-max-width);
-        padding: 0 var(--section-large-desktop-padding);
+      max-width: var(--section-large-desktop-max-width);
+      padding: 0 var(--section-large-desktop-padding);
     }
-}
+  }