﻿/*Product Comparison Table*/
.productComparison__headerRow {
    display: flex;
    flex-flow: row;
    column-gap: 1%;
    position: relative;
    float: left;
}

.productComparison__headerTitle {
    align-content: flex-end;
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    padding: 1rem;
    flex: 0 0 20%;
    margin-bottom: 0;
    text-transform: capitalize;
}

.productComparison__productSection {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    overflow: hidden;
}

.productComparison__productSection--image {
  display: flex;
  justify-content: center;
}

.product-tile__image {
    width: 65%;
    transition: transform .2s;
}

.productComparison__headerRow a .product-tile__image:hover {
    transform: scale(1.2);
}

.productComparison__headerRow>div, .productComparison__headerRow a, .product__modal--navbar a:hover, .product__modal--content [data-content-section="support"] a:hover, .product__modal a.active {
    border-bottom: 3px solid #406C85;
}

.productComparison__headerRow a:hover, .productComparison__summary>div>p:hover {
  cursor: pointer;
}

.productComparison__headerRow .slider-arrow-right, .productComparison__headerRow .slider-arrow-left {
    border-bottom: none !important;
    display: none;
}

.productComparison__headerTitle {
    border-color: #009639 !important;
}

.productComparison__summary {
    display: flex;
    align-items: center;
    position: relative;
}

.productComparison details .productComparison__summary>div,
.productComparison__rows {
    border-bottom: 1px solid #dedede;
}

.productComparison details .productComparison__summary>div{
    padding: 1rem;
}

.productComparison details[open] .productComparison__summary>div {
    display: none;
}

.productComparison__summary>div {
    display: inline-flex;
    justify-content: center;
    flex-grow: 1;
    background-color: #f0f3f4;
}

.productComparison__summary>div>p {
    font-weight: 500;
    margin-bottom: 0;
}

.productComparison details .productComparison__summary>div>p::before {
    content: '';
    border-width: 0.4rem;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    position: absolute;
    top: 1.3rem;
    left: 44%;
    transform: rotate(0);
    transform-origin: 0.2rem 50%;
    transition: .25s transform ease;
}

.productComparison details[open] .productComparison__summary>div>p::before {
    transform: rotate(90deg);
}

.productComparison__rowsWrapper {
    display: flex;
    flex-flow: wrap;
}

.productComparison__rows {
    line-height: 1.5rem;
    font-weight: 300;
}

.productComparison__productSection:lang(ko),
.productComparison__productSection:lang(ko-KR),
.productComparison__rows:lang(ko),
.productComparison__rows:lang(ko-KR){
  font-weight: 500;
}

.productComparison__rows, .productComparison__buttonRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    font-size: .9375rem;
    column-gap: 1%;
    box-sizing: border-box;
}

.productComparison__buttonRow--button {
    display: flex;
    flex: 1;
    padding-top: 1rem;
    justify-content: center;
}

.productComparison__buttonRow--button button {
    color: #ffffff !important;
    font-size: 1rem;
    padding: 0.75rem;
}

/*Background Colour Changes*/
.productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd) {
    background-color: #f1f1f1;
}

/*Dark Blue*/
.productComparison.section--orient .productComparison__headerRow>div:not(:first-child), .productComparison.section--orient .productComparison__headerRow> a {
    border-bottom: 3px solid #809dae;
}

.productComparison.section--orient .productComparison__row--pill>p {
    background-color: #809dae;
}

.productComparison.section--orient .productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison.section--orient .productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd),
.productComparison.section--orient .productComparison__summary>div {
    background-color: #406c85;
}

.productComparison.section--orient .productComparison__row .icon-cross {
    color: #809dae;
}
/*Dark Blue Ends*/
/*Light Blue*/
.productComparison.section--dark-dm-blue .product-tile__header,
.productComparison.section--dark-dm-blue .product-tile__desc {
    color: #ffffff;
}
.productComparison.section--dark-dm-blue .productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison.section--dark-dm-blue .productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd),
.productComparison.section--dark-dm-blue .productComparison__summary>div {
    background-color: #71B2C8;
}
.productComparison.section--dark-dm-blue .productComparison__row--pill>p {
    background-color: #406c85;
}
/*Light Blue Ends*/
/*Dark Green*/
.productComparison.section--dark-green .productComparison__headerTitle {
    border-color: #003B5C !important;
}        
.productComparison.section--dark-green .product-tile__header,
.productComparison.section--dark-green .product-tile__desc,
.productComparison.section--dark-green .productComparison__row .icon-tick {
    color: #003B5C;
}
.productComparison.section--dark-green .productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison.section--dark-green .productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd),
.productComparison.section--dark-green .productComparison__summary>div {
    background-color: #80cb9c;
}
.productComparison.section--dark-green .productComparison__row--pill>p {
    background-color: #406c85;
}
.productComparison.section--dark-green .productComparison__row .icon-cross {
    color: #363537;
}
/*Dark Green Ends*/
/*Light Blue*/
.productComparison.section--light-blue .product-tile__header {
    color: #003B5C;
}
.productComparison.section--light-blue .productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison.section--light-blue .productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd),
.productComparison.section--light-blue .productComparison__summary>div {
    background-color: #8aadc1;
}
.productComparison.section--light-blue .productComparison__row--pill>p {
    background-color: #406c85;
}
/*Light Blue Ends*/
/*Light Green*/
.productComparison.section--light-green .product-tile__header {
    color: #003B5C;
}
.productComparison.section--light-green .productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison.section--light-green .productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd),
.productComparison.section--light-green .productComparison__summary>div {
    background-color: #40b06b;
}
.productComparison.section--light-green .productComparison__row .icon-cross {
    color: #363537;
}
.productComparison.section--light-greenx .productComparison__row .icon-tick {
    color: #ffffff;
}
/*Light Green Ends*/
/*Light Grey*/
.productComparison.section--concrete .productComparison__rowsWrapper--aboveFold .productComparison__rows:nth-child(even),
.productComparison.section--concrete .productComparison__rowsWrapper--belowFold .productComparison__rows:nth-child(odd),
.productComparison.section--concrete .productComparison__summary>div {
    background-color: #f0f3f4;
}
/*Light Grey Ends*/
/*Background Colour Changes End*/

