/*------------------------------------*\
  $PRODUCT-COMPARE
\*------------------------------------*/
.product-compare__fab {
  --alert-width-mobile: 205px;
  --alert-width-tablet: 280px;
  --alert-width-desktop: 390px;
  position: fixed;
  padding: 0;
  animation-delay: 0s;
}

.product-compare__fab .btn {
  font-weight: 700;
  text-align: left;
  min-height: 80px;
  height: 100%;
  width: 100%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  gap: 8px;
  padding-block: 1.25rem;
  padding-inline: 1.25rem;
}

.product-compare__fab .btn .svg-icon {
  transition: transform 0.3s;
  transform: translateX(0);
  width: 12px;
  height: 12px;
  margin-right: 0.5rem;
}

.product-compare__fab .btn:hover .svg-icon,
.product-compare__fab a:focus .svg-icon {
  transform: translateX(10px);
}

.modal--compare .modal__body {
  --surface-color: var(--white);
  --card-top-offset: 80px;
}

.product-compare table {
  border-spacing: 35px 0;
  border-collapse: separate;
  table-layout: fixed;
  margin-block: 30px 20px;
  position: relative;
}

.product-compare th,
.product-compare td {
  padding-inline: var(--card-text-padding);
  font-weight: 400;
}

.product-compare tr,
.product-compare th,
.product-compare td {
  border: 0;
}

.product-compare th {
  position: relative;
  font-weight: 700;
  background: var(--surface-color);
}

.product-compare th:first-child {
  padding-inline: 0 20px;
}

.product-compare__table th:nth-child(n+2),
.product-compare__table td:nth-child(n+2) {
  min-width: 230px;
  width: 230px;
  position: relative;
}

.product-compare__table td:nth-child(n+2) {
  background-color: var(--color-primary-tint);
}

th.product-compare__table-heading:nth-child(n+2) {
  padding-top: 0;
  z-index: 1;
  border-bottom: 0;
}

th.product-compare__table-heading:nth-child(n+2)::after {
  content: "";
  position: absolute;
  right: var(--card-text-padding);
  left: var(--card-text-padding);
  bottom: 0;
  height: 1px;
  background-color: var(--blue-700);
  opacity: 0.55;
}

th.product-compare__table-heading:nth-child(n+2)::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: calc(100% - var(--card-top-offset));
  background-color: var(--surface-color);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  background-color: var(--color-primary-tint);
  z-index: -1;
}

.product-compare__table .btn--wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.product-compare__table .btn--wrap .btn {
  --local-btn-surface: var(--blue-125);
  --local-btn-surface-hover: var(--blue-200);
  position: absolute;
  top: calc(var(--card-top-offset) - var(--btn-height) / 2);
  transform: translateX(calc(var(--card-text-padding) + 50%));
  z-index: 10;
}

.product-compare__table .btn--wrap .svg-icon {
  height: 16px;
  width: 16px;
  color: var(--blue-700);
}

.product-compare__table tr th,
.product-compare__table tr td {
  padding-block: 20px 0px;
}

.product-compare__table tr:first-child th {
  padding-block: 0px 20px;
}

.product-compare__table tr:last-child th,
.product-compare__table tr:last-child td {
  padding-bottom: 30px;
}

.product-compare__table tr:last-child td {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.product-compare__table-body-heading {
  position: relative;
}

.product-compare__table-body-heading::after {
  display: none;
}

.product-compare__table-heading-blank {
  background: var(--white);
  z-index: 1;
}

.product-compare__table .post__title {
  margin: 0;
}

.product-compare__table picture {
  --placeholder-image-bg: transparent;
}

.product-compare__table img {
  margin-bottom: 20px;
  position: relative;
}

.product-compare__table td,
.product-compare__table p {
  font-size: fs(14);
}

.product-compare__table p {
  margin: 0;
}

.product-compare__table p + p {
  margin-top: 10px;
}

.product-compare__button {
  padding: 30px;
  padding-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.product-compare__button .btn {
  width: 100%;
}

.product-compare .table-wrapper {
  max-height: 70vh;
  overscroll-behavior: contain;
}

.product-compare .table-wrapper::-webkit-scrollbar-button:horizontal:increment:end {
  display: none;
}

@media (min-width: 30rem) {
  .product-compare {
    margin-right: 20px;
  }
  .product-compare .table-wrapper::-webkit-scrollbar-button:increment:end {
    display: none;
  }
  .product-compare__button .btn {
    width: auto;
  }
}
@media (min-width: 48rem) {
  .product-compare .table-wrapper {
    max-height: 70vh;
  }
  .product-compare__fab {
    top: calc(var(--header-height) + 180px);
  }
  .product-compare__fab .btn {
    --btn-font-size: 16;
    padding-inline: 1.75rem;
    gap: 16px;
  }
}
@media (min-width: 67.5rem) {
  .product-compare {
    margin-right: 40px;
  }
  .product-compare table {
    margin-top: 40px;
  }
  .product-compare .table-wrapper {
    max-height: calc(95vh - 110px);
  }
  .product-compare .table-wrapper::-webkit-scrollbar-button:end {
    display: none;
  }
  .product-compare__button {
    padding: 20px 40px 40px;
  }
  .product-compare__button .btn {
    width: auto;
  }
  .product-compare .product-compare__table-heading-blank,
  .product-compare .product-compare__table-body-heading {
    position: sticky;
    left: 20px;
    z-index: 2;
  }
  .product-compare .product-compare__table-heading-blank {
    z-index: 3;
    left: 20px;
    top: 0;
  }
  .product-compare .product-compare__table-body-heading::before,
  .product-compare .product-compare__table-heading-blank::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 20px;
    background-color: var(--white);
  }
  .product-compare__fab {
    top: calc(var(--header-height) + 250px);
  }
}

/*# sourceMappingURL=/assets/application/content-modules/product-compare-02891e3b.css.map */