/* Condition taxonomy archive - design from html-theme, tokens from colors.css */
.condition-page{background:var(--off-white)}
.condition-page .container{width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
/* =======================================
CONDITION / TREATMENT TAXONOMY (Figma ciwxbi)
======================================= */
.condition-page .condition-page-header {
background-color: var(--navy);
}
.condition-page .condition-page__breadcrumb,
.condition-page .product-page__breadcrumb.condition-page__breadcrumb {
padding: 18px 0 0;
background-color: var(--navy);
}
.condition-page .condition-hero,
.condition-page .treatment-hero {
padding: 32px 0 40px;
background-color: transparent;
}
.condition-page .condition-hero__media,
.condition-page .treatment-hero__media {
min-height: 360px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, #eef2eb 0%, var(--off-white) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.condition-page .condition-hero__image,
.condition-page .treatment-hero__image {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
}
.condition-page .treatment-hero__placeholder {
color: rgba(44, 51, 56, 0.25);
font-size: 48px;
}
.condition-page .condition-hero__content,
.condition-page .treatment-hero__content {
max-width: 520px;
}
.condition-page .condition-hero__title,
.condition-page .treatment-hero__title {
text-align: left;
}
.condition-page .condition-hero__intro,
.condition-page .condition-hero__description,
.condition-page .treatment-hero__intro {
text-align: left;
margin-left: 0;
}
.condition-page .condition-hero__cta:not(.condition-hero__cta--secondary),
.condition-page .treatment-hero__cta:not(.condition-hero__cta--secondary) {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 14px 28px;
border-radius: 9999px;
background-color: var(--teal);
color: #fff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.condition-page .condition-hero__cta:not(.condition-hero__cta--secondary):hover,
.condition-page .condition-hero__cta:not(.condition-hero__cta--secondary):focus-visible,
.condition-page .treatment-hero__cta:not(.condition-hero__cta--secondary):hover,
.condition-page .treatment-hero__cta:not(.condition-hero__cta--secondary):focus-visible {
filter: brightness(0.96);
box-shadow: 0 4px 14px rgba(44, 51, 56, 0.15);
color: #fff !important;
text-decoration: none;
}
.condition-page .condition-products,
.condition-page .treatment-products {
padding: 56px 0 72px;
background-color: var(--off-white);
}
/* Product cards — white image area (matches shop / home cards) */
.condition-page .condition-products .product-card__media,
.condition-page .treatment-products .product-card__media,
.condition-page .condition-products .product-image,
.condition-page .treatment-products .product-image,
.page-condition .condition-products .product-card__media,
.page-condition .treatment-products .product-card__media,
.page-condition .condition-products .product-image,
.page-condition .treatment-products .product-image{
background:var(--white)!important;
}
.condition-page .treatment-section-header {
max-width: 640px;
margin: 0 auto 40px;
}
.condition-page .treatment-section-header__badge {
display: inline-block;
margin-bottom: 12px;
padding: 6px 18px;
border-radius: 20px;
background-color: var(--teal);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.condition-page .treatment-section-header__title {
margin: 0 0 12px;
font-family: Fraunces, serif;
font-size: 42px;
font-weight: 400;
line-height: 1.2;
color: var(--navy);
}
.condition-page .treatment-section-header__intro {
margin: 0 auto;
max-width: 500px;
font-size: 14px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .condition-page__back {
position: relative;
z-index: 2;
}
.condition-page .condition-page__back-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 9999px;
background-color: var(--teal);
font-size: 14px;
font-weight: 600;
color: #fff !important;
text-decoration: none;
cursor: pointer;
pointer-events: auto;
transition: background-color 0.2s ease, color 0.2s ease;
}
.condition-page .condition-page__back-link .condition-page__back-arrow,
.condition-page .condition-page__back-link .condition-page__back-label {
color: #fff !important;
}
.condition-page .condition-page__back-link:hover,
.condition-page .condition-page__back-link:focus-visible {
filter: brightness(0.96);
box-shadow: 0 4px 14px rgba(44, 51, 56, 0.15);
color: #fff !important;
text-decoration: none;
}
.condition-page .product-page__breadcrumb.condition-page__breadcrumb a.condition-page__back-link {
color: #fff !important;
background-color: var(--teal);
}
.condition-page .condition-hero__consent,
.condition-page .treatment-hero__consent {
margin: 16px 0 0;
max-width: 420px;
font-size: 12px;
line-height: 1.5;
color: var(--grey-500);
}
.condition-page .condition-hero__consent a {
color: var(--teal);
text-decoration: underline;
}
.condition-page .treatment-journey,
.condition-page .condition-journey {
padding: 72px 0 80px;
background-color: var(--off-white);
}
.condition-page .treatment-journey__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.condition-page .treatment-journey__card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 36px 28px;
background-color: #fff;
border-radius: 16px;
min-height: 220px;
}
.condition-page .treatment-journey__number {
font-family: Fraunces, serif;
font-size: 36px;
line-height: 1;
color: var(--teal);
opacity: 0.35;
}
.condition-page .treatment-journey__card-title {
margin: 0;
font-family: Fraunces, serif;
font-size: 19px;
font-weight: 400;
color: var(--navy);
}
.condition-page .treatment-journey__card-text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .treatment-explanation,
.condition-page .condition-explanation {
padding: 88px 0;
background-color: #eff3ec;
}
.condition-page .treatment-explanation__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
max-width: 1140px;
margin: 0 auto;
}
.condition-page .treatment-explanation__card {
display: flex;
flex-direction: column;
gap: 24px;
padding: 40px 36px;
background-color: #fff;
border-radius: 16px;
}
.condition-page .treatment-explanation__card-title {
margin: 0;
font-family: Fraunces, serif;
font-size: 22px;
font-weight: 400;
line-height: 1.25;
color: var(--navy);
}
.condition-page .treatment-explanation__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.condition-page .treatment-explanation__list-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0;
}
.condition-page .treatment-explanation__check {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: 2px;
border-radius: 50%;
background-color: rgba(212, 98, 43, 0.08);
color: var(--teal);
}
.condition-page .treatment-explanation__list-text {
font-size: 15px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .treatment-explanation__body {
font-size: 15px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .treatment-explanation__body p:last-child {
margin-bottom: 0;
}
.condition-page .treatment-bottom-cta {
padding: 56px 0 32px;
background-color: var(--navy);
}
.condition-page .treatment-trust-points {
padding: 0 0 40px;
background-color: var(--navy);
}
.condition-page .treatment-trust-points__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 32px;
margin: 0;
padding: 0;
list-style: none !important;
}
.condition-page .treatment-trust-points__list li {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
line-height: 1.4;
color: rgba(44, 51, 56, 0.75);
list-style: none !important;
}
.condition-page .treatment-trust-points__list li::before {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--teal);
}
.condition-page .treatment-bottom-cta__disclaimer {
max-width: 720px;
margin: 0 auto 24px;
font-size: 14px;
line-height: 1.65;
color: var(--grey-500);
}
.condition-page .treatment-bottom-cta__btn {
display: inline-flex;
align-items: center;
padding: 14px 32px;
border-radius: 9999px;
background-color: var(--teal);
color: #fff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.condition-page .treatment-bottom-cta__btn:hover {
filter: brightness(0.96);
box-shadow: 0 4px 14px rgba(44, 51, 56, 0.15);
color: #fff !important;
}
.condition-page .condition-faqs.treatment-faqs {
padding: 72px 0 80px;
background-color: #fff;
}
.condition-page .condition-faqs__header {
margin-bottom: 40px;
}
.condition-page .condition-faqs__list {
max-width: 900px;
margin: 0 auto;
}
.condition-page .condition-faq-item {
border-bottom: 1px solid var(--grey-200);
}
.condition-page .condition-faq-item__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.condition-page .condition-faq-item__question .faq-question-title {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--navy);
}
.condition-page .condition-faq-item__question .faq-toggle,
.condition-page .condition-faq-item__chevron {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--teal);
color: #fff;
font-size: 14px;
transition: transform 0.2s ease;
}
.condition-page .condition-faq-item__question.is-open .condition-faq-item__chevron,
.condition-page .condition-faq-item__question[aria-expanded="true"] .condition-faq-item__chevron {
transform: rotate(180deg);
}
.condition-page .condition-faq-item__question .faq-toggle i,
.condition-page .condition-faq-item__chevron i {
color: #fff;
}
.condition-page .condition-faq-item .faq-answer-inner {
padding: 0 0 20px;
font-size: 15px;
line-height: 1.65;
color: var(--grey-500);
}
.condition-page .condition-products__empty,
.condition-page .shop-products__empty {
max-width: 560px;
margin: 0 auto;
font-size: 15px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .condition-products__header,
.condition-page .treatment-products__header {
max-width: 640px;
margin: 0 auto 40px;
}
.condition-page .condition-products__badge,
.condition-page .treatment-products__badge {
display: inline-block;
margin-bottom: 16px;
padding: 6px 16px;
border-radius: 20px;
background-color: var(--teal);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.condition-page .condition-products__title,
.condition-page .treatment-products__title {
margin: 0 0 12px;
font-family: Fraunces, serif;
font-size: 36px;
font-weight: 400;
line-height: 1.15;
color: var(--navy);
}
.condition-page .condition-products__intro,
.condition-page .treatment-products__intro {
margin: 0 auto;
font-size: 15px;
line-height: 1.7;
color: var(--grey-500);
}
.condition-page .condition-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.condition-page .condition-hero__cta--secondary {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 14px 28px;
border-radius: 9999px;
border: 1px solid var(--grey-200);
background-color: #fff;
color: var(--navy) !important;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.condition-page .condition-hero__cta--secondary:hover,
.condition-page .condition-hero__cta--secondary:focus-visible {
border-color: var(--teal);
background-color: #fff;
color: var(--teal) !important;
box-shadow: 0 2px 12px rgba(44, 51, 56, 0.1);
text-decoration: none;
}
.condition-page .condition-hero__tagline {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .condition-content {
padding: 72px 0 80px;
background-color: #fff;
}
.condition-page .condition-content__media {
border-radius: 16px;
overflow: hidden;
background: var(--primary-06);
}
.condition-page .condition-content__image {
width: 100%;
height: auto;
display: block;
}
/* Logged-in returning patient (marketing view) */
.condition-page--returning .condition-hero__badge--welcome {
text-transform: uppercase;
letter-spacing: 1.5px;
}
.condition-page .condition-hero__notice {
margin: 12px 0 0;
padding: 12px 16px;
border-radius: 12px;
background-color: var(--primary-06);
font-size: 14px;
line-height: 1.55;
color: var(--grey-500);
}
/* Post-consultation / reorder results */
.condition-page--post-consultation .condition-results-hero {
padding: 40px 0 32px;
background-color: var(--navy);
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__body {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.condition-page--post-consultation .condition-results-hero--completion.shop-hero {
background-color: var(--navy);
border-bottom: none;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__title {
margin: 0 0 16px;
font-family: Fraunces, serif;
font-size: clamp(32px, 5vw, 44px);
font-weight: 400;
line-height: 1.2;
color: var(--white);
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__icon {
display: block;
margin: 0 auto 12px;
font-size: 28px;
color: var(--teal);
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__content {
margin: 0 0 16px;
font-size: 15px;
line-height: 1.65;
color: var(--on-dark-70);
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__content strong {
display: block;
margin-bottom: 8px;
font-size: 18px;
color: var(--white);
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__trust {
margin-top: 20px;
font-size: 14px;
line-height: 1.6;
color: var(--on-dark-60);
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__dispatch {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 10px;
max-width: 720px;
margin: 20px auto 0;
padding: 14px 18px;
border-radius: 12px;
background-color: var(--on-dark-08);
font-size: 14px;
line-height: 1.55;
color: var(--on-dark-70);
text-align: left;
}
.condition-page--post-consultation .condition-results-hero__breadcrumb {
color: var(--on-dark-50);
}
.condition-page--post-consultation .condition-results-hero__breadcrumb a {
color: var(--on-dark-70);
}
.condition-page--post-consultation .condition-results-hero__breadcrumb a:hover {
color: var(--teal);
}
.condition-page .condition-progress-steps {
padding: 18px 0;
background-color: var(--off-white);
border-bottom: 1px solid var(--grey-200);
}
.condition-page .consultation-completion-taglines .tagline-item::after {
content: none !important;
display: none !important;
}
.condition-page .condition-progress-steps__list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 18px;
margin: 0;
padding: 0;
list-style: none;
}
.condition-page .condition-progress-steps__item {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.condition-page .condition-progress-steps__bubble {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
box-sizing: border-box;
line-height: 0;
}
.condition-page .condition-progress-steps__icon,
.condition-page .condition-progress-steps__icon.icon-img {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
.condition-page .condition-progress-steps__icon i {
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
margin: 0;
line-height: 1;
text-align: center;
}
.condition-page .condition-progress-steps__icon i::before {
display: block;
line-height: 1;
}
.condition-page .condition-progress-steps__item--complete .condition-progress-steps__bubble {
background-color: #fff;
}
.condition-page .condition-progress-steps__item--complete .condition-progress-steps__icon i {
font-size: 16px;
color: var(--aluna-orange, var(--teal));
}
.condition-page .condition-progress-steps__item--pending .condition-progress-steps__bubble {
border: 2px solid rgba(255, 255, 255, 0.75);
background-color: transparent;
}
.condition-page .condition-progress-steps__item--pending .condition-progress-steps__icon i {
font-size: 13px;
color: #fff;
}
.condition-page .condition-progress-steps__item--pending .condition-progress-steps__label {
opacity: 0.92;
}
.condition-page .condition-progress-steps__arrow {
display: inline-flex;
align-items: center;
color: var(--grey-400);
font-size: 14px;
list-style: none;
}
@media (max-width: 767.98px) {
.condition-page--post-consultation .condition-results-hero {
padding: 30px 0 0;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__body {
text-align: left;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__title {
max-width: 260px;
margin-bottom: 16px;
font-size: clamp(32px, 9vw, 40px);
line-height: 1.08;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__icon {
float: right;
width: 58px;
height: 58px;
margin: 0 0 12px 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--teal);
color: var(--white);
box-shadow: 0 0 0 8px var(--primary-20);
font-size: 24px;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__content {
clear: both;
margin-bottom: 18px;
font-size: 16px;
line-height: 1.55;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__dispatch {
width: 100%;
max-width: 100%;
margin: 18px 0 0;
padding: 14px 16px;
overflow: hidden;
align-items: flex-start;
font-size: 14px;
line-height: 1.45;
white-space: normal;
}
.condition-page--post-consultation .condition-results-hero--completion .condition-results-hero__dispatch * {
min-width: 0;
overflow-wrap: anywhere;
}
.condition-page .condition-progress-steps {
padding: 0 0 24px;
background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 46%, var(--off-white) 46%, var(--off-white) 100%);
}
.condition-page .condition-progress-steps .container {
padding-left: 16px;
padding-right: 16px;
}
.condition-page .condition-progress-steps__list {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
padding: 14px;
border-radius: 14px;
background-color: #fff;
border: 1px solid var(--grey-200);
box-shadow: 0 2px 12px rgba(44, 51, 56, 0.06);
}
.condition-page .condition-progress-steps__item {
flex: 0 0 auto;
min-width: 0;
flex-direction: row;
align-items: center;
gap: 12px;
text-align: left;
color: var(--navy);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.condition-page .condition-progress-steps__bubble {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
box-sizing: border-box;
}
.condition-page .condition-progress-steps__item--complete .condition-progress-steps__bubble {
background-color: var(--teal);
border: none;
}
.condition-page .condition-progress-steps__item--complete .condition-progress-steps__icon i {
font-size: 16px;
color: #fff;
}
.condition-page .condition-progress-steps__item--pending .condition-progress-steps__bubble {
background-color: #fff;
border: 2px solid var(--grey-200);
}
.condition-page .condition-progress-steps__item--pending .condition-progress-steps__icon i {
font-size: 14px;
color: var(--grey-500);
}
.condition-page .condition-progress-steps__item--pending .condition-progress-steps__label {
opacity: 1;
color: var(--aluna-body, #5a6268);
}
.condition-page .condition-progress-steps__label {
display: block;
max-width: none;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.condition-page .condition-progress-steps__arrow {
display: none;
}
.condition-page .condition-progress-steps__arrow i {
display: none;
}
.condition-page .condition-progress-steps__arrow::before {
content: "";
display: block;
width: 100%;
height: 2px;
border-radius: 999px;
background-color: var(--grey-200);
}
}
.condition-page .condition-products--primary {
padding: 56px 0 48px;
background-color: #fff;
}
.condition-page .condition-products--more {
padding-top: 0;
padding-bottom: 72px;
background-color: #fff;
}
.condition-page .condition-results-hero__breadcrumb {
margin-bottom: 20px;
font-size: 13px;
color: var(--grey-500);
}
.condition-page .condition-results-hero__breadcrumb a {
color: var(--teal);
text-decoration: none;
}
.condition-page .condition-results-hero__panel {
max-width: 720px;
margin: 0 auto;
padding: 36px 40px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 2px 16px rgba(44, 51, 56, 0.06);
text-align: center;
}
.condition-page .condition-results-hero__title {
margin: 0 0 16px;
font-family: Fraunces, serif;
font-size: 36px;
font-weight: 400;
line-height: 1.2;
color: var(--navy);
}
.condition-page .condition-results-hero__icon {
display: block;
margin: 0 auto 12px;
font-size: 28px;
color: var(--teal);
}
.condition-page .condition-results-hero__intro,
.condition-page .condition-results-hero__content {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--grey-500);
}
.condition-page .condition-results-hero__trust {
margin-top: 20px;
font-size: 14px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .condition-results-hero__dispatch {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 720px;
margin: 20px auto 0;
padding: 14px 18px;
border-radius: 12px;
background-color: var(--primary-06);
font-size: 14px;
color: var(--grey-500);
}
.condition-page .condition-recommended {
background-color: #fff;
}
.condition-page .condition-complete-hero {
padding: 24px 0 40px;
background-color: var(--navy);
}
.condition-page .condition-complete-hero__card {
max-width: 820px;
margin: 24px auto 0;
padding: 32px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 2px 16px rgba(44, 51, 56, 0.06);
}
.condition-page .condition-complete-hero__title {
margin: 0 0 16px;
font-family: Fraunces, serif;
font-size: 32px;
font-weight: 400;
color: var(--navy);
}
.condition-page .condition-complete-hero__title i {
color: var(--teal);
margin-right: 8px;
}
.condition-page .condition-complete-hero__dispatch {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 14px 18px;
border-radius: 12px;
background-color: var(--primary-06);
font-size: 14px;
color: var(--grey-500);
}
.condition-page .condition-taglines {
padding: 16px 0;
background-color: var(--off-white);
}
.condition-page .condition-taglines__list {
justify-content: center;
flex-wrap: wrap;
gap: 16px 24px;
}
.condition-page .condition-order-steps {
padding: 56px 0;
background-color: var(--off-white);
}
.condition-page .condition-order-steps__countdown {
margin-bottom: 32px;
padding: 20px 24px;
border-radius: 16px;
text-align: center;
font-size: 14px;
color: var(--grey-500);
}
.condition-page .condition-order-steps__item {
padding: 24px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 2px 16px rgba(44, 51, 56, 0.06);
}
.condition-page .condition-order-steps__icon img {
max-height: 48px;
margin-bottom: 16px;
}
.condition-page .condition-popular-categories {
padding: 56px 0 72px;
background-color: #fff;
}
.condition-page .condition-popular-categories__card {
border-radius: 16px;
overflow: hidden;
background-color: var(--off-white);
box-shadow: 0 2px 16px rgba(44, 51, 56, 0.06);
}
.condition-page .condition-popular-categories__media {
min-height: 200px;
overflow: hidden;
}
.condition-page .condition-popular-categories__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.condition-page .condition-popular-categories__body {
padding: 24px;
}
.condition-page .condition-popular-categories__title {
margin: 0 0 12px;
font-family: Fraunces, serif;
font-size: 22px;
font-weight: 400;
}
.condition-page .condition-popular-categories__title a {
color: var(--navy);
text-decoration: none;
}
.condition-page .condition-popular-categories__desc {
margin-bottom: 16px;
font-size: 14px;
line-height: 1.6;
color: var(--grey-500);
}
.condition-page .condition-complete-intro {
padding: 48px 0 24px;
background-color: var(--off-white);
}
.condition-page .condition-complete-intro__title {
margin: 0 0 12px;
font-family: Fraunces, serif;
font-size: 32px;
font-weight: 400;
color: var(--navy);
}
.condition-page .condition-page__breadcrumb-nav {
margin-bottom: 8px;
}
@media (max-width: 1199.98px) {
.condition-page .treatment-journey__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.condition-page .condition-hero__content,
.condition-page .treatment-hero__content {
max-width: none;
text-align: center;
}
.condition-page .condition-hero__consent,
.condition-page .treatment-hero__consent {
margin-left: auto;
margin-right: auto;
}
.condition-page .treatment-hero__title,
.condition-page .condition-hero__intro,
.condition-page .condition-hero__description,
.condition-page .treatment-hero__intro {
text-align: center;
}
.condition-page .condition-hero__media,
.condition-page .treatment-hero__media {
min-height: 280px;
}
.condition-page .condition-hero__image,
.condition-page .treatment-hero__image {
min-height: 280px;
}
.condition-page .condition-hero__actions {
justify-content: center;
}
.condition-page .treatment-journey__grid {
grid-template-columns: 1fr;
}
.condition-page .treatment-explanation__grid {
grid-template-columns: 1fr;
}
.condition-page .treatment-section-header__title {
font-size: 32px;
}
.condition-page .treatment-trust-points__list {
flex-direction: column;
align-items: center;
gap: 10px;
}
.condition-page .condition-results-hero__panel {
padding: 28px 24px;
}
.condition-page .condition-results-hero__title {
font-size: 28px;
}
}
@media (max-width: 768px) {
.condition-page .condition-sticky-cta {
padding: 10px 0;
opacity: 1 !important;
visibility: visible !important;
transform: translate3d(0, 0, 0) !important;
}
.condition-page .condition-sticky-cta .container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
}
.condition-page .condition-sticky-cta .sticky-cta-text {
min-width: 0;
flex: 1 1 auto;
font-size: 14px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.condition-page .condition-sticky-cta .sticky-cta-text span {
display: inline;
margin-left: 6px;
font-size: 12px;
white-space: nowrap;
}
.condition-page .condition-sticky-cta .sticky-cta-actions {
width: auto;
flex: 0 0 auto;
flex-direction: row;
justify-content: flex-end;
}
.condition-page .condition-sticky-cta .sticky-cta__button {
width: auto;
min-height: 44px;
justify-content: center;
padding: 11px 18px;
font-size: 13px;
border-radius: 9999px;
}
body.has-condition-sticky-cta {
padding-bottom: 0;
}
body.has-condition-sticky-cta .site-footer {
padding-bottom: 72px;
}
body.has-condition-sticky-cta .scroll-to-top-btn {
bottom: 86px;
}
body.nav-open .condition-page .condition-sticky-cta {
display: none;
}
}
@media (max-width: 420px) {
.condition-page .condition-sticky-cta .sticky-cta-text {
font-size: 13px;
}
.condition-page .condition-sticky-cta .sticky-cta-text span {
display: block;
margin-left: 0;
margin-top: 2px;
}
.condition-page .condition-sticky-cta .sticky-cta__button {
padding: 10px 14px;
font-size: 12px;
}
}
/* html-theme condition page (page-condition) */
.page-condition .condition-hero{
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 50%,var(--color-dark-tint) 100%)!important;
padding:clamp(48px,6vw,80px) 0 clamp(60px,8vw,100px);
position:relative;
overflow:hidden;
color:var(--white);
}
.page-condition .condition-hero__cta-secondary{
background:rgba(255,255,255,0.1)!important;
color:var(--white)!important;
border:1px solid rgba(255,255,255,0.3)!important;
}
.page-condition .condition-hero__cta-secondary:hover{
background:rgba(255,255,255,0.18)!important;
color:var(--white)!important;
}
.page-condition .hero-image img.condition-hero__image{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.page-condition .video-stories-section .video-testimonials-header{
text-align:center;
margin-bottom:28px;
}
/* Reviews + video + FAQs � avoid double section-pad gap (html-theme uses one block) */
.page-condition .reviews-section{
padding-top:clamp(48px,5vw,72px);
padding-bottom:clamp(24px,3vw,40px);
background:var(--off-white);
}
.page-condition .reviews-section:not(.video-stories-section) .reviews-grid{
margin-bottom:clamp(32px,4vw,48px);
}
.page-condition .video-stories-section{
padding-top:0;
padding-bottom:clamp(32px,4vw,48px);
}
.page-condition .video-stories-section .video-scroll-arrows{
margin-top:12px;
}
.page-condition .condition-faq-section{
padding-top:clamp(40px,5vw,56px);
padding-bottom:var(--section-pad);
}
.page-condition .condition-faq-section .section-header{
text-align:center;
}
/* About this condition � alternating image / copy rows */
.page-condition .condition-about-section .section-header{
text-align:center;
max-width:720px;
margin:0 auto 48px;
}
.page-condition .condition-about-section .section-header p{
margin:12px auto 0;
max-width:560px;
font-size:15px;
line-height:1.7;
color:var(--grey-500);
}
.page-condition .condition-about-rows{
display:flex;
flex-direction:column;
gap:56px;
}
.page-condition .condition-about-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:center;
}
.page-condition .condition-about-row--reverse .condition-about-row__media{
order:2;
}
.page-condition .condition-about-row--reverse .condition-about-row__content{
order:1;
}
.page-condition .condition-about-row__media{
border-radius:var(--radius-lg);
overflow:hidden;
background:var(--grey-100);
min-height:280px;
}
.page-condition .condition-about-row__image{
width:100%;
height:100%;
min-height:280px;
object-fit:cover;
display:block;
vertical-align:middle;
}
.page-condition .condition-about-row__placeholder{
min-height:280px;
display:flex;
align-items:center;
justify-content:center;
color:var(--grey-300);
}
.page-condition .condition-about-row__placeholder svg{
width:64px;
height:64px;
}
.page-condition .condition-about-row__content{
font-size:15px;
line-height:1.8;
color:var(--grey-700);
}
.page-condition .condition-about-row__content p{
margin:0 0 16px;
}
.page-condition .condition-about-row__content p:last-child{
margin-bottom:0;
}
.page-condition .condition-about-row__content strong{
color:var(--navy);
font-weight:600;
}
.page-condition .condition-about-row__content h2,
.page-condition .condition-about-row__content h3,
.page-condition .condition-about-row__content h4{
font-family:'DM Sans',sans-serif;
font-size:clamp(20px,2.5vw,24px);
font-weight:600;
color:var(--navy);
margin:0 0 12px;
line-height:1.3;
}
.page-condition .condition-about-row__content ul,
.page-condition .condition-about-row__content ol{
margin:0 0 16px;
padding-left:1.25em;
}
.page-condition .condition-about-row__content li{
margin-bottom:8px;
}
@media (max-width:992px){
.page-condition .condition-about-row{
grid-template-columns:1fr;
gap:24px;
}
.page-condition .condition-about-row--reverse .condition-about-row__media,
.page-condition .condition-about-row--reverse .condition-about-row__content{
order:unset;
}
.page-condition .condition-about-row__media,
.page-condition .condition-about-row__image{
min-height:220px;
}
}
/* Shared care (after video testimonials) */
.page-condition .shared-care-section{
padding:80px 0;
background:#fff;
}
.page-condition .shared-care-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:stretch;
}
.page-condition .shared-care-text{
margin-bottom:25px;
line-height:1.6;
color:#4a5568;
}
.page-condition .shared-care-checklist{
list-style:none;
padding:0;
margin:0 0 25px;
}
.page-condition .shared-care-checklist li{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:12px;
font-size:15px;
color:#4a5568;
}
.page-condition .shared-care-checklist li svg{
margin-top:3px;
flex-shrink:0;
}
.page-condition .shared-care-disclaimer{
font-size:14px;
color:#a0aec0;
margin:0;
}
.page-condition .operate-card{
background:#1a2b4c;
color:#fff;
padding:40px;
border-radius:12px;
display:flex;
flex-direction:column;
justify-content:center;
}
.page-condition .operate-eyebrow{
color:#00C896;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:10px;
display:block;
}
.page-condition .operate-card h3{
color:#fff;
margin:0 0 30px;
font-size:28px;
}
.page-condition .operate-items{
display:flex;
flex-direction:column;
gap:25px;
}
.page-condition .operate-item h4{
color:#fff;
margin:0 0 5px;
font-size:16px;
font-weight:600;
}
.page-condition .operate-item p{
color:#cbd5e0;
margin:0;
font-size:14px;
line-height:1.5;
}
.page-condition .section-eyebrow.has-line{
color:#00C896;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
display:flex;
align-items:center;
gap:10px;
margin-bottom:15px;
}
.page-condition .section-eyebrow.has-line::before{
content:"";
display:block;
width:30px;
height:2px;
background:#00C896;
}
@media (max-width:768px){
.page-condition .shared-care-grid{
grid-template-columns:1fr;
}
.condition-page .submission-complete .success-banner{
padding:32px 0 0;
background:var(--navy);
}
.condition-page .submission-complete .success-banner__inner{
display:block;
padding-left:26px;
padding-right:26px;
}
.condition-page .submission-complete .success-banner__title-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:start;
margin-bottom:18px;
}
.condition-page .submission-complete .success-banner__title-row h1{
margin:0;
font-size:clamp(34px,9vw,42px);
line-height:1.08;
}
.condition-page .submission-complete .success-icon--inline{
width:58px;
height:58px;
margin-top:4px;
border-radius:50%;
box-shadow:0 0 0 8px var(--primary-20);
}
.condition-page .submission-complete .success-banner__intro{
margin:0;
font-size:16px;
line-height:1.55;
}
.condition-page .submission-complete .success-banner__dispatch{
width:100%;
max-width:100%;
margin:22px 0 0;
margin-bottom:18px;
padding:14px 16px;
border-radius:14px;
overflow:hidden;
display:flex;
align-items:flex-start;
gap:10px;
flex-shrink:1!important;
white-space:normal!important;
}
.condition-page .submission-complete .success-banner__dispatch svg{
flex:0 0 20px;
width:20px;
height:20px;
margin-top:2px;
}
.condition-page .submission-complete .success-banner__dispatch-text{
flex:1 1 auto;
min-width:0;
font-size:14px;
line-height:1.45;
white-space:normal!important;
overflow-wrap:break-word;
word-break:normal;
}
.condition-page .submission-complete .success-banner__dispatch-text p{
margin:0;
white-space:normal!important;
}
.condition-page .submission-complete .success-banner__dispatch-text strong{
white-space:nowrap;
}
.condition-page .submission-complete .next-steps-strip{
padding:24px 0;
background:var(--off-white);
}
.condition-page .submission-complete .next-steps-strip .container{
display:flex;
flex-direction:column;
gap:10px;
padding-left:26px;
padding-right:26px;
}
.condition-page .submission-complete .next-step-item{
display:flex;
align-items:center;
gap:12px;
width:100%;
min-height:54px;
padding:12px 14px;
border:1px solid var(--grey-200);
border-radius:14px;
background:var(--white);
color:var(--navy);
font-size:14px;
font-weight:700;
line-height:1.35;
box-shadow:0 10px 24px -22px var(--dark-45);
}
.condition-page .submission-complete .next-step-num{
flex:0 0 32px;
width:32px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--teal);
color:var(--white);
font-weight:700;
}
.condition-page .submission-complete .next-step-arrow{
display:none;
}
.page-condition .reviews-section:not(.video-stories-section) .reviews-grid{
display:flex!important;
grid-template-columns:none!important;
gap:16px;
margin-left:calc(-1 * clamp(20px,4vw,48px));
margin-right:calc(-1 * clamp(20px,4vw,48px));
margin-bottom:0;
padding:4px clamp(20px,4vw,48px) 14px;
overflow-x:auto;
overflow-y:visible;
scroll-snap-type:x mandatory;
scroll-padding-left:clamp(20px,4vw,48px);
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.page-condition .reviews-section:not(.video-stories-section) .reviews-grid::-webkit-scrollbar{
display:none;
}
.page-condition .reviews-section:not(.video-stories-section) .review-card{
flex:0 0 calc(100vw - (2 * clamp(20px,4vw,48px)))!important;
width:calc(100vw - (2 * clamp(20px,4vw,48px)))!important;
max-width:none!important;
min-height:0;
scroll-snap-align:start;
scroll-snap-stop:always;
}
.page-condition .reviews-section:not(.video-stories-section) .mobile-carousel-arrows{
display:flex;
gap:10px;
justify-content:center;
margin:16px 0 0;
}
.page-condition .reviews-section:not(.video-stories-section) .scroll-arrow.is-disabled,
.page-condition .reviews-section:not(.video-stories-section) .scroll-arrow:disabled{
opacity:.45;
cursor:not-allowed;
pointer-events:none;
}
.page-condition .video-stories-section .video-scroll{
display:flex!important;
gap:16px!important;
margin-left:calc(-1 * clamp(20px,4vw,48px));
margin-right:calc(-1 * clamp(20px,4vw,48px));
padding:4px clamp(20px,4vw,48px) 14px;
overflow-x:auto;
overflow-y:visible;
scroll-snap-type:x mandatory;
scroll-padding-left:clamp(20px,4vw,48px);
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.page-condition .video-stories-section .video-scroll::-webkit-scrollbar{
display:none;
}
.page-condition .video-stories-section .video-card{
flex:0 0 calc(100vw - (2 * clamp(20px,4vw,48px)))!important;
width:calc(100vw - (2 * clamp(20px,4vw,48px)))!important;
max-width:none!important;
margin-right:0!important;
scroll-snap-align:start;
scroll-snap-stop:always;
}
.page-condition .video-stories-section .video-scroll-arrows{
display:flex;
gap:10px;
justify-content:center;
margin:16px 0 0;
}
.page-condition .video-stories-section .scroll-arrow.is-disabled,
.page-condition .video-stories-section .scroll-arrow:disabled{
opacity:.45;
cursor:not-allowed;
pointer-events:none;
}
.condition-page .condition-hero .hero-stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:22px;
padding-top:18px;
border-top:1px solid var(--on-dark-12);
}
.condition-page .condition-hero .hero-stat{
min-width:0;
min-height:100px;
padding:14px 10px;
border:1px solid var(--on-dark-10);
border-radius:14px;
background:var(--on-dark-06);
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.condition-page .condition-hero .hero-stat-num{
font-size:clamp(26px,8vw,34px);
line-height:1;
}
.condition-page .condition-hero .hero-stat-label{
max-width:130px;
margin:8px auto 0;
font-size:12px;
line-height:1.35;
}
}
@media (max-width:420px){
.page-condition .reviews-section:not(.video-stories-section) .review-card{
flex-basis:calc(100vw - 40px)!important;
width:calc(100vw - 40px)!important;
}
.page-condition .video-stories-section .video-card{
flex-basis:calc(100vw - 40px)!important;
width:calc(100vw - 40px)!important;
}
.condition-page .condition-hero .hero-stats{
gap:8px;
}
.condition-page .condition-hero .hero-stat{
min-height:92px;
padding:12px 8px;
}
}