.productComparison__rows>div {
    padding: .625rem .9375rem;
}

.productComparison__rows>div:not(:first-child) {
    justify-content: center;
}

.productComparison__row:first-of-type, .productComparison__buttonRow--button:first-of-type{
  flex: 0 0 20%;
}

.productComparison__row {
    display: flex;
    flex: 1;
}

.productComparison__row--content p {
    text-align: center;
    margin: 0;
}

.productComparison__row--pill>p {
    display: inline-block;
    padding: 0.1875rem 0.4375rem;
    background-color: #E7E6E6;
    border-radius: 1.6875rem;
}

.productComparison__row .icon-tick {
    color: #009E58;
}

.productComparison__row .icon-cross{
    color:#406c85;
}

/*Product Info Modal*/
.product__modal--parent {
  background-color: #d3d3d394;
  z-index: 999;
  position: fixed;
  width: 100%;
  top: 0;
  padding: 20px;
  height: 100%;
  border-bottom: none !important;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product__modal--parent.showing {
  opacity: 1;
  pointer-events: auto;
}


.product__modal {
  border-radius: 3.125rem;
  border: 1px solid #E5ECEF;
  padding: 0;
  background-color: #ffffff;
  max-height: 90vh;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product__modal::-webkit-scrollbar {
  display: none;
}

.product__modal:focus {
  outline: none;
}

.product__modal--frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 55vh;
}

.product__modal--close-wrapper {
  position: relative;
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-right: 2rem;
}

.product__modal--close {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.product__modal--close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: 50%;
  transition: background 0.2s ease-in-out;
  z-index: 1;
}

.product__modal--close:hover::before {
  background: #e8fff1;
}

.product__modal--close .x-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background-color: #009639;
  transform-origin: center;
  z-index: 2;
}

.product__modal--close .x-line.line-1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

.product__modal--close .x-line.line-2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.product__modal--details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  flex-shrink: 0;
  width: 60%;
}

.product__modal--product {
  display: flex;
  gap: 1.25rem;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 90%;
}

.product__modal--product > img {
  transform: scale(0.9);
  flex-shrink: 0;
  width: 40%;
}

.product__modal--breadcrumbs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: #009639;
}

.product__modal--breadcrumbs ul {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.product__modal--details a, .product__modal--breadcrumbs a {
  color: #009639;
  text-decoration: none;
  border-bottom: none;
}

.product__modal--breadcrumbs a {
  font-weight: 300;
}

.product__modal--details a {
  font-weight: 600;
}

.product__modal--breadcrumbs a:hover, .product__modal--breadcrumbs a:focus {
  border-bottom: 3px solid #009639;
}

.product__modal--breadcrumbs li {
  list-style: none;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.875rem;
}

.product__modal--details h2 {
  font-size: 1.75rem;
  font-weight: 400;
}

.product__modal--details h3 {
  font-size: 1.125rem;
  font-weight: 300;
}

.product__modal--details h3:lang(ko),
.product__modal--details h3:lang(ko-KR){
  font-weight: 500;
}

.product__modal--details h2, .product__modal--details h3 {
  color:#003B5C;
  margin: 0;
}

.product__modal--details p, .product__modal--details ul, .product__modal--details ol {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.563rem;
}

.product__modal--details p:lang(ko),
.product__modal--details p:lang(ko-KR),
.product__modal--details ul:lang(ko),
.product__modal--details ul:lang(ko-KR),
.product__modal--details ol:lang(ko),
.product__modal--details ol:lang(ko-KR) {
  font-weight: 500;
  line-height: 1.875rem;
}

.product__modal--navbar {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0;
  overflow: auto;
}

.product__modal--navbar a {
  font-weight: 400;
  font-size: 1rem;
  color: #003B5C;
  border-bottom: none;
}

.product__modal--navbar [data-content='enquiry'] {
    order: 99;
}

.product__modal a.enquiry-form {
  border: 1px solid #009639;
  color: #009639;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.product__modal--content [data-content-section="overview"] a:hover {
    border-bottom: 3px solid #009639;
}

.product__modal a.enquiry-form:hover, .product__modal a.enquiry-form.active {
  border-bottom: 0;
  background-color: #009639;
  color: #ffffff;
}

.product__modal--content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
}

