.elementor-4001 .elementor-element.elementor-element-5e8b335d > .elementor-container{max-width:1600px;}.elementor-4001 .elementor-element.elementor-element-5e8b335d{overflow:visible;}.elementor-4001 .elementor-element.elementor-element-b2a5e9e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-6c4f77c{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-6c4f77c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-a31932b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-21d72b0{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-21d72b0.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-a8209a4{--display:flex;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-d67a7e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-f62c05c{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-f62c05c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-f215b6b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-0b75948{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-0b75948.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-07ed99d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-fde8884{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-fde8884.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-aeda855{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-d747427{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-d747427.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-35b5906{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-913e3ce{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-913e3ce.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-b3f71f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-0421190{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-0421190.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4001 .elementor-element.elementor-element-bb4deb4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-4001 .elementor-element.elementor-element-ddf8ad7{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4001 .elementor-element.elementor-element-ddf8ad7.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for nm-banner-slider, class: .elementor-element-763657e0 */section {visibility: hidden}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-1f2c954b */section {visibility: hidden}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-5e8b335d */section {height: 1px}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6c4f77c *//*  Hero Section - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* Reset styles within component */
.hwt-hero-section,
.hwt-hero-section *,
.hwt-hero-section *::before,
.hwt-hero-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hwt-hero-section {
  --hwt-type-scale: 1;
  background: linear-gradient(to right, #fafafa 50%, #f5f5f5 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 3.5rem 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  border-bottom: 1px solid #e5e5e5;
}

.hwt-hero-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 30px;
}

/* Left Content */
.hwt-hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 50%;
  min-width: 0;
  flex-shrink: 1;
  padding-right: 36px;
  padding-left: 0;
}

/* Badge */
.hwt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
  width: fit-content;
}

.hwt-badge-dot {
  width: 8px;
  height: 8px;
  background-color: #000000;
  border-radius: 50%;
  display: inline-block;
}

.hwt-badge-text {
  font-size: calc(var(--hwt-badge-size) * var(--hwt-type-scale));
  font-weight: var(--hwt-badge-weight);
  color: var(--hwt-color-muted);
  text-transform: uppercase;
  letter-spacing: var(--hwt-badge-ls);
}

/* Heading */
.hwt-hero-heading {
  font-size: calc(var(--hwt-hero-heading-size) * var(--hwt-type-scale));
  font-weight: var(--hwt-hero-heading-weight);
  line-height: calc(var(--hwt-hero-heading-lh) * var(--hwt-type-scale));
  letter-spacing: var(--hwt-hero-heading-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

.hwt-hero-heading .hwt-text-muted {
  color: var(--hwt-color-muted);
}

/* Description */
.hwt-hero-description {
  font-size: calc(var(--hwt-hero-desc-size) * var(--hwt-type-scale));
  font-weight: var(--hwt-hero-desc-weight);
  line-height: calc(var(--hwt-hero-desc-lh) * var(--hwt-type-scale));
  letter-spacing: var(--hwt-hero-desc-ls);
  color: var(--hwt-color-body);
  max-width: 570px;
  margin: 0;
  padding: 0;
}

/* CTA Buttons */
.hwt-cta-buttons {
  display: flex;
  gap: 16px;
  padding-top: 5px;
}

.hwt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: calc(var(--hwt-btn-size) * var(--hwt-type-scale));
  font-weight: var(--hwt-btn-weight);
  line-height: var(--hwt-btn-lh);
  letter-spacing: var(--hwt-btn-ls);
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  outline: none;
}

.hwt-btn-primary {
  background-color: #000000;
  color: var(--hwt-color-heading-inverse);
}

.hwt-btn-primary:hover {
  background-color: #333333;
  color: var(--hwt-color-heading-inverse);
  text-decoration: none;
}

.hwt-btn-secondary {
  background-color: #ffffff;
  color: var(--hwt-color-heading);
  border: 1px solid #d4d4d4;
}

.hwt-btn-secondary:hover {
  background-color: #f5f5f5;
  color: var(--hwt-color-heading);
  text-decoration: none;
}

/* Trust Indicators */
.hwt-trust-indicators {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.hwt-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hwt-trust-item svg {
  flex-shrink: 0;
}

.hwt-trust-item span {
  font-size: calc(var(--hwt-label-size) * var(--hwt-type-scale));
  font-weight: var(--hwt-label-weight);
  color: var(--hwt-color-muted);
  letter-spacing: -0.24px;
}

/* Right Content - Product Image Section */
.hwt-hero-image-section {
  width: 50%;
  min-width: 0;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 72px;
  padding-right: 0;
  overflow: visible;
}

.hwt-hero-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 58px;
  margin-bottom: 60px;
  overflow: visible;
}

.hwt-product-image-container {
  position: relative;
  width: 400px;
  max-width: 100%;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0px 25px 40px 0px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  flex-shrink: 0;
}

.hwt-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Review Card */
.hwt-review-card {
  position: absolute;
  top: -58px;
  right: -140px;
  width: 300px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.hwt-review-header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.hwt-reviewer-avatar {
  width: 45px;
  height: 45px;
  border: 1px solid #f5f5f5;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.hwt-reviewer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hwt-reviewer-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.hwt-reviewer-name {
  font-size: calc(var(--hwt-author-name-size) * var(--hwt-type-scale));
  letter-spacing: var(--hwt-author-name-ls);
  font-weight: var(--hwt-author-name-weight);
  color: var(--hwt-color-heading);
}

.hwt-stars {
  display: flex;
  margin-left: -1px;
  gap: 2px;
}

.hwt-review-text {
  font-size: calc(13px * var(--hwt-type-scale));
  font-weight: var(--hwt-body-sm-weight);
  line-height: calc(19px * var(--hwt-type-scale));
  letter-spacing: -0.48px;
  color: var(--hwt-color-link);
  margin: 0 0 10px 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hwt-verified-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hwt-verified-badge span {
  font-size: calc(13px * var(--hwt-type-scale));
  letter-spacing: -0.6px;
  font-weight: var(--hwt-author-name-weight);
  color: var(--hwt-color-label);
}

/* Purity Card */
.hwt-purity-card {
  position: absolute;
  bottom: -60px;
  left: -64px;
  width: 186px;
  height: 136px;
  background-color: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17px;
  text-align: center;
  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.hwt-purity-value {
  font-size: calc(36px * var(--hwt-type-scale));
  font-weight: var(--hwt-btn-weight);
  line-height: calc(36px * var(--hwt-type-scale));
  color: var(--hwt-color-link);
  font-feature-settings: "ss01" 1;
  letter-spacing: -0.6px;
}

.hwt-purity-label {
  font-size: calc(13px * var(--hwt-type-scale));
  font-weight: var(--hwt-btn-weight);
  letter-spacing: -0.26px;
  color: var(--hwt-color-muted);
  text-transform: uppercase;
  margin-top: 10px;
  text-align: center;
  width: 100%;
  line-height: 1.3;
}

/* Responsive Styles */
@media (max-width: 1300px) {
  .hwt-hero-section {
    --hwt-type-scale: 0.9;
  }

  .hwt-review-text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .hwt-hero-container {
    padding: 0 30px;
  }
  
  .hwt-hero-content {
    padding-left: 0;
    padding-right: 24px;
  }
  
  .hwt-hero-image-section {
    padding-left: 48px;
    padding-right: 0;
  }
  
  .hwt-product-image-container {
    width: 320px;
    height: 400px;
  }
  
  .hwt-review-card {
    width: 250px;
    right: -72px;
    padding: 12px 16px;
  }
  
  .hwt-review-card .hwt-reviewer-avatar {
    width: 40px;
    height: 40px;
  }
  
  .hwt-review-card .hwt-review-text {
    margin-bottom: 4px;
  }
  
  .hwt-purity-card {
    width: 150px;
    height: 110px;
    left: -50px;
  }
  
  .hwt-trust-indicators {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .hwt-hero-section {
    --hwt-type-scale: 0.8;
  }

  .hwt-review-text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .hwt-btn {
    padding: 12px 20px;
  }
  
  .hwt-trust-indicators {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .hwt-product-image-container {
    width: 300px;
    height: 375px;
  }
  
  .hwt-review-card {
    width: 230px;
    right: -48px;
    top: -70px;
    padding: 10px 14px;
  }

  .hwt-review-card .hwt-review-text {
    margin-bottom: 4px;
  }
  
  .hwt-purity-card {
    width: 140px;
    height: 105px;
    left: -50px;
    bottom: -70px;
  }
  
  .hwt-purity-label {
    margin-top: 3px;
    white-space: nowrap;
  }
  
  .hwt-trust-item svg {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 768px) {
  .hwt-hero-section {
    --hwt-type-scale: 0.72;
  }

  .hwt-review-text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .hwt-hero-section {
    background: linear-gradient(to bottom, #fafafa 50%, #f5f5f5 50%);
  }
  
  .hwt-hero-container {
    flex-direction: column;
    gap: 60px;
    padding: 40px 15px;
  }
  
  .hwt-hero-content {
    width: 100%;
    padding: 0;
  }
  
  .hwt-cta-buttons {
    flex-direction: column;
  }
  
  .hwt-trust-indicators {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .hwt-hero-image-section {
    width: 100%;
    padding: 60px 0 80px;
    justify-content: center;
  }
  
  .hwt-product-image-container {
    width: 300px;
    height: 375px;
  }
  
  .hwt-review-card {
    width: 220px;
    right: -16px;
    top: -40px;
    padding: 18px;
  }
  
  .hwt-purity-card {
    width: 150px;
    height: 110px;
    left: -50px;
    bottom: -40px;
  }
  
}

@media (max-width: 480px) {
  .hwt-hero-section {
    --hwt-type-scale: 0.64;
  }
  
  .hwt-hero-image-section {
    padding: 60px 0 100px;
  }
  
  .hwt-review-card {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    margin-top: 20px;
  }
  
  .hwt-purity-card {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 20px;
  }
  
  .hwt-hero-image-wrapper {
    flex-direction: column;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-21d72b0 *//* ============================================================
   HERO SECTION (MOBILE ≤ 768px)
   ============================================================
   Standalone mobile hero section. Hidden on screens > 768px.
   The desktop hero section handles widths ≥ 769px.
   ============================================================ */

/* ── Hide on desktop ──────────────────────────────────────── */
@media (min-width: 769px) {
  .hwt-hero-mobile-section {
    display: none !important;
  }
}

/* ── Scoped reset ─────────────────────────────────────────── */
.hwt-hero-mobile-section,
.hwt-hero-mobile-section *,
.hwt-hero-mobile-section *::before,
.hwt-hero-mobile-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Section (100 vw breakout) ────────────────────────────── */
.hwt-hero-mobile-section {
  background: #fafafa;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
  overflow-y: visible;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-bottom: 1px solid #e5e5e5;
}

/* ── Container ────────────────────────────────────────────── */
.hwt-hero-mobile-container {
  display: flex;
  flex-direction: column;
  gap: 22.8px;
  padding: 30px 30px 30px 30px;
}

/* ── Badge ─────────────────────────────────────────────────── */
.hwt-hero-mobile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
  width: fit-content;
}

.hwt-hero-mobile-badge-dot {
  width: 8px;
  height: 8px;
  background-color: #000000;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.hwt-hero-mobile-badge-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #737373;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Heading ───────────────────────────────────────────────── */
.hwt-hero-mobile-heading {
  font-size: 40px;
  font-weight: 450;
  line-height: 40px;
  letter-spacing: -0.6px;
  color: #171717;
  font-feature-settings: "lnum", "pnum";
}

.hwt-hero-mobile-text-muted {
  color: #737373;
}

/* ── Description ───────────────────────────────────────────── */
.hwt-hero-mobile-description {
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.68px;
  color: #525152;
}

/* ── CTA Buttons ───────────────────────────────────────────── */
.hwt-hero-mobile-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hwt-hero-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  font-size: 14px;
  font-family: inherit;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.2s ease;
}

.hwt-hero-mobile-btn-primary {
  background-color: #000000;
  color: #ffffff;
  font-weight: 510;
  padding: 16px 32px;
  line-height: 20px;
}

.hwt-hero-mobile-btn-primary:hover {
  background-color: #333333;
  color: #ffffff;
  text-decoration: none;
}

.hwt-hero-mobile-btn-secondary {
  background-color: #ffffff;
  color: #171717;
  font-weight: 450;
  padding: 17px 33px;
  border: 1px solid #d4d4d4;
  line-height: 20px;
}

.hwt-hero-mobile-btn-secondary:hover {
  background-color: #f5f5f5;
  color: #171717;
  text-decoration: none;
}

/* ── Trust Indicators ──────────────────────────────────────── */
.hwt-hero-mobile-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 23px;
  border-top: 1px solid #e5e5e5;
}

.hwt-hero-mobile-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hwt-hero-mobile-trust-item svg {
  flex-shrink: 0;
}

.hwt-hero-mobile-trust-item span {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #737373;
  letter-spacing: -0.24px;
  white-space: nowrap;
}

/* ── 480 px — tighter spacing for small phones ─────────────── */
@media (max-width: 480px) {
  .hwt-hero-mobile-heading {
    font-size: 32px;
    line-height: 34px;
    letter-spacing: -0.5px;
  }

  .hwt-hero-mobile-description {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.6px;
  }

  .hwt-hero-mobile-trust-item span {
    font-size: 11px;
    letter-spacing: -0.3px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-face827 *//* Featured Products Grid - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* Reset styles within component */
.hwt-products-section,
.hwt-products-section *,
.hwt-products-section *::before,
.hwt-products-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hwt-products-section {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 80px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.hwt-products-container {
  display: flex;
  flex-direction: column;
  max-width: 1220px;
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
}

/* Header */
.hwt-products-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.hwt-products-header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 641px;
}

.hwt-products-title {
  font-size: var(--hwt-heading-size);
  font-weight: var(--hwt-heading-weight);
  line-height: var(--hwt-heading-lh);
  letter-spacing: var(--hwt-heading-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

.hwt-products-subtitle {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
}

.hwt-products-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #000000;
  text-decoration: none !important;
  color: var(--hwt-color-heading) !important;
  font-size: var(--hwt-cta-size);
  font-weight: var(--hwt-cta-weight);
  line-height: var(--hwt-cta-lh);
  letter-spacing: var(--hwt-cta-ls);
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.hwt-products-link span {
  color: var(--hwt-color-heading) !important;
}

.hwt-products-link:hover {
  opacity: 0.7;
  text-decoration: none !important;
  color: #171717 !important;
}

.hwt-products-link svg {
  width: 10.5px;
  height: 12px;
  flex-shrink: 0;
}

.hwt-products-link svg path {
  fill: #737373;
}

/* Filter Tabs */
.hwt-products-tabs {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 44px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hwt-products-tabs::-webkit-scrollbar {
  display: none;
}

.hwt-tab {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hwt-tab-size);
  font-weight: var(--hwt-tab-weight);
  line-height: var(--hwt-tab-lh);
  letter-spacing: var(--hwt-tab-ls);
  color: var(--hwt-color-muted);
  padding: 0 0 8px;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s ease;
}

.hwt-tab:hover {
  color: #171717;
}

.hwt-tab-active {
  color: var(--hwt-color-link);
  border-bottom: 2px solid #000000;
  margin-bottom: -1px;
}

/* Disabled tab (e.g. Peptides "coming soon") — non-interactive, muted */
.hwt-tab.hwt-tab-disabled,
.hwt-tab[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.hwt-tab.hwt-tab-disabled:hover,
.hwt-tab[disabled]:hover {
  color: var(--hwt-color-muted);
}

.hwt-tab-soon-mark {
  color: inherit;
}

/* Hidden tab panels — explicit fallback in case the [hidden] attribute is
   overridden by other CSS in the cascade. */
.hwt-products-grid[hidden] {
  display: none !important;
}

/* Product Grid */
.hwt-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Product Card */
.hwt-product-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.hwt-product-card:hover {
  text-decoration: none;
  color: inherit;
}

.hwt-product-card:hover .hwt-product-image-wrap {
  transform: scale(1.02);
}

.hwt-product-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 285 / 360;
  background-color: #ffffff;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.hwt-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Add to cart hover button */
.hwt-product-atc {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #171717;
  font-family: inherit;
  font-size: 14px;
  font-weight: 510;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 12px 18px;
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  cursor: pointer;
}

.hwt-product-atc svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Icon visibility states */
.hwt-product-atc .hwt-atc-icon-spinner,
.hwt-product-atc .hwt-atc-icon-check {
  display: none;
}

.hwt-product-atc .hwt-atc-icon-plus {
  display: block;
}

/* Loading state — WooCommerce adds .loading class */
.hwt-product-atc.loading .hwt-atc-icon-plus { display: none; }
.hwt-product-atc.loading .hwt-atc-icon-spinner {
  display: block;
  width: 14px;
  height: 14px;
  animation: hwt-spin 0.7s linear infinite;
}
.hwt-product-atc.loading .hwt-atc-text { opacity: 0.5; }
.hwt-product-atc.loading {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: none !important;
}

/* Added state — WooCommerce adds .added class */
.hwt-product-atc.added .hwt-atc-icon-plus { display: none; }
.hwt-product-atc.added .hwt-atc-icon-check { display: block; }
.hwt-product-atc.added .hwt-atc-text::after {
  content: 'Added!';
}
.hwt-product-atc.added .hwt-atc-text {
  font-size: 0;
}
.hwt-product-atc.added .hwt-atc-text::after {
  font-size: 14px;
}
.hwt-product-atc.added {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: none;
}

@keyframes hwt-spin {
  to { transform: rotate(360deg); }
}

.hwt-product-card:hover .hwt-product-atc {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hwt-product-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: transparent;
  color: var(--hwt-color-heading);
  border: 1px solid #737373;
  border-radius: 0;
  font-size: var(--hwt-badge-size);
  font-weight: var(--hwt-badge-weight);
  line-height: var(--hwt-badge-lh);
  letter-spacing: var(--hwt-badge-ls);
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 2;
}

/* Product Info */
.hwt-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hwt-product-name-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 12px;
}

/* Bundles (carry both <del> and <ins>): name on the left, price stacked on
   the right — sale price (ins, red) aligned with the name top, regular price
   (del, strikethrough) below it with the same 4px gap that separates the
   product name from the dosage line. Absolute positioning keeps the row
   height equal to the name height so the dosage stays tight under the name. */
.hwt-product-name-price:has(del) {
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  padding-right: 90px;
}

.hwt-product-name-price:has(del) .hwt-product-name {
  width: 100%;
}

.hwt-product-name-price:has(del) .hwt-product-price {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
  line-height: var(--hwt-product-name-lh);
  gap: 4px;
}

.hwt-product-name-price:has(del) .hwt-product-price ins,
.hwt-product-name-price:has(del) .hwt-product-price ins .amount {
  color: #db1111;
  text-decoration: none;
  background: transparent;
}

.hwt-product-name-price:has(del) .hwt-product-price del,
.hwt-product-name-price:has(del) .hwt-product-price del .amount {
  color: var(--hwt-color-muted);
  font-weight: 400;
  text-decoration: line-through;
  margin-right: 0;
  /* Default del size matches the variant line (14px / 21px). When ins
     (var(--hwt-product-price-size)) becomes smaller than del at narrower
     breakpoints, min() automatically drops del to match ins so del is never
     bigger than the active sale price. */
  font-size: min(14px, var(--hwt-product-price-size));
  line-height: min(21px, var(--hwt-product-price-lh));
  letter-spacing: normal;
}

.hwt-product-name {
  font-size: var(--hwt-product-name-size);
  font-weight: var(--hwt-product-name-weight);
  line-height: var(--hwt-product-name-lh);
  letter-spacing: var(--hwt-product-name-ls);
  color: var(--hwt-color-heading);
}

.hwt-product-price {
  font-size: var(--hwt-product-price-size);
  font-weight: var(--hwt-product-price-weight);
  line-height: var(--hwt-product-price-lh);
  letter-spacing: var(--hwt-product-price-ls);
  color: var(--hwt-color-heading);
}

.hwt-product-dosage {
  font-size: var(--hwt-label-size);
  font-weight: var(--hwt-label-weight);
  line-height: var(--hwt-label-lh);
  letter-spacing: var(--hwt-label-ls);
  color: var(--hwt-color-muted);
}

.hwt-product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
}

.hwt-stars {
  display: flex;
  gap: 4px;
  align-items: center;
  /* Optical centering: star glyphs fill their bbox, so geometric center sits
     visually lower than the text x-height. Nudge up 2px to align. */
  position: relative;
  top: -1px;
}

.hwt-stars svg {
  width: 13.5px;
  height: 12px;
  flex-shrink: 0;
}

.hwt-stars svg.hwt-star-half {
  width: 15px;
}

.hwt-rating-text {
  font-size: var(--hwt-label-size);
  font-weight: var(--hwt-label-weight);
  line-height: var(--hwt-label-lh);
  letter-spacing: var(--hwt-label-ls);
  color: var(--hwt-color-label);
  padding-left: 4px;
}

/* Rating suffix: show "out of 5" by default, swap to "/ 5" on 1-column. */
.hwt-rating-suffix-short {
  display: none;
}

/* Responsive Styles */
@media (max-width: 1100px) {
  .hwt-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .hwt-product-card:nth-child(4) {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hwt-products-section {
    padding: 64px 0;
  }
}

@media (max-width: 900px) {
  .hwt-products-header {
    align-items: flex-start;
    gap: 16px;
  }
  
  .hwt-products-header-left {
    max-width: calc(100% - 150px);
  }
  
  .hwt-products-link {
    align-self: flex-start;
    margin-top: 4px;
  }
  
  .hwt-products-tabs {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .hwt-products-section {
    padding: 56px 0;
  }

  .hwt-products-container {
    padding: 0 15px;
  }
  
  .hwt-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  /* Override the 1100px hiding of card 4 — show all products */
  .hwt-product-card:nth-child(4) {
    display: flex;
  }
}

/* Fix text wrapping at narrow 2-column widths */
@media (max-width: 495px) and (min-width: 481px) {
  .hwt-products-section .hwt-rating-text {
    font-size: 11px;
  }

  .hwt-products-section .hwt-product-name {
    font-size: 13px;
  }

  .hwt-products-section .hwt-product-variant {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .hwt-products-section {
    padding: 44px 0;
  }

  /* Header: use grid so subtitle spans full width below title+link row */
  .hwt-products-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
  }

  .hwt-products-header-left {
    display: contents;
  }

  .hwt-products-title {
    grid-column: 1;
    grid-row: 1;
  }

  .hwt-products-link {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .hwt-products-subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 20px;
  }

  .hwt-products-tabs {
    gap: 20px;
  }

  .hwt-products-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Product info: variant left, rating right on same row */
  .hwt-product-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 0;
  }

  .hwt-product-name-price {
    grid-column: 1 / -1;
  }

  .hwt-product-variant {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .hwt-product-rating {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    padding-top: 0;
  }

  /* Rating text to the left of stars, 1pt larger */
  .hwt-rating-text {
    order: -1;
    font-size: 13px;
    padding-left: 0;
    padding-right: 4px;
  }

  /* Variant must not exceed the rating text size on 1-column. */
  .hwt-products-section .hwt-product-variant {
    font-size: 13px;
  }

  /* Bundles in 1-column layout: prices inline on one row — strikethrough
     first, then sale price (red). Reset the absolute/column-reverse stack. */
  .hwt-product-name-price:has(del) {
    padding-right: 0;
  }

  .hwt-product-name-price:has(del) .hwt-product-price {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  .hwt-product-name-price:has(del) .hwt-product-price del {
    order: 0;
  }

  .hwt-product-name-price:has(del) .hwt-product-price ins {
    order: 1;
  }

  /* 1-column: switch rating suffix from "out of 5" to "/ 5" */
  .hwt-rating-suffix-long {
    display: none;
  }

  .hwt-rating-suffix-short {
    display: inline;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f62c05c *//*  Transparency Section - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* ============================================================
   ELEMENTOR CONTAINER OVERRIDE
   The section uses a 100vw break-out to span the full viewport.
   If the Elementor container is set to "Boxed" (e-con-boxed),
   the inner wrapper constrains width and blocks the break-out.
   These rules expand ONLY the container holding this section.
   Best practice: set the Elementor container to "Full Width"
   in the editor to match the hero section setup.
   ============================================================ */
.e-con:has(.hwt-transparency-section),
.e-con:has(.hwt-transparency-section) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   RESET
   ============================================================ */
.hwt-transparency-section,
.hwt-transparency-section *,
.hwt-transparency-section *::before,
.hwt-transparency-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   SECTION
   ============================================================ */
.hwt-transparency-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #FCFCFA;
  background-image: url('/wp-content/uploads/2026/03/Transparency-Section.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  padding: 40px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.hwt-transparency-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   LEFT COLUMN – Visual Space
   Background image shows through this empty column on desktop.
   ============================================================ */
.hwt-transparency-visual {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 478px;
}

/* ============================================================
   RIGHT COLUMN – Content
   ============================================================ */
.hwt-transparency-content {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Label */
.hwt-transparency-label {
  font-size: var(--hwt-label-wide-size);
  font-weight: var(--hwt-label-wide-weight);
  line-height: var(--hwt-label-wide-lh);
  letter-spacing: var(--hwt-label-wide-ls);
  color: var(--hwt-color-label);
  text-transform: uppercase;
}

/* Heading */
.hwt-transparency-heading {
  font-size: var(--hwt-heading-lg-size);
  font-weight: var(--hwt-heading-lg-weight);
  line-height: var(--hwt-heading-lg-lh);
  letter-spacing: var(--hwt-heading-lg-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

/* Description */
.hwt-transparency-desc-wrap {
  padding-top: 0px;
}

.hwt-transparency-desc {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
}

/* ============================================================
   FEATURES LIST
   ============================================================ */
.hwt-transparency-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hwt-transparency-feature {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Icon circle */
.hwt-transparency-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
}

.hwt-transparency-icon svg {
  display: block;
  flex-shrink: 0;
}

/* Feature text */
.hwt-transparency-feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.hwt-transparency-feature-title {
  font-size: var(--hwt-feature-title-size);
  font-weight: var(--hwt-feature-title-weight);
  line-height: var(--hwt-feature-title-lh);
  letter-spacing: var(--hwt-feature-title-ls);
  color: var(--hwt-color-heading);
}

.hwt-transparency-feature-desc {
  font-size: var(--hwt-feature-desc-size);
  font-weight: var(--hwt-feature-desc-weight);
  line-height: var(--hwt-feature-desc-lh);
  letter-spacing: var(--hwt-feature-desc-ls);
  color: var(--hwt-color-muted);
  margin: 0;
  padding: 0;
}

/* ============================================================
   CTA BUTTON
   ============================================================ */
.hwt-transparency-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 16px 32px;
  background-color: #171717;
  color: var(--hwt-color-heading-inverse);
  font-size: var(--hwt-btn-size);
  font-weight: var(--hwt-btn-weight);
  line-height: var(--hwt-btn-lh);
  letter-spacing: var(--hwt-btn-ls);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
  border: none;
  outline: none;
  align-self: flex-start;
  font-family: inherit;
  margin-top: 10px;
}

.hwt-transparency-btn:hover {
  background-color: #333333;
  color: #ffffff;
  text-decoration: none;
}

.hwt-transparency-btn:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE — 1300 px
   ============================================================ */
@media (max-width: 1300px) {
  .hwt-transparency-container {
    gap: 48px;
  }

  .hwt-transparency-visual {
    min-height: 420px;
  }
}

/* ============================================================
   RESPONSIVE — 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  .hwt-transparency-container {
    gap: 32px;
  }

  .hwt-transparency-visual {
    min-height: 380px;
  }
}

/* ============================================================
   RESPONSIVE — 900 px  (switch to single column)
   ============================================================ */
@media (max-width: 900px) {
  .hwt-transparency-section {
    padding: 0;
    background-image: none;
  }

  .hwt-transparency-container {
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-width: none;
  }

  /* Hide visual spacer — image now lives inside content block */
  .hwt-transparency-visual {
    display: none;
  }

  .hwt-transparency-content {
    width: 100%;
    flex: none;
    padding: 48px 30px 56px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: transparent;
  }

  /* Flipped image, bottom edge aligned to content bottom */
  .hwt-transparency-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/03/Transparency-Section.webp');
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    z-index: -2;
  }

  /* Gradient: solid at top, fading to transparent to reveal image */
  .hwt-transparency-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #FCFCFA 30%, transparent 80%);
    z-index: -1;
  }
}

/* ============================================================
   RESPONSIVE — 768 px
   ============================================================ */
@media (max-width: 768px) {
  .hwt-transparency-visual {
    min-height: 260px;
  }

  .hwt-transparency-content {
    padding: 40px 30px 40px 30px;
  }
}

/* ============================================================
   RESPONSIVE — 480 px
   ============================================================ */
@media (max-width: 480px) {
  .hwt-transparency-visual {
    min-height: 220px;
  }

  .hwt-transparency-content {
    padding: 40px 30px 40px 30px;
  }

  .hwt-transparency-feature {
    align-items: flex-start;
  }

  .hwt-transparency-icon {
    margin-top: 2px;
  }

  .hwt-transparency-btn {
    width: auto;
    align-self: flex-start;
    justify-content: center;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0b75948 *//*  Lab Testing Showcase – Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* ============================================================
   ELEMENTOR CONTAINER OVERRIDE
   Expand any Boxed Elementor parent so the 100vw break-out
   works without creating a horizontal scrollbar.
   Best practice: set the Elementor container to "Full Width".
   ============================================================ */
.e-con:has(.hwt-labtesting-section),
.e-con:has(.hwt-labtesting-section) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   RESET
   ============================================================ */
.hwt-labtesting-section,
.hwt-labtesting-section *,
.hwt-labtesting-section *::before,
.hwt-labtesting-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   SECTION
   ============================================================ */
.hwt-labtesting-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #171717;
  border-bottom: 1px solid #e5e5e5;
  padding: 80px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.hwt-labtesting-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  /* 30px side gutter — matches transparency-section (reference block)
     so the two stack visually flush at every viewport. */
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   LEFT COLUMN – Content
   ============================================================ */
.hwt-labtesting-content {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Heading */
.hwt-labtesting-heading {
  font-size: var(--hwt-heading-lg-size);
  font-weight: var(--hwt-heading-lg-weight);
  line-height: var(--hwt-heading-lg-lh);
  letter-spacing: var(--hwt-heading-lg-ls);
  color: var(--hwt-color-heading-inverse);
}

/* Description */
.hwt-labtesting-desc {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body-inverse);
}

/* ============================================================
   FEATURES LIST
   ============================================================ */
.hwt-labtesting-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hwt-labtesting-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Icon circle */
.hwt-labtesting-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #262626;
  border: 1px solid #404040;
  border-radius: 9999px;
  margin-top: 4px;
}

.hwt-labtesting-icon svg {
  display: block;
  flex-shrink: 0;
}

/* Feature text */
.hwt-labtesting-feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.hwt-labtesting-feature-title {
  font-size: var(--hwt-feature-title-size);
  font-weight: var(--hwt-feature-title-weight);
  line-height: var(--hwt-feature-title-lh);
  letter-spacing: var(--hwt-feature-title-ls);
  color: var(--hwt-color-heading-inverse);
}

.hwt-labtesting-feature-desc {
  font-size: var(--hwt-feature-desc-size);
  font-weight: var(--hwt-feature-desc-weight);
  line-height: var(--hwt-feature-desc-lh);
  letter-spacing: var(--hwt-feature-desc-ls);
  color: var(--hwt-color-body-inverse);
}

/* ============================================================
   CTA LINK
   ============================================================ */
.hwt-labtesting-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #ffffff;
  color: var(--hwt-color-link-inverse);
  font-size: var(--hwt-cta-size);
  font-weight: var(--hwt-cta-weight);
  line-height: var(--hwt-cta-lh);
  letter-spacing: var(--hwt-cta-ls);
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  font-family: inherit;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.hwt-labtesting-link:hover {
  opacity: 0.75;
  color: #ffffff;
  text-decoration: none;
}

.hwt-labtesting-link svg {
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   RIGHT COLUMN – Lab Report Card
   ============================================================ */
.hwt-labtesting-card {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  background-color: #262626;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Shadow overlay (inset trick to stay within border-radius) */
.hwt-labtesting-card-shadow {
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* ---- Card Header ---- */
.hwt-labtesting-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 17px;
  border-bottom: 1px solid #404040;
}

.hwt-labtesting-card-header-left {
  display: flex;
  flex-direction: column;
}

.hwt-labtesting-card-label {
  font-size: var(--hwt-label-size);
  font-weight: var(--hwt-label-weight);
  line-height: var(--hwt-label-lh);
  letter-spacing: var(--hwt-label-ls);
  color: var(--hwt-color-label);
  text-transform: uppercase;
}

.hwt-labtesting-card-title {
  font-size: var(--hwt-card-title-size);
  font-weight: var(--hwt-card-title-weight);
  line-height: var(--hwt-card-title-lh);
  letter-spacing: var(--hwt-card-title-ls);
  color: var(--hwt-color-heading-inverse);
}

.hwt-labtesting-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 13px;
  background-color: rgba(0, 255, 55, 0.3);
  border: 1px solid rgba(115, 115, 115, 0.3);
  border-radius: 9999px;
  font-size: var(--hwt-badge-size);
  font-weight: var(--hwt-badge-weight);
  line-height: var(--hwt-badge-lh);
  letter-spacing: var(--hwt-badge-ls);
  color: var(--hwt-color-heading-inverse);
  flex-shrink: 0;
}

/* ---- Metric Rows ---- */
.hwt-labtesting-card-metric {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hwt-labtesting-card-metric + .hwt-labtesting-card-metric {
  padding-top: 8px;
}

.hwt-labtesting-card-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hwt-labtesting-card-metric-label {
  font-size: var(--hwt-feature-title-size);
  font-weight: var(--hwt-feature-title-weight);
  line-height: var(--hwt-feature-title-lh);
  letter-spacing: var(--hwt-feature-title-ls);
  color: var(--hwt-color-body-inverse);
}

.hwt-labtesting-card-metric-value {
  font-size: var(--hwt-feature-title-size);
  font-weight: var(--hwt-feature-title-weight);
  line-height: var(--hwt-feature-title-lh);
  letter-spacing: var(--hwt-feature-title-ls);
  color: var(--hwt-color-heading-inverse);
}

/* Progress bar */
.hwt-labtesting-bar {
  width: 100%;
  height: 8px;
  background-color: #404040;
  border-radius: 9999px;
  overflow: hidden;
}

.hwt-labtesting-bar-fill {
  height: 100%;
  background-color: #ffffff;
  border-radius: 9999px;
}

/* ---- Bottom Stats ---- */
.hwt-labtesting-card-stats {
  display: flex;
  gap: 16px;
}

.hwt-labtesting-card-stat {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hwt-labtesting-card-stat-value {
  font-size: var(--hwt-stat-size);
  font-weight: var(--hwt-stat-weight);
  line-height: var(--hwt-stat-lh);
  letter-spacing: var(--hwt-stat-ls);
  color: var(--hwt-color-heading-inverse);
  text-align: center;
}

.hwt-labtesting-card-stat-label {
  font-size: var(--hwt-stat-label-size);
  font-weight: var(--hwt-stat-label-weight);
  line-height: var(--hwt-stat-label-lh);
  letter-spacing: var(--hwt-stat-label-ls);
  color: var(--hwt-color-label);
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   RESPONSIVE – 1300 px
   ============================================================ */
@media (max-width: 1300px) {
  .hwt-labtesting-container {
    gap: 48px;
    padding: 0 30px;
  }
}

/* ============================================================
   RESPONSIVE – 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  .hwt-labtesting-section {
    padding: 64px 0;
  }

  .hwt-labtesting-container {
    gap: 32px;
  }

  .hwt-labtesting-card {
    padding: 20px;
  }
}

/* ============================================================
   RESPONSIVE – 900 px  (switch to single column)
   ============================================================ */
@media (max-width: 900px) {
  .hwt-labtesting-container {
    flex-direction: column;
    gap: 40px;
    padding: 0 30px;
  }

  .hwt-labtesting-card {
    width: 100%;
  }
}

/* ============================================================
   RESPONSIVE – 768 px
   ============================================================ */
@media (max-width: 768px) {
  .hwt-labtesting-section {
    padding: 56px 0;
  }

  /* Keep 30px side gutter (reference: transparency-section).
     Previously 24px → block was 12px wider than transparency. */
  .hwt-labtesting-container {
    padding: 0 30px;
  }

  .hwt-labtesting-card-stats {
    gap: 12px;
  }
}

/* ============================================================
   RESPONSIVE – 480 px
   ============================================================ */
@media (max-width: 480px) {
  .hwt-labtesting-section {
    padding: 44px 0;
  }

  /* Keep 30px side gutter (reference: transparency-section).
     Previously 15px → block was 30px wider than transparency. */
  .hwt-labtesting-container {
    padding: 0 30px;
    gap: 32px;
  }


  .hwt-labtesting-card {
    padding: 16px;
    gap: 20px;
  }

  .hwt-labtesting-card-stats {
    flex-direction: column;
    gap: 16px;
  }

  .hwt-labtesting-card-stat {
    flex-direction: row;
    justify-content: space-between;
  }

  .hwt-labtesting-card-stat-label {
    order: -1;
  }

  .hwt-labtesting-link {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fde8884 *//*  "Why Researchers Trust Us" Section - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* ============================================================
   ELEMENTOR CONTAINER OVERRIDE
   Expand boxed Elementor parent so 100vw breakout works.
   ============================================================ */
.e-con:has(.hwt-why-section),
.e-con:has(.hwt-why-section) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   RESET
   ============================================================ */
.hwt-why-section,
.hwt-why-section *,
.hwt-why-section *::before,
.hwt-why-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   SECTION
   ============================================================ */
.hwt-why-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 80px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.hwt-why-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
.hwt-why-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.hwt-why-heading {
  font-size: var(--hwt-heading-size);
  font-weight: var(--hwt-heading-weight);
  line-height: var(--hwt-heading-lh);
  letter-spacing: var(--hwt-heading-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

.hwt-why-subtitle {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body);
  max-width: 672px;
  margin: 0;
  padding: 0;
}

/* ============================================================
   CARDS ROW
   ============================================================ */
.hwt-why-cards {
  display: flex;
  gap: 32px;
  justify-content: center;
  width: 100%;
}

/* ============================================================
   SINGLE CARD
   ============================================================ */
.hwt-why-card {
  flex: 1 1 0%;
  min-width: 0;
  background-color: #fafafa;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   ICON CIRCLE
   ============================================================ */
.hwt-why-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.hwt-why-icon svg {
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   CARD TEXT
   ============================================================ */
.hwt-why-card-title {
  font-size: var(--hwt-card-title-size);
  font-weight: var(--hwt-card-title-weight);
  line-height: var(--hwt-card-title-lh);
  letter-spacing: var(--hwt-card-title-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

.hwt-why-card-desc {
  font-size: var(--hwt-body-sm-size);
  font-weight: var(--hwt-body-sm-weight);
  line-height: var(--hwt-body-sm-lh);
  letter-spacing: var(--hwt-body-sm-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
}

/* ============================================================
   CHECKLIST
   ============================================================ */
.hwt-why-list {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hwt-why-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hwt-why-check {
  flex-shrink: 0;
  display: block;
}

.hwt-why-list-item span {
  font-size: var(--hwt-label-size);
  font-weight: var(--hwt-label-weight);
  line-height: var(--hwt-label-lh);
  letter-spacing: var(--hwt-label-ls);
  color: var(--hwt-color-muted);
}

/* ============================================================
   RESPONSIVE — 1300 px
   ============================================================ */
@media (max-width: 1300px) {
  .hwt-why-container {
    padding: 0 30px;
    gap: 40px;
  }

  .hwt-why-cards {
    gap: 24px;
  }

  .hwt-why-card {
    padding: 28px;
  }
}

/* ============================================================
   RESPONSIVE — 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  .hwt-why-section {
    padding: 64px 0;
  }

  .hwt-why-container {
    gap: 36px;
  }

  .hwt-why-cards {
    gap: 20px;
  }

  .hwt-why-card {
    padding: 24px;
    gap: 16px;
  }
}

/* ============================================================
   RESPONSIVE — 768 px  (stack cards vertically)
   ============================================================ */
@media (max-width: 768px) {
  .hwt-why-section {
    padding: 56px 8px 56px 8px;
  }

  .hwt-why-container {
    padding: 0 24px;
    gap: 32px;
  }

  .hwt-why-cards {
    flex-direction: column;
    gap: 20px;
  }

  .hwt-why-card {
    padding: 28px;
    gap: 18px;
  }
}

/* ============================================================
   RESPONSIVE — 480 px
   ============================================================ */
@media (max-width: 480px) {
  .hwt-why-section {
    padding: 44px 16px 44px 16px;
  }

  .hwt-why-container {
    padding: 0 15px;
    gap: 28px;
  }

  .hwt-why-card {
    padding: 22px;
    gap: 16px;
  }

  .hwt-why-icon {
    width: 48px;
    height: 48px;
  }

  .hwt-why-icon svg {
    transform: scale(0.85);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d747427 *//*  FAQ Section - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* ============================================================
   ELEMENTOR CONTAINER OVERRIDE
   Expand the Elementor boxed container so the full-width
   break-out works regardless of "Boxed" vs "Full Width" setting.
   ============================================================ */
.e-con:has(.hwt-faq-section),
.e-con:has(.hwt-faq-section) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   RESET
   ============================================================ */
.hwt-faq-section,
.hwt-faq-section *,
.hwt-faq-section *::before,
.hwt-faq-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   SECTION
   ============================================================ */
.hwt-faq-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #fafafa;
  border-bottom: 1px solid #e5e5e5;
  padding: 80px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.hwt-faq-container {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  /* 30px side gutter — matches transparency-section (reference block).
     The max-width: 768px caps growth on wide screens so the FAQ never
     becomes wider than other sections; on narrow screens the 30px gutter
     keeps it visually flush with transparency. */
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ============================================================
   HEADER
   ============================================================ */
.hwt-faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

/* ============================================================
   HEADING
   ============================================================ */
.hwt-faq-heading {
  font-size: var(--hwt-heading-size);
  font-weight: var(--hwt-heading-weight);
  line-height: var(--hwt-heading-lh);
  letter-spacing: var(--hwt-heading-ls);
  color: var(--hwt-color-heading);
  text-align: center;
  margin: 0;
  padding: 0;
}

/* ============================================================
   SUBTITLE
   ============================================================ */
.hwt-faq-subtitle {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
}

.hwt-faq-section .hwt-faq-subtitle-link {
  color: var(--hwt-color-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s ease;
}

.hwt-faq-section .hwt-faq-subtitle-link:hover {
  opacity: 0.7;
  color: var(--hwt-color-heading);
  text-decoration: underline;
}

/* ============================================================
   FAQ LIST
   ============================================================ */
.hwt-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ============================================================
   FAQ ITEM (uses <details>/<summary> for no-JS accordion)
   ============================================================ */
.hwt-faq-item {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   QUESTION (summary)
   ============================================================ */
.hwt-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none; /* hide default marker */
  -webkit-user-select: none;
  user-select: none;
}

/* Remove native marker in Safari/Chrome */
.hwt-faq-question::-webkit-details-marker {
  display: none;
}

.hwt-faq-question-text {
  font-size: var(--hwt-question-size);
  font-weight: var(--hwt-question-weight);
  line-height: var(--hwt-question-lh);
  letter-spacing: var(--hwt-question-ls);
  color: var(--hwt-color-heading);
}

/* ============================================================
   CHEVRON
   ============================================================ */
.hwt-faq-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

/* Rotate chevron when item is open */
.hwt-faq-item[open] > .hwt-faq-question .hwt-faq-chevron {
  transform: rotate(180deg);
}

/* Active / open question gets grey background */
.hwt-faq-item[open] > .hwt-faq-question {
  background-color: #f5f5f5;
}

/* ============================================================
   ANSWER
   ============================================================ */
.hwt-faq-answer {
  border-top: 1px solid #e5e5e5;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hwt-faq-answer p {
  font-size: var(--hwt-body-sm-size);
  font-weight: var(--hwt-body-sm-weight);
  line-height: var(--hwt-body-sm-lh);
  letter-spacing: var(--hwt-body-sm-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
}



/* ============================================================
   RESPONSIVE — 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  .hwt-faq-section {
    padding: 64px 0;
  }
}

/* ============================================================
   RESPONSIVE — 768 px
   ============================================================ */
@media (max-width: 768px) {
  .hwt-faq-section {
    padding: 56px 0;
  }

   /* Keep 30px side gutter (reference: transparency-section).
     Previously 15px → block was 30px wider than transparency. */
  .hwt-faq-container {
    gap: 36px;
    padding: 0 30px;
  }

  .hwt-faq-question {
    padding: 14px 16px;
  }

  .hwt-faq-answer {
    padding: 14px 16px;
  }
}

/* ============================================================
   RESPONSIVE — 480 px
   ============================================================ */
@media (max-width: 480px) {
  .hwt-faq-section {
    padding: 44px 0;
  }

  /* Keep 30px side gutter (reference: transparency-section).
     Previously 12px → block was 36px wider than transparency. */
  .hwt-faq-container {
    gap: 28px;
    padding: 0 30px;
  }

  .hwt-faq-question {
    padding: 12px 14px;
    gap: 12px;
  }

  .hwt-faq-answer {
    padding: 12px 14px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-913e3ce *//*  Community Reviews Section - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* ============================================================
   ELEMENTOR CONTAINER OVERRIDE
   Expand boxed Elementor parent so 100vw breakout works.
   ============================================================ */
.e-con:has(.hwt-reviews-section),
.e-con:has(.hwt-reviews-section) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   RESET
   ============================================================ */
.hwt-reviews-section,
.hwt-reviews-section *,
.hwt-reviews-section *::before,
.hwt-reviews-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   SECTION
   ============================================================ */
.hwt-reviews-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 80px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.hwt-reviews-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
.hwt-reviews-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.hwt-reviews-heading {
  font-size: var(--hwt-heading-size);
  font-weight: var(--hwt-heading-weight);
  line-height: var(--hwt-heading-lh);
  letter-spacing: var(--hwt-heading-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

.hwt-reviews-subtitle {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body);
  max-width: 672px;
  margin: 0;
  padding: 0;
}

/* ============================================================
   CARDS ROW
   ============================================================ */
.hwt-reviews-cards {
  display: flex;
  gap: 32px;
  justify-content: center;
  width: 100%;
}

/* ============================================================
   SINGLE REVIEW CARD
   ============================================================ */
.hwt-reviews-card {
  flex: 1 1 0%;
  min-width: 0;
  background-color: #fafafa;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   STARS
   ============================================================ */
.hwt-reviews-stars {
  display: flex;
  gap: 4px;
}

.hwt-reviews-stars svg {
  display: block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* ============================================================
   REVIEW TEXT
   ============================================================ */
.hwt-reviews-text {
  font-size: var(--hwt-body-sm-size);
  font-weight: var(--hwt-body-sm-weight);
  line-height: var(--hwt-body-sm-lh);
  letter-spacing: var(--hwt-body-sm-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   AUTHOR ROW
   ============================================================ */
.hwt-reviews-author {
  display: flex;
  align-items: center;
  padding-top: 8px;
}

/* Avatar */
.hwt-reviews-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  background-color: #d1d5db;
  margin-right: 12px;
}

.hwt-reviews-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Author Info */
.hwt-reviews-author-info {
  display: flex;
  flex-direction: column;
}

.hwt-reviews-name {
  font-size: var(--hwt-author-name-size);
  font-weight: var(--hwt-author-name-weight);
  line-height: var(--hwt-author-name-lh);
  letter-spacing: var(--hwt-author-name-ls);
  color: var(--hwt-color-heading);
}

.hwt-reviews-badge {
  font-size: var(--hwt-label-size);
  font-weight: var(--hwt-label-weight);
  line-height: var(--hwt-label-lh);
  letter-spacing: var(--hwt-label-ls);
  color: var(--hwt-color-muted);
}

/* ============================================================
   BOTTOM LINK
   ============================================================ */
.hwt-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #000000;
  font-size: var(--hwt-cta-size);
  font-weight: var(--hwt-cta-weight);
  line-height: var(--hwt-cta-lh);
  letter-spacing: var(--hwt-cta-ls);
  color: var(--hwt-color-link);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hwt-reviews-link:hover {
  opacity: 0.7;
  color: #000000;
  text-decoration: none;
}

.hwt-reviews-link:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 4px;
}

.hwt-reviews-link svg {
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE — 1300 px
   ============================================================ */
@media (max-width: 1300px) {
  .hwt-reviews-container {
    padding: 0 30px;
    gap: 40px;
  }

  .hwt-reviews-cards {
    gap: 24px;
  }

  .hwt-reviews-card {
    padding: 28px;
  }
}

/* ============================================================
   RESPONSIVE — 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  .hwt-reviews-section {
    padding: 64px 0;
  }

  .hwt-reviews-container {
    gap: 36px;
  }

  .hwt-reviews-cards {
    gap: 20px;
  }

  .hwt-reviews-card {
    padding: 24px;
    gap: 16px;
  }
}

/* ============================================================
   RESPONSIVE — 768 px  (stack cards vertically)
   ============================================================ */
@media (max-width: 768px) {
  .hwt-reviews-section {
    padding: 56px 8px 56px 8px;
  }

  .hwt-reviews-container {
    padding: 0 24px;
    gap: 32px;
  }

  .hwt-reviews-cards {
    flex-direction: column;
    gap: 20px;
  }

  .hwt-reviews-card {
    padding: 28px;
    gap: 18px;
  }
}

/* ============================================================
   RESPONSIVE — 480 px
   ============================================================ */
@media (max-width: 480px) {
  .hwt-reviews-section {
    padding: 44px 16px 44px 16px;
  }

  .hwt-reviews-container {
    padding: 0 15px;
    gap: 28px;
  }

  .hwt-reviews-card {
    padding: 22px;
    gap: 16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0421190 *//*  Blog / Articles Section - Elementor Custom CSS */
/* All classes prefixed with 'hwt-' to avoid conflicts with WordPress theme */

/* ============================================================
   ELEMENTOR CONTAINER OVERRIDE
   Expand boxed Elementor parent so 100vw breakout works.
   ============================================================ */
.e-con:has(.hwt-blog-section),
.e-con:has(.hwt-blog-section) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   RESET
   ============================================================ */
.hwt-blog-section,
.hwt-blog-section *,
.hwt-blog-section *::before,
.hwt-blog-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   SECTION
   ============================================================ */
.hwt-blog-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #fafafa;
  border-bottom: 1px solid #e5e5e5;
  padding: 80px 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.hwt-blog-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
.hwt-blog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.hwt-blog-heading {
  font-size: var(--hwt-heading-size);
  font-weight: var(--hwt-heading-weight);
  line-height: var(--hwt-heading-lh);
  letter-spacing: var(--hwt-heading-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

.hwt-blog-subtitle {
  font-size: var(--hwt-body-size);
  font-weight: var(--hwt-body-weight);
  line-height: var(--hwt-body-lh);
  letter-spacing: var(--hwt-body-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 0;
}

/* ============================================================
   CARDS ROW
   ============================================================ */
.hwt-blog-cards {
  display: flex;
  gap: 32px;
  justify-content: center;
  width: 100%;
  padding-top: 32px;
}

/* ============================================================
   SINGLE CARD
   ============================================================ */
.hwt-blog-card {
  flex: 1 1 0%;
  min-width: 0;
  background-color: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.hwt-blog-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   CARD IMAGE
   ============================================================ */
.hwt-blog-card-img {
  width: 100%;
  height: 192px;
  overflow: hidden;
  flex-shrink: 0;
}

.hwt-blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   CARD BODY
   ============================================================ */
.hwt-blog-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 24px 24px 20px;
}

/* Date */
.hwt-blog-date {
  font-size: var(--hwt-label-size);
  font-weight: var(--hwt-label-weight);
  line-height: var(--hwt-label-lh);
  letter-spacing: var(--hwt-label-ls);
  color: var(--hwt-color-label);
  margin-bottom: 8px;
}

/* Card title */
.hwt-blog-card-title {
  font-size: var(--hwt-card-title-sm-size);
  font-weight: var(--hwt-card-title-sm-weight);
  line-height: var(--hwt-card-title-sm-lh);
  letter-spacing: var(--hwt-card-title-sm-ls);
  color: var(--hwt-color-heading);
  margin: 0;
  padding: 0;
}

/* Excerpt */
.hwt-blog-card-excerpt {
  font-size: var(--hwt-body-sm-size);
  font-weight: var(--hwt-body-sm-weight);
  line-height: var(--hwt-body-sm-lh);
  letter-spacing: var(--hwt-body-sm-ls);
  color: var(--hwt-color-body);
  margin: 0;
  padding: 16px 0;
}

/* Read More link */
.hwt-blog-read-more {
  display: inline-block;
  font-size: var(--hwt-readmore-size);
  font-weight: var(--hwt-readmore-weight);
  line-height: var(--hwt-readmore-lh);
  letter-spacing: var(--hwt-readmore-ls);
  color: var(--hwt-color-heading);
  text-transform: uppercase;
  border-bottom: 1px solid #000000;
  padding-bottom: 5px;
  align-self: flex-start;
  margin-top: 16px;
  transition: opacity 0.2s ease;
}

.hwt-blog-card:hover .hwt-blog-read-more {
  opacity: 0.7;
}


/* ============================================================
   RESPONSIVE — 1300 px
   Mirrors the same breakpoint in why-researchers-trust-us and
   community-reviews: the base rule uses padding: 0 16px so the
   cards can breathe on very wide displays, but once the viewport
   drops below ~1300 the gutter needs to widen to 30 px to stay
   visually aligned with hero / chemistry / transparency / faq
   (all of which use 0 30px from the base). Without this rule the
   blog container's content width was 28 px wider than the rest
   on every viewport from 1300 down to 768, which is most visible
   around 958 px.
   ============================================================ */
@media (max-width: 1300px) {
  .hwt-blog-container {
    padding: 0 30px;
  }
}

/* ============================================================
   RESPONSIVE — 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  .hwt-blog-section {
    padding: 64px 0;
  }

  .hwt-blog-cards {
    gap: 24px;
  }

  .hwt-blog-card-img {
    height: 170px;
  }

  .hwt-blog-card-body {
    padding: 20px 20px 18px;
  }
}

/* ============================================================
   RESPONSIVE — 768 px  (stack to 1 column + 2 visible)
   ============================================================ */
@media (max-width: 768px) {
  .hwt-blog-section {
    padding: 56px 0;
  }
  
  /* Keep the gutter at 30px so the card edge lines up with the
     other sections that use 0 30px from <=768 down — chemistry,
     transparency and faq. The earlier 24px value made the blog
     cards extend 12px wider than those neighbours and was the
     reason the section looked wider on viewports around 576. */
  .hwt-blog-container {
    padding: 0 30px;
  }

  .hwt-blog-cards {
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
  }

  .hwt-blog-card {
    flex: none;
    width: 100%;
  }

  .hwt-blog-card-img {
    height: 200px;
  }
}

/* ============================================================
   RESPONSIVE — 480 px
   ============================================================ */
@media (max-width: 480px) {
  .hwt-blog-section {
    padding: 44px 0;
  }

  /* Same reason as the 768 breakpoint: align with chemistry / faq /
     transparency (all 0 30px at <=480) instead of inheriting the
     narrower 0 15px the section originally used. */
  .hwt-blog-container {
    padding: 0 30px;
  }

  .hwt-blog-cards {
    gap: 20px;
    padding-top: 20px;
  }

  .hwt-blog-card-img {
    height: 180px;
  }

  .hwt-blog-card-body {
    padding: 18px 16px 16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ddf8ad7 *//* ============================================================
   HAWTONS — GLOBAL TYPOGRAPHY SYSTEM
   ============================================================
   Load this CSS globally via Elementor:
     • Option A — Paste into Elementor → Site Settings → Custom CSS
     • Option B — Add a dedicated HTML widget at the TOP of the page
       and load this file via Elementor's stylesheet loader.

   All typography tokens are CSS custom properties on :root.
   Each section references them with var(--hwt-…), so changing
   a value here updates every section at once.

   Reference baseline: "Chemistry Proven by Data" left column.
   ============================================================ */

:root {
  /* ── Font Stack ─────────────────────────────────────────── */
  --hwt-font-family: ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* ── Palette ────────────────────────────────────────────── */
  --hwt-color-heading:         #171717;
  --hwt-color-heading-inverse: #ffffff;
  --hwt-color-body:            #525252;
  --hwt-color-body-inverse:    #a3a3a3;
  --hwt-color-muted:           #737373;
  --hwt-color-label:           #a3a3a3;
  --hwt-color-link:            #000000;
  --hwt-color-link-inverse:    #ffffff;

  /* ── Hero Heading (h1 — unique to hero) ─────────────────── */
  --hwt-hero-heading-size:   58px;
  --hwt-hero-heading-weight: 450;
  --hwt-hero-heading-lh:     55px;
  --hwt-hero-heading-ls:     -0.9px;

  /* ── Hero Description ───────────────────────────────────── */
  --hwt-hero-desc-size:   18px;
  --hwt-hero-desc-weight: 400;
  --hwt-hero-desc-lh:     28px;
  --hwt-hero-desc-ls:     -0.72px;

  /* ── Section Heading — Large (two-column h2) ────────────── */
  --hwt-heading-lg-size:   36px;
  --hwt-heading-lg-weight: 400;
  --hwt-heading-lg-lh:     40px;
  --hwt-heading-lg-ls:     0px;

  /* ── Section Heading (centred h2: blog, reviews) ───────────────────────── */
  --hwt-heading-size:   30px;
  --hwt-heading-weight: 400;
  --hwt-heading-lh:     36px;
  --hwt-heading-ls:     0px;

  /* ── Card Title (20 px — why-trust cards, lab card) ─────── */
  --hwt-card-title-size:   20px;
  --hwt-card-title-weight: 400;
  --hwt-card-title-lh:     24px;
  --hwt-card-title-ls:     0px;

  /* ── Card Title Small (blog) ──────────────── */
  --hwt-card-title-sm-size:   20px;
  --hwt-card-title-sm-weight: 400;
  --hwt-card-title-sm-lh:     24px;
  --hwt-card-title-sm-ls:     0px;

  /* ── Body / Section Description (blog,reviews) ─────────────────── */
  --hwt-body-size:   16px;
  --hwt-body-weight: 400;
  --hwt-body-lh:     24px;
  --hwt-body-ls:     -0.6px;

  /* ── Body Small (blog, reviews) ───────────── */
  --hwt-body-sm-size:   14px;
  --hwt-body-sm-weight: 400;
  --hwt-body-sm-lh:     20px;
  --hwt-body-sm-ls:     -0.1px;

  /* ── Feature Title (14 px — icon+label pairs) ───────────── */
  --hwt-feature-title-size:   14px;
  --hwt-feature-title-weight: 450;
  --hwt-feature-title-lh:     20px;
  --hwt-feature-title-ls:     -0.6px;

  /* ── Feature Description (14 px — under feature titles) ─── */
  --hwt-feature-desc-size:   14px;
  --hwt-feature-desc-weight: 400;
  --hwt-feature-desc-lh:     20px;
  --hwt-feature-desc-ls:     -0.6px;

  /* ── FAQ Question (16 px) ───────────────────────────────── */
  --hwt-question-size:   16px;
  --hwt-question-weight: 400;
  --hwt-question-lh:     24px;
  --hwt-question-ls:     0px;

  /* ── CTA Link (reviews) ───────── */
  --hwt-cta-size:   14px;
  --hwt-cta-weight: 400;
  --hwt-cta-lh:     20px;
  --hwt-cta-ls:     0px;

  /* ── Button (14 px — dark filled buttons) ───────────────── */
  --hwt-btn-size:   14px;
  --hwt-btn-weight: 500;
  --hwt-btn-lh:     20px;
  --hwt-btn-ls:     0px;

  /* ── Read-More / Small CTA (blog) ─────────────────────── */
  --hwt-readmore-size:   12px;
  --hwt-readmore-weight: 400;
  --hwt-readmore-lh:     16px;
  --hwt-readmore-ls:     0.6px;

  /* ── Label (blog, reviews) ─────────────── */
  --hwt-label-size:   12px;
  --hwt-label-weight: 400;
  --hwt-label-lh:     16px;
  --hwt-label-ls:     -0.2px;

  /* ── Label Wide (12 px — section markers) ───────────────── */
  --hwt-label-wide-size:   12px;
  --hwt-label-wide-weight: 400;
  --hwt-label-wide-lh:     16px;
  --hwt-label-wide-ls:     2.4px;

  /* ── Stat Value (24 px — big numbers in cards) ──────────── */
  --hwt-stat-size:   24px;
  --hwt-stat-weight: 400;
  --hwt-stat-lh:     32px;
  --hwt-stat-ls:     0px;

  /* ── Stat Label (10 px — tiny uppercase below stats) ────── */
  --hwt-stat-label-size:   10px;
  --hwt-stat-label-weight: 400;
  --hwt-stat-label-lh:     15px;
  --hwt-stat-label-ls:     0px;

  /* ── Author Name (reviews) ───────────────── */
  --hwt-author-name-size:   14px;
  --hwt-author-name-weight: 450;
  --hwt-author-name-lh:     20px;
  --hwt-author-name-ls:     -0.5px;

  /* ── Badge Text (12 px — hero badge, product badge) ─────── */
  --hwt-badge-size:   12px;
  --hwt-badge-weight: 400;
  --hwt-badge-lh:     16px;
  --hwt-badge-ls:     0.3px;

  /* ── Product Name (16 px) ───────────────────────────────── */
  --hwt-product-name-size:   16px;
  --hwt-product-name-weight: 400;
  --hwt-product-name-lh:     20px;
  --hwt-product-name-ls:     0px;

  /* ── Product Price (14 px) ──────────────────────────────── */
  --hwt-product-price-size:   15px;
  --hwt-product-price-weight: 450;
  --hwt-product-price-lh:     20px;
  --hwt-product-price-ls:     -0.5px;

  /* ── Tab (16 px — filter tabs) ──────────────────────────── */
  --hwt-tab-size:   16px;
  --hwt-tab-weight: 400;
  --hwt-tab-lh:     20px;
  --hwt-tab-ls:     0px;
}

/* ============================================================
   RESPONSIVE — 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --hwt-heading-lg-size: 32px;
    --hwt-heading-lg-lh:   38px;

    --hwt-heading-size: 28px;
    --hwt-heading-lh:   34px;

    --hwt-card-title-size: 18px;
    --hwt-card-title-lh:   26px;

    --hwt-stat-size: 20px;
    --hwt-stat-lh:   28px;
  }
}

/* ============================================================
   RESPONSIVE — 900 px  (heading-lg sections go single-column)
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --hwt-heading-lg-size: 30px;
    --hwt-heading-lg-lh:   36px;
  }
}

/* ============================================================
   RESPONSIVE — 768 px
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --hwt-heading-lg-size: 28px;
    --hwt-heading-lg-lh:   34px;

    --hwt-heading-size: 26px;
    --hwt-heading-lh:   32px;

    --hwt-body-size: 15px;
    --hwt-body-lh:   22px;

    --hwt-question-size: 15px;
    --hwt-question-lh:   22px;

    --hwt-stat-size: 18px;
    --hwt-stat-lh:   26px;

    --hwt-feature-desc-size: 13px;
    --hwt-feature-desc-lh:   19px;

    --hwt-product-name-size: 14px;
    --hwt-product-name-lh:   20px;

    --hwt-product-price-size: 13px;
    --hwt-product-price-lh:   18px;

    --hwt-tab-size: 14px;
    --hwt-tab-lh:   20px;
  }
}

/* ============================================================
   RESPONSIVE — 480 px
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --hwt-heading-lg-size: 24px;
    --hwt-heading-lg-lh:   30px;

    --hwt-heading-size: 24px;
    --hwt-heading-lh:   30px;

    --hwt-body-size: 14px;
    --hwt-body-lh:   21px;

    --hwt-body-sm-size: 13px;
    --hwt-body-sm-lh:   20px;

    --hwt-card-title-size: 16px;
    --hwt-card-title-lh:   24px;

    --hwt-card-title-sm-size: 16px;
    --hwt-card-title-sm-lh:   22px;

    --hwt-question-size: 14px;
    --hwt-question-lh:   20px;

    --hwt-stat-size: 16px;
    --hwt-stat-lh:   24px;
  }
}/* End custom CSS */