.product__modal--content .content-section {
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
}

.product__modal--content .content-section ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.product__modal--content .content-section ul li {
    position: relative;
    padding: 0 1rem;
}

.product__modal--content .content-section ul li::before {
    content: "";
    height: 0.506rem;
    width: 0.506rem;
    background-color: #66899d;
    position: absolute;
    left: 0;
    transform-origin: 0 0;
    top: 0.5rem;
    transform: rotate(45deg);
}

.product__modal--content .content-section .additionalInformation #verticalBlocklist {
    padding: 1rem 0;
}

.product__modal--content .content-section .additionalInformation #verticalBlocklist .vertical__blockItem.leftBlock {
    font-size: 1rem;
}

.product__modal--content .content-section .additionalInformation #verticalBlocklist .vertical__blockItem.leftBlock .vertical__blockItem__icon {
    font-size: clamp(1.25rem, 1rem + 0.55vw, 2.5rem);
}

.product__modal--content .content-section.active {
  display: flex;
  flex: 1;
}

.product__modal--content .content-section[data-content-section="variants"] {
  width: 100%;
}

.product__modal--content .content-section[data-content-section="variants"] .accordion-wrapper {
  padding: 0;
}

.product__modal--content .content-section[data-content-section="variants"] .accordion__detail {
  flex-direction: column;
}

.product__modal--content .content-section[data-content-section="variants"] .accordion__frame summary {
  font-size: 1.25rem;
}

.product__modal--content .content-section[data-content-section="variants"] .accordion__detail h3 {
  font-size: 1rem;
}

.product__modal--content [data-content-section="gallery"] .section-title {
  display: none;
}

.product__modal--content .content-section .download--container a:hover, .product__modal--content a {
  border-bottom: none;
}

.product__modal--content [data-content-section="support"] {
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.content-section[data-content-section="gallery"] > section {
  padding: 0rem;
}

.content-section[data-content-section="gallery"] .medium-10 {
  width: 100%;
  padding: 0;
}

.product__modal--content .content-section .download--container {
  display: flex;
  padding: 0.625rem 1.25rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 6.25rem;
  background-color: #009639;
  color: #ffffff;
}

.product__modal--content .content-section .download--container a {
  color: #ffffff;
}

.product__modal--content .content-section .download--container:hover {
  background-color: #009E58;
}

@media screen and (max-width: 48rem){
    .productComparison__headerRow {
      position: relative;
      float: left;
    }
    .productComparison__row:not(:first-of-type), .productComparison__productSection:not(first-of-type), .productComparison__buttonRow--button:not(first-of-type) {
        display: none;
    }
    .productComparison__row.activeProduct, .productComparison__productSection.activeProduct, .productComparison__buttonRow--button.activeProduct, .productComparison__buttonRow--button:first-of-type {
        display: flex;
    }

    .productComparison details .productComparison__summary>div>p::before {
        left: 35%;
    }

    .product-tile__header {
        font-size: 1.5rem;
    }

    .productComparison__headerTitle {
      flex: 0 0 40%;
      padding: 0 1rem;
      margin: 0rem;
    }

    .productComparison__row:first-of-type, .productComparison__buttonRow--button:first-of-type{
      flex: 0 0 40%;
    }

    .productComparison__rows--header {
        font-size: 0.95rem;
    }

    .productComparison__productSection {
        padding: 0 0.5rem;
    }

    .productComparison__row--content p {
        font-size: 0.85rem;
    }

    .product-tile__desc {
        font-size: .95rem;
        font-weight: 500;
    }

    .productComparison__headerRow .slider-arrow-right, .productComparison__headerRow .slider-arrow-left {
        border-bottom: none !important;
    }

    .productComparison__headerRow .slider-arrow-right.activeArrow, .productComparison__headerRow .slider-arrow-left.activeArrow {
        display: inline-block;
    }

    .slider-arrow-left, .slider-arrow-right {
        display: inline-block;
        position: relative;
        cursor: pointer;
    }

    .slider-arrow-left img, .slider-arrow-right img {
        top: 5rem;
        position: relative;
        width: 50%;
    }

    .productComparison__buttonRow--button a {
      font-size: 0.75rem;
    }

    .product__modal--frame {
      min-height: 90vh;
    }

    .product__modal--navbar [data-content='enquiry'] {
      order: -1;
    }

    .product__modal--product {
      flex-wrap: wrap;
      align-items: center;
      padding: 0 1rem;
    }
    .product__modal--product > img, .product__modal--details {
      width: 100%;
    }
}