.rx-product-card-wrapper {
position: relative;
display: block;
width: 100%;
height: 100%;
z-index: 1;
perspective: 1000px;
font-family: var(--crx-font);
color: var(--crx-dark);
}
.rx-product-card-wrapper.rx-has-subscription {
min-height: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
position: relative;
overflow: visible;
}
.woocommerce ul.products li.product .rx-product-card-wrapper,
.woocommerce-page ul.products li.product .rx-product-card-wrapper {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.rx-showcase-card .rx-product-card-wrapper {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.rx-product-card-wrapper .rx-flip-card-front,
.rx-product-card-wrapper .rx-flip-card-back {
position: relative;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.rx-product-card-wrapper .rx-flip-card-back {
position: absolute;
top: 0;
left: 0;
z-index: 10;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 44px 16px 24px;
overflow-x: hidden;
overflow-y: scroll;
border-radius: 40px;
background: var(--crx-white);
box-shadow: none;
transform: rotateY(180deg);
}
.rx-product-card-wrapper.rx-flipped .rx-flip-card-front {
transform: rotateY(180deg);
pointer-events: none;
}
.rx-product-card-wrapper.rx-flipped .rx-flip-card-back {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
transform: rotateY(0deg);
}
.rx-flip-card-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--crx-white);
cursor: pointer;
}
.rx-flip-card-close:hover {
opacity: 0.7;
}
.rx-flip-card-close svg {
width: 20px;
height: 20px;
color: var(--crx-dark);
}
.rx-flip-card-back-content {
display: flex;
flex-direction: column;
gap: 16px;
box-sizing: border-box;
width: 100%;
}
.rx-payment-plan-section {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
}
.rx-payment-plan-title {
margin: 0;
font-family: var(--crx-font);
font-weight: 700;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--crx-dark);
}
.rx-payment-plan-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rx-subscription-options {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.rx-subscription-option {
margin: 0;
padding: 0;
}
.rx-subscription-label {
display: flex;
align-items: flex-start;
gap: 10px;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 12px 14px;
border: 0.5px solid var(--crx-divider);
border-radius: 20px;
background: var(--crx-white);
cursor: pointer;
}
.rx-subscription-label:hover {
border-color: var(--crx-dark);
}
.rx-subscription-label.checked {
border-color: var(--crx-dark);
background: var(--crx-white);
}
.rx-subscription-label input[type="radio"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--crx-dark);
cursor: pointer;
}
.rx-subscription-option-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.rx-subscription-option-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.rx-subscription-option-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: var(--crx-font);
font-weight: 500;
font-size: 13px;
line-height: 1.2;
color: var(--crx-dark);
}
.rx-popular-badge {
display: inline-block;
margin: 0;
padding: 3px 8px;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
font-family: var(--crx-font);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--crx-white);
}
.rx-subscription-option-price,
.rx-subscription-sale-price {
font-family: var(--crx-font);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
color: var(--crx-dark);
}
.rx-subscription-option-price-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.rx-subscription-regular-price {
font-size: 13px;
font-weight: 400;
text-decoration: line-through;
color: var(--crx-dark-60);
}
.rx-subscription-label:not(.checked) .rx-subscription-period-selector {
display: none;
}
.rx-subscription-period-selector {
margin: 4px 0 0;
padding: 10px 0 0;
border-top: 0.5px solid var(--crx-divider);
}
.rx-subscription-period-label {
margin: 0 0 8px;
font-family: var(--crx-font);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--crx-dark);
}
.rx-subscription-period-dropdown {
width: 100%;
min-height: 36px;
padding: 8px 12px;
border: 0.5px solid var(--crx-divider);
border-radius: var(--crx-radius-pill);
background: var(--crx-white);
font-family: var(--crx-font);
font-size: 13px;
color: var(--crx-dark);
cursor: pointer;
}
.rx-subscription-period-dropdown:focus {
outline: none;
border-color: var(--crx-dark);
}
.rx-flip-card-qty-controls {
display: flex;
align-items: stretch;
box-sizing: border-box;
width: 110px;
height: 40px;
overflow: hidden;
border: 0;
border-radius: var(--crx-radius-pill);
background: #333333;
}
.rx-flip-card-qty-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
min-width: 36px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: var(--crx-font);
font-size: 16px;
line-height: 1;
color: var(--crx-white);
cursor: pointer;
}
.rx-flip-card-qty-minus {
border-right: 2px solid var(--crx-dark);
}
.rx-flip-card-qty-plus {
border-left: 2px solid var(--crx-dark);
}
.rx-flip-card-qty-input {
width: 100%;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0 !important;
background: transparent;
font-family: var(--crx-font);
font-weight: 500;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--crx-white);
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
box-shadow: none;
}
.rx-flip-card-qty-input::-webkit-outer-spin-button,
.rx-flip-card-qty-input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.rx-flip-card-actions {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.rx-flip-card-actions .rx-flip-card-add-to-cart,
.rx-flip-card-actions .rx-flip-card-view-details {
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 100%;
min-height: 36px;
height: auto;
padding: 6px 14px;
border-radius: var(--crx-radius-pill);
box-shadow: none;
font-family: var(--crx-font);
font-weight: 400;
font-size: 13px;
line-height: 1.2;
letter-spacing: 0.02em;
text-align: center;
text-decoration: none;
cursor: pointer;
transform: none;
}
.rx-flip-card-add-to-cart {
border: 0;
background: #333333;
color: var(--crx-white);
}
.rx-flip-card-add-to-cart:hover {
color: var(--crx-white);
opacity: 0.88;
}
.rx-flip-card-add-to-cart:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.rx-flip-card-actions a.rx-flip-card-view-details {
min-height: 32px;
padding: 5px 12px;
border: 0.5px solid var(--crx-divider);
background: transparent;
color: var(--crx-dark);
font-size: 13px;
}
.rx-flip-card-actions a.rx-flip-card-view-details:hover {
border-color: var(--crx-dark);
box-shadow: none;
transform: none;
}
.rx-buy-now-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 10px;
padding: 10px 20px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
font-family: var(--crx-font);
font-weight: 400;
color: var(--crx-white);
text-align: center;
text-decoration: none;
cursor: pointer;
}
.rx-buy-now-button:hover {
color: var(--crx-white);
opacity: 0.88;
}
.rx-loader {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--crx-white);
border-radius: 50%;
animation: rx-spin 0.8s linear infinite;
}
@keyframes rx-spin {
to {
transform: rotate(360deg);
}
}
.rx-cart-message {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
max-width: 300px;
padding: 16px 24px;
border-radius: 20px;
background: var(--crx-dark);
font-family: var(--crx-font);
font-size: 14px;
font-weight: 500;
color: var(--crx-white);
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.rx-cart-message.rx-show {
opacity: 1;
transform: translateX(0);
}
.rx-cart-message.error,
.rx-cart-message.rx-cart-message-error {
background: #dc2626;
}
@media (max-width: 768px) {
.rx-product-card-wrapper {
perspective: none;
}
.rx-product-card-wrapper .rx-flip-card-front,
.rx-product-card-wrapper .rx-flip-card-back {
backface-visibility: visible;
-webkit-backface-visibility: visible;
transform: none !important;
}
.rx-product-card-wrapper .rx-flip-card-back {
display: none;
position: relative;
inset: auto;
z-index: 10;
box-sizing: border-box;
width: 100%;
height: auto;
min-height: 260px;
padding: 28px 8px 10px;
overflow: visible;
border-radius: 24px;
}
.rx-product-card-wrapper.rx-flipped .rx-flip-card-front {
display: none;
}
.rx-product-card-wrapper.rx-flipped .rx-flip-card-back {
display: flex;
flex-direction: column;
}
.rx-flip-card-close {
top: 4px;
right: 4px;
width: 28px;
height: 28px;
}
.rx-flip-card-close svg {
width: 14px;
height: 14px;
}
.rx-flip-card-back-content {
gap: 8px;
min-width: 0;
}
.rx-payment-plan-section {
gap: 8px;
min-width: 0;
}
.rx-payment-plan-header {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.rx-payment-plan-title {
font-size: 10px;
letter-spacing: 0.06em;
}
.rx-flip-card-qty-wrapper {
width: 100%;
}
.rx-flip-card-qty-controls {
width: 100%;
max-width: 100%;
height: 28px;
}
.rx-flip-card-qty-btn {
width: 28px;
min-width: 28px;
font-size: 14px;
}
.rx-flip-card-qty-input {
font-size: 13px;
}
.rx-subscription-options {
gap: 6px;
}
.rx-subscription-label {
gap: 6px;
padding: 8px;
border-radius: 12px;
}
.rx-subscription-label input[type="radio"] {
width: 14px;
height: 14px;
margin: 1px 0 0;
}
.rx-subscription-option-content {
gap: 4px;
}
.rx-subscription-option-header {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.rx-subscription-option-title {
font-size: 11px;
line-height: 1.25;
}
.rx-popular-badge {
display: none;
}
.rx-subscription-option-price-wrapper {
flex-wrap: nowrap;
gap: 4px;
min-width: 0;
}
.rx-subscription-option-price,
.rx-subscription-sale-price,
.rx-subscription-regular-price,
.rx-flip-card-back span.woocommerce-Price-amount.amount {
font-size: 10px;
line-height: 1.2;
white-space: nowrap;
word-break: normal;
}
.rx-subscription-regular-price,
.rx-subscription-regular-price span.woocommerce-Price-amount.amount {
font-weight: 400;
}
.rx-flip-card-actions {
gap: 6px;
margin-top: auto;
}
.rx-flip-card-actions .rx-flip-card-add-to-cart,
.rx-flip-card-actions .rx-flip-card-view-details,
.rx-flip-card-actions a.rx-flip-card-view-details {
min-height: 32px;
height: 32px;
padding: 6px 10px;
font-size: 11px;
line-height: 1;
}
}:root { --crx-white: #ffffff;
--crx-white-30: #ffffff4d;
--crx-dark: #2b2b2b;
--crx-dark-60: #2b2b2b99;
--crx-dark-30: #2b2b2b4d;
--crx-ink: #333;
--crx-gray: #6b6b6b;
--crx-yellow: #eadab7;
--crx-yellow-10: #eadab71a;
--crx-yellow-badge: #ffedbf;
--crx-sky: #b0d9ff;
--crx-sky-60: #b0d9ff99;
--crx-sky-30: #b0d9ff4d;
--crx-sky-10: #b0d9ff1a;
--crx-divider: #9cadbb; --crx-color-text: var(--crx-dark);
--crx-color-text-muted: var(--crx-dark-60);
--crx-color-heading: var(--crx-dark);
--crx-color-on-dark: var(--crx-white);
--crx-color-bg: var(--crx-white);
--crx-color-btn-bg: var(--crx-dark);
--crx-color-btn-text: var(--crx-white);
--crx-color-border: var(--crx-divider); --primary-color: var(--crx-dark);
--primary-gradient: var(--crx-dark);
--secondary-color: var(--crx-yellow);
--accent-color: var(--crx-dark);
--text-primary: var(--crx-ink);
--text-secondary: var(--crx-gray);
--text-muted: var(--crx-gray);
--border-color: var(--crx-divider);
--border-light: var(--crx-divider);
--bg-primary: var(--crx-white);
--bg-secondary: var(--crx-white);
--bg-tertiary: var(--crx-white);
--success-color: #28a745;
--error-color: #dc3545;
--warning-color: #ffc107;
--info-color: var(--crx-ink);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: var(--crx-radius-btn);
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--transition-fast: 0.2s ease;
--transition-base: var(--crx-ease);
--transition-slow: 0.4s ease; --crx-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
--crx-font-badge: "Instrument Sans", Helvetica, "Helvetica Neue", Arial, sans-serif; --crx-fs-jumbo: 72px;
--crx-fs-h1: 42px;
--crx-fs-h2: 24px;
--crx-fs-h3: 24px;
--crx-fs-body: 18px;
--crx-fs-tag: 16px;
--crx-fs-small: 14px;
--crx-fs-eyebrow: 20px;
--crx-fs-btn: 18px;
--crx-fs-btn-lg: 20px;
--crx-fs-badge: 10px; --crx-lh-jumbo: 1.2;
--crx-lh-h1: 1.1;
--crx-lh-title: 1.2;
--crx-lh-body: 1.4;
--crx-lh-small: 1.2;
--crx-track-jumbo: 0.05em;
--crx-track-eyebrow: 0.1em;
--crx-track-title: 0.05em;
--crx-track-body: 0.03em;
--crx-track-small: 0; --crx-page: 1600px;
--crx-margin: 80px;
--crx-container: calc(var(--crx-page) - (var(--crx-margin) * 2)); --crx-section-y: 100px;
--crx-gutter: 20px; --crx-radius-btn: 30px;
--crx-radius-hero: 40px;
--crx-radius-pill: 1000px;
--crx-radius-badge: 9px; --crx-blur-nav: 20px;
--crx-blur-btn: 40px;
--crx-blur-card: 60px; --crx-ease: 0.25s ease;
}
@media (max-width: 992px) {
:root {
--crx-fs-jumbo: 40px;
--crx-fs-h1: 30px;
--crx-fs-h2: 22px;
--crx-fs-h3: 20px;
--crx-fs-body: 16px;
--crx-fs-eyebrow: 16px;
--crx-margin: 20px;
--crx-section-y: 40px;
}
}.celiarx-location-header-item {
list-style: none;
}
.celiarx-location-header-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 14px;
border: 1px solid #333;
border-radius: 999px;
background: #fff;
color: #333;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.celiarx-location-header-btn.is-active {
background: #333;
color: #fff;
border-color: #333;
}
.celiarx-location-header-btn.is-empty {
border-color: #d63638;
color: #d63638;
}
.celiarx-location-header-btn:hover,
.celiarx-location-header-btn:focus {
background: #111;
color: #fff;
border-color: #111;
}
.celiarx-location-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.celiarx-location-modal.is-open {
display: flex;
}
.celiarx-location-modal__overlay {
position: absolute;
inset: 0;
background: var(--crx-dark-60);
}
.celiarx-location-modal__dialog {
position: relative;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
max-width: 714px;
min-height: 0;
padding: 40px;
border-radius: 40px;
background: var(--crx-white);
box-shadow: 0 24px 80px rgba(43, 43, 43, 0.18);
text-align: center;
font-family: var(--crx-font);
}
.celiarx-location-modal__brand,
.celiarx-location-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
margin: 0;
}
.celiarx-location-modal__logo {
display: block;
width: 90px;
height: 27px;
margin: 0;
object-fit: contain;
}
.celiarx-location-modal__logo-text {
margin: 0;
font-family: var(--crx-font);
font-size: 42px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.05em;
color: var(--crx-dark);
}
.celiarx-location-modal__welcome {
margin: 0;
max-width: none;
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.03em;
text-align: center;
color: var(--crx-dark);
}
.celiarx-location-modal__divider {
width: 100%;
max-width: none;
margin: 0;
border: 0;
border-top: 1px solid var(--crx-divider);
}
.celiarx-location-state-field {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
width: 100%;
margin: 0;
text-align: left;
}
.celiarx-location-state-field label {
flex: 0 0 auto;
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0;
color: var(--crx-dark-60);
}
.celiarx-location-state-field__select-wrap {
position: relative;
flex: 0 0 220px;
width: 220px;
}
.celiarx-location-state-field select {
box-sizing: border-box;
width: 220px;
min-height: 45px;
height: 45px;
padding: 10px 36px 10px 20px;
border: 0.5px solid var(--crx-divider);
border-radius: 30px;
background: var(--crx-white);
color: var(--crx-dark-60);
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0;
appearance: none;
cursor: pointer;
}
.celiarx-location-state-field__select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--crx-dark-60);
border-bottom: 1.5px solid var(--crx-dark-60);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.celiarx-location-age-text {
margin: 0;
max-width: none;
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.03em;
text-align: center;
color: var(--crx-dark-60);
}
.celiarx-location-age-text.is-declined {
color: #b32d2e;
}
.celiarx-location-form__error {
margin: 0;
color: #b32d2e;
font-family: var(--crx-font);
font-size: 14px;
}
.celiarx-location-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
width: auto;
max-width: none;
margin: 0;
}
.celiarx-location-yes-btn,
.celiarx-location-no-btn {
flex: 0 0 auto;
width: auto;
min-width: 0;
min-height: 53px;
margin: 0;
padding: 16px 30px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 500;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.03em;
cursor: pointer;
}
.celiarx-location-yes-btn:hover,
.celiarx-location-no-btn:hover,
.celiarx-location-yes-btn:focus,
.celiarx-location-no-btn:focus {
opacity: 0.88;
}
.celiarx-location-yes-btn:disabled,
.celiarx-location-no-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.celiarx-location-unavailable-notice {
margin-bottom: 16px;
}
body.celiarx-location-modal-open {
overflow: hidden;
}
@media (max-width: 767px) {
.celiarx-location-header-btn {
min-height: 36px;
padding: 6px 12px;
font-size: 12px;
}
.celiarx-location-modal {
padding: 20px;
}
.celiarx-location-modal__dialog {
max-width: 359px;
padding: 20px;
border-radius: 40px;
gap: 30px;
}
}.crx-container {
width: 100%;
max-width: var(--crx-page);
margin-inline: auto;
padding-inline: var(--crx-margin);
box-sizing: border-box;
}
.crx-section {
padding-block: var(--crx-section-y);
}
.crx-page {
width: 100%;
max-width: var(--crx-page);
margin-inline: auto;
} .crx-jumbo {
font-family: var(--crx-font);
font-weight: 300;
font-size: var(--crx-fs-jumbo);
line-height: var(--crx-lh-jumbo);
letter-spacing: var(--crx-track-jumbo);
color: var(--crx-color-heading);
}
.crx-h1 {
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
color: var(--crx-color-heading);
}
.crx-h2,
.crx-h3 {
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-h2);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
color: var(--crx-color-heading);
}
.crx-body {
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-color-text);
}
.crx-tag {
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-tag);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
color: var(--crx-color-text);
}
.crx-small {
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: var(--crx-lh-small);
letter-spacing: var(--crx-track-small);
color: var(--crx-color-text);
}
.crx-eyebrow {
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-eyebrow);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-eyebrow);
text-transform: uppercase;
color: var(--crx-color-text);
} .crx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
max-width: 100%;
padding: 20px 30px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-color-btn-bg);
color: var(--crx-color-btn-text);
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-btn);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
text-decoration: none;
cursor: pointer;
transition: opacity var(--crx-ease), background-color var(--crx-ease);
}
.crx-btn:hover,
.crx-btn:focus-visible {
opacity: 0.88;
color: var(--crx-color-btn-text);
}
.crx-btn:not(.crx-btn--outline):not(.crx-btn--ghost),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
border: 0;
}
.crx-btn--glass {
background: var(--crx-color-btn-bg);
backdrop-filter: blur(var(--crx-blur-nav));
-webkit-backdrop-filter: blur(var(--crx-blur-nav));
}
.crx-btn--outline {
background: transparent;
border: 1px solid var(--crx-dark);
color: var(--crx-dark);
}
.crx-btn--outline:hover,
.crx-btn--outline:focus-visible {
color: var(--crx-dark);
}
.crx-btn--ghost {
background: var(--crx-white-30);
color: var(--crx-dark);
backdrop-filter: blur(var(--crx-blur-nav));
-webkit-backdrop-filter: blur(var(--crx-blur-nav));
}
.crx-btn--ghost:hover,
.crx-btn--ghost:focus-visible {
color: var(--crx-dark);
}
.crx-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: var(--crx-radius-badge);
background: var(--crx-yellow-badge);
color: var(--crx-dark);
font-family: var(--crx-font-badge);
font-weight: 600;
font-size: var(--crx-fs-badge);
line-height: 1;
}
.crx-divider {
height: 1px;
width: 100%;
background: var(--crx-color-border);
border: 0;
}
* {
padding: 0;
margin: 0;
}
figure { margin: 0; }
ul li { list-style: none; }
html body {
font-family: var(--crx-font) !important;
color: var(--crx-ink);
letter-spacing: 0.02em;
font-size: 16px;
line-height: inherit;
--wp--preset--font-family--heading: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
body {
max-width: 1920px;
margin: 0 auto;
}
.container {
margin: auto;
padding: 0 15px;
}
.flex {
display: flex;
flex-wrap: wrap;
}
p {
font-family: var(--crx-font);
color: var(--crx-ink);
letter-spacing: 0.02em;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--crx-font);
color: var(--crx-ink);
}
a {
color: var(--crx-ink);
display: inline-block;
text-decoration: none !important;
}
p:empty {
display: none;
}
[type=submit] {
cursor: pointer;
}
.btn-theme {
background: var(--crx-dark);
color: var(--crx-white);
padding: 10px 20px;
border: 0;
border-radius: var(--crx-radius-btn);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 20px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.4;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.wp-element-button:hover {
color: var(--crx-white);
opacity: 0.88;
text-decoration: none;
}
.wp-element-button:focus,
.wp-element-button:focus-visible {
outline: none;
box-shadow: none;
}
.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
@media (min-width: 1200px) {
.container {
max-width: var(--crx-page) !important;
padding: 0 var(--crx-margin);
}
}
@media (max-width: 1200px) {
.container {
max-width: 100% !important;
padding: 0 20px !important;
}
}
.wc-block-components-notice-banner.is-info {
color: var(--crx-ink);
border-color: var(--crx-divider) !important;
font-weight: 400;
background-color: var(--crx-white) !important;
}
.wc-block-components-notice-banner.is-info > svg {
background-color: var(--crx-dark) !important;
fill: var(--crx-white);
}
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
border: none !important;
padding: 0;
text-decoration: underline;
}
.rx-breadcrumbs {
margin: 0;
padding: 13px 0 12px;
background: var(--crx-white);
border: none;
}
.rx-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--crx-font);
font-size: 14px;
line-height: 1.4;
color: var(--crx-ink);
}
.rx-breadcrumbs__item {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
}
.rx-breadcrumbs__item:not(:last-child)::after {
content: ">";
margin: 0 8px;
color: var(--crx-gray);
}
.rx-breadcrumbs__link {
font-size: 14px;
color: var(--crx-gray);
text-decoration: none;
}
.rx-breadcrumbs__link:hover {
color: var(--crx-ink);
text-decoration: underline;
}
.rx-breadcrumbs__current {
font-size: 14px;
color: var(--crx-ink);
}
@media (max-width: 767px) {
.rx-breadcrumbs__item:not(:last-child)::after {
margin: 0 6px;
}
}
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea.input-text {
font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 3rem 0.9rem 1.1rem !important;
}
.woocommerce-form-row,
.woocommerce form .form-row {
margin-bottom: var(--spacing-lg) !important;
padding: 0 !important;
}.search-item {
position: relative;
display: flex;
align-items: center;
}
.search-toggle-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1001;
}
.header-search-form {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
gap: 0;
background: var(--crx-white);
border: 1px solid var(--crx-divider);
border-radius: 16px;
padding: 0;
min-width: 300px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
overflow: hidden;
}
.header-search-form.is-open {
display: flex;
}
.header-search-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
padding: 10px 16px;
background: transparent;
min-width: 0;
font-family: var(--crx-font);
}
.header-search-input::placeholder {
color: var(--crx-dark-30);
}
.header-search-submit {
background: none;
border: none;
border-left: 1px solid var(--crx-divider);
cursor: pointer;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--crx-dark);
transition: background-color var(--crx-ease);
}
.header-search-submit:hover {
background-color: var(--crx-yellow-10);
}
.header-search-submit img {
width: 18px;
height: 18px;
} .crx-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background: transparent;
pointer-events: none;
padding-inline: var(--crx-margin);
box-sizing: border-box;
}
.crx-header__inner {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--crx-container);
margin: 26px auto 0;
padding: 20px 20px 20px 40px;
border-radius: var(--crx-radius-pill);
background: var(--crx-white-30);
backdrop-filter: blur(var(--crx-blur-nav));
-webkit-backdrop-filter: blur(var(--crx-blur-nav));
box-sizing: border-box;
}
.crx-header__logo {
display: flex;
align-items: center;
flex-shrink: 0;
width: 100px;
height: 30px;
overflow: clip;
}
.crx-header__logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.crx-header__nav {
margin: 0;
flex: 1 1 auto;
}
.crx-header__links {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.crx-header__links li {
margin: 0;
}
.crx-header__links a {
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
text-decoration: none;
}
.crx-header__links a:hover,
.crx-header__links li.current-menu-item a,
.crx-header__links a[aria-current="page"] {
color: var(--crx-dark);
opacity: 0.7;
}
.crx-header__actions ul {
display: flex;
align-items: center;
gap: 17px;
margin: 0;
padding: 0;
list-style: none;
}
.crx-header__actions li {
margin: 0;
position: relative;
overflow: visible;
}
.crx-header__icon-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: var(--crx-dark);
overflow: visible;
}
.crx-header__icon {
display: block;
width: 24px;
height: 24px;
position: relative;
}
.search-toggle-btn .search-toggle-icon--close {
display: none;
}
.search-toggle-btn.is-open .search-toggle-icon--search {
display: none;
}
.search-toggle-btn.is-open .search-toggle-icon--close {
display: flex;
align-items: center;
justify-content: center;
}
.search-toggle-btn.is-open .search-toggle-icon--close img {
width: 14px;
height: 14px;
filter: brightness(0);
}
.crx-header__icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.crx-header__icon--cart {
width: 32px;
height: 25px;
overflow: visible;
}
.crx-header__icon--cart .crx-badge,
.crx-header__icon--cart .cart-count {
position: absolute;
top: -4px;
right: -4px;
z-index: 2;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
width: auto;
height: 18px;
padding: 0 5px;
margin: 0;
background: var(--crx-yellow-badge);
color: var(--crx-dark);
border-radius: var(--crx-radius-badge);
font-family: var(--crx-font-badge);
font-weight: 600;
font-size: var(--crx-fs-badge);
line-height: 1;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
pointer-events: none;
}
.crx-header__menu-item {
display: none;
}
.crx-header__menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--crx-dark);
color: var(--crx-white);
cursor: pointer;
}
.crx-header__menu-bars {
display: block;
width: 16px;
height: 12px;
overflow: clip;
}
.crx-header__menu-bars img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.crx-header__menu-close {
display: none;
width: 14px;
height: 14px;
overflow: clip;
}
.crx-header__menu-close img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.crx-header__menu-btn.is-open .crx-header__menu-bars {
display: none;
}
.crx-header__menu-btn.is-open .crx-header__menu-close {
display: block;
}
.crx-header .celiarx-location-header-btn {
min-height: 0;
padding: 8px 14px;
border-color: var(--crx-dark-30);
background: transparent;
color: var(--crx-dark);
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-small);
}
.crx-header .header-search-form {
top: calc(100% + 12px);
transform: none;
border-radius: 16px;
border-color: var(--crx-divider);
}
.crx-header .search-item {
position: relative;
}
body.crx-nav-open {
overflow: hidden;
}
.crx-drawer {
display: none;
}
@media (max-width: 1199px) {
.crx-header {
padding-inline: 15px;
}
.crx-header__inner {
position: relative;
z-index: 1031;
width: 100%;
max-width: none;
margin: 20px auto 0;
padding: 10px 10px 10px 30px;
overflow: visible;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.crx-header__inner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--crx-white-30);
backdrop-filter: blur(var(--crx-blur-nav));
-webkit-backdrop-filter: blur(var(--crx-blur-nav));
pointer-events: none;
}
.crx-header .search-item {
position: static;
}
.crx-header .header-search-form,
.crx-header .header-search-form.is-open {
box-sizing: border-box;
left: 10px;
right: 10px;
top: calc(100% + 8px);
width: auto;
min-width: 0;
max-width: none;
transform: none;
}
.crx-header__logo {
width: 90px;
height: 27px;
}
.crx-header__nav,
.crx-header__login-desktop,
.crx-header__actions .celiarx-location-header-item {
display: none;
}
.crx-header__menu-item {
display: list-item;
}
.crx-header__actions ul {
gap: 17px;
}
.crx-drawer {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
z-index: 1028;
box-sizing: border-box;
width: 100%;
min-height: 100dvh;
padding: 190px 20px 32px;
border: 0.5px solid var(--crx-divider);
border-top: 0;
border-bottom-left-radius: var(--crx-radius-hero);
border-bottom-right-radius: var(--crx-radius-hero);
background:
linear-gradient(0deg, var(--crx-sky-10), var(--crx-sky-10)),
linear-gradient(90deg, rgba(176, 217, 255, 0.9) 0%, rgba(234, 218, 183, 0.9) 100%),
linear-gradient(270deg, rgba(225, 234, 242, 0) 29.48%, #d0e6fa 50%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--crx-ease), visibility var(--crx-ease);
}
.crx-drawer.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.crx-drawer__nav {
display: flex;
flex-direction: column;
flex: 1 1 auto;
box-sizing: border-box;
min-height: 0;
width: 100%;
max-width: 100%;
}
.crx-drawer__links {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.crx-drawer__links > li {
margin: 0;
border-bottom: 0.5px solid var(--crx-divider);
}
.crx-drawer__links > li:first-child {
border-top: 0.5px solid var(--crx-divider);
}
.crx-drawer__links a,
.crx-drawer__links .celiarx-location-header-btn {
display: block;
width: 100%;
padding: 40px 0;
border: 0;
background: none;
text-align: left;
font-family: var(--crx-font);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--crx-dark);
text-decoration: none;
cursor: pointer;
}
.crx-drawer__links a[aria-current="page"] {
opacity: 0.7;
}
.crx-drawer__login {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 53px;
margin-top: auto;
padding: 0 20px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: var(--crx-track-body);
text-decoration: none;
}
.crx-drawer__login:hover,
.crx-drawer__login:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
}
.crx-header .login-btn .crx-btn {
background: var(--crx-dark);
color: var(--crx-white);
height: 53px;
padding: 0 30px;
border-radius: var(--crx-radius-btn);
font-family: var(--crx-font);
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: var(--crx-track-body);
box-shadow: none;
}.crx-footer.main-footer {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(360deg, rgba(176, 217, 255, 0.6) 0%, rgba(234, 218, 183, 0.1) 100%);
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-footer__inner {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--crx-page);
min-height: calc(679px - 143.89px);
margin-inline: auto;
padding: var(--crx-section-y) 50px 0;
box-sizing: border-box;
gap: 100px;
}
.crx-footer__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 100px;
flex: 1 1 auto;
} .crx-footer.main-footer .crx-footer__subscribe-title,
.crx-footer.main-footer p.crx-footer__subscribe-title {
margin: 0 0 24px;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-tag);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-eyebrow);
text-transform: uppercase;
color: var(--crx-ink);
}
.crx-footer .form-box {
margin-bottom: 28px;
}
.crx-footer.main-footer .subscribe-box .che-newsletter__field,
.crx-footer.main-footer .subscribe-box form {
width: 100%;
padding: 0;
box-sizing: border-box;
position: relative;
}
.crx-footer.main-footer .subscribe-box form input:not([type=submit]),
.crx-footer.main-footer .subscribe-box .che-newsletter__input {
width: 100%;
min-width: 0;
min-height: 53px;
border: 0;
border-radius: 30px;
background: var(--crx-white);
color: var(--crx-dark);
font-family: var(--crx-font);
font-size: var(--crx-fs-small);
padding: 0 10px 0 20px;
}
.crx-footer.main-footer .subscribe-box form input::placeholder,
.crx-footer.main-footer .subscribe-box .che-newsletter__input::placeholder {
color: var(--crx-dark-30);
}
.crx-footer.main-footer .subscribe-box form [type=submit],
.crx-footer.main-footer .subscribe-box .che-newsletter__button {
width: auto;
height: 33px;
margin: 0;
padding: 0 15px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 500;
right: 0;
font-size: 13px;
letter-spacing: var(--crx-track-body);
white-space: nowrap;
position: absolute;
top: 10px;
right: 10px;
}
.crx-footer.main-footer .subscribe-box .che-newsletter__field-error,
.crx-footer.main-footer .subscribe-box .che-newsletter__notice {
color: var(--crx-dark);
}
.crx-footer__social {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.crx-footer__social-list {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.crx-footer__social-list a {
display: flex;
width: 32px;
height: 32px;
overflow: clip;
}
.crx-footer__social-list img {
width: 100%;
height: 100%;
object-fit: contain;
filter: none;
opacity: 1;
transition: opacity var(--crx-ease);
}
.crx-footer__social-list a:hover img {
opacity: 0.7;
filter: none;
}
.crx-footer__seal {
margin-top: 40px;
}
.crx-footer__seal img {
width: 132px;
height: auto;
display: block;
}
.crx-footer__columns {
display: flex;
flex: 1 1 auto;
justify-content: flex-end;
gap: 100px;
}
.crx-footer.main-footer .crx-footer__col {
min-width: 0;
margin: 0;
}
.crx-footer.main-footer .crx-footer__col.wide-box {
min-width: 0;
margin: 0;
}
.crx-footer.main-footer .crx-footer__heading {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0 0 20px;
padding: 0;
border: 0;
background: none;
color: var(--crx-dark);
cursor: default;
text-align: left;
}
.crx-footer.main-footer .crx-footer__heading span:first-child,
.crx-footer.main-footer .crx-footer__heading p {
margin: 0;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-tag);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-eyebrow);
text-transform: uppercase;
color: var(--crx-ink);
}
.crx-footer.main-footer .crx-footer__heading .icon {
display: none;
}
.crx-footer.main-footer .crx-footer__col ul {
margin: 0;
padding: 0;
list-style: none;
max-height: none;
}
.crx-footer.main-footer .crx-footer__col ul li {
margin: 0;
max-width: none;
}
.crx-footer.main-footer .crx-footer__col ul li a {
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-ink);
text-decoration: none;
white-space: normal;
transition: color var(--crx-ease);
margin-bottom: 16px;
}
.crx-footer.main-footer .crx-footer__col ul li a:hover {
color: var(--crx-dark);
}
.crx-footer.main-footer .crx-footer__bottom {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
width: 100%;
max-width: none;
margin: auto 0 0;
padding: 0;
border: 0;
}
.crx-footer.main-footer .crx-footer__bottom p {
margin: 0;
flex-shrink: 0;
text-align: right;
text-transform: none;
font-weight: 400;
font-size: var(--crx-fs-small);
letter-spacing: var(--crx-track-body);
color: var(--crx-dark-60);
}
.crx-footer.main-footer .crx-footer__logo {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 0;
margin: 0;
padding: 0;
}
.crx-footer.main-footer .crx-footer__logo figure {
display: flex;
margin: 0;
}
.crx-footer.main-footer .crx-footer__logo figure img {
display: block;
width: min(484px, 100%);
max-width: 100%;
height: auto;
object-fit: contain;
opacity: 1;
}
@media (max-width: 1100px) {
.crx-footer__top,
.crx-footer__columns {
gap: 48px;
}
.crx-footer__inner {
min-height: 0;
padding: 80px 40px 0;
}
}
@media (max-width: 992px) {
.crx-footer.main-footer {
padding: 0;
}
.crx-footer__inner {
padding: 48px 20px 0;
gap: 40px;
}
.crx-footer__top {
flex-direction: column;
gap: 8px;
}
.crx-footer__subscribe {
order: 2;
max-width: 100%;
margin-top: 32px;
}
.crx-footer.main-footer .crx-footer__subscribe-title,
.crx-footer.main-footer p.crx-footer__subscribe-title {
max-width: none;
font-size: 14px;
}
.crx-footer__seal {
margin-top: 20px;
}
.crx-footer__columns {
order: 1;
flex-direction: column;
gap: 0;
width: 100%;
}
.crx-footer.main-footer .crx-footer__col {
width: 100%;
border-bottom: 1px solid var(--crx-dark-30);
}
.crx-footer.main-footer .crx-footer__col:first-child {
border-top: 1px solid var(--crx-dark-30);
}
.crx-footer.main-footer .crx-footer__heading {
cursor: pointer;
padding: 18px 0;
margin: 0;
}
.crx-footer.main-footer .crx-footer__heading .icon {
display: flex;
width: 12px;
height: 12px;
transition: transform var(--crx-ease);
}
.crx-footer.main-footer .crx-footer__heading .icon img {
width: 100%;
height: 100%;
filter: none;
}
.crx-footer.main-footer .crx-footer__heading.open .icon {
transform: rotate(180deg);
}
.crx-footer.main-footer .crx-footer__col ul {
display: none;
padding-bottom: 16px;
}
.crx-footer.main-footer .crx-footer__heading.open + ul {
display: block;
}
.crx-footer.main-footer .crx-footer__bottom {
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 24px;
width: 100%;
margin-top: 32px;
margin-inline: 0;
}
.crx-footer.main-footer .crx-footer__bottom p {
order: -1;
text-align: center;
}
.crx-footer.main-footer .crx-footer__logo,
.crx-footer.main-footer .crx-footer__logo figure {
width: 100%;
justify-content: center;
}
.crx-footer.main-footer .crx-footer__logo figure img {
width: 100%;
max-width: 100%;
}
}
.crx-footer .che-newsletter {
max-width: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.crx-footer .che-newsletter__title {
display: none;
}
.crx-footer .che-newsletter__input--error {
border-color: #dc3545;
}
.crx-footer .che-newsletter__field-error {
margin-top: 6px;
font-size: 11px;
line-height: 1.4;
color: #dc3545;
text-transform: none;
font-weight: 400;
}
.crx-footer .che-newsletter__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.crx-footer .che-newsletter__notice {
margin: 8px 0 0;
padding: 0;
font-size: var(--crx-fs-small);
text-transform: none;
font-weight: 400;
border: 0;
background: transparent;
}
.crx-footer .che-newsletter__recaptcha {
margin: 10px 0 8px;
transform: scale(0.82);
transform-origin: left top;
height: 78px;
overflow: visible;
}
.crx-footer .che-newsletter__recaptcha > br {
display: none;
}
.crx-footer .che-newsletter__notice--success {
color: #005c12;
}
.crx-footer .che-newsletter__notice--error {
color: #dc3545;
}.crx-hero {
width: 100%;
margin: 0;
padding: 0;
}
.crx-hero__slider {
position: relative;
overflow: hidden;
width: 100%;
height: 777px;
border-radius: 0 0 var(--crx-radius-hero) var(--crx-radius-hero);
background: var(--crx-sky);
}
.crx-hero__slide {
position: relative;
height: 777px;
overflow: hidden;
}
.crx-hero__media,
.crx-hero__media img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.crx-hero__media img {
object-fit: cover;
object-position: center;
} .crx-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: var(--crx-page);
height: 100%;
margin: 0 auto;
padding: var(--crx-margin);
box-sizing: border-box;
}
.crx-hero__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.crx-hero__slide--right .crx-hero__copy {
align-self: flex-start;
align-items: flex-end;
gap: 30px;
width: fit-content;
max-width: 100%;
margin-left: 0;
text-align: right;
}
.crx-hero__slide--right .crx-hero__title,
.crx-hero__slide--right .crx-hero__line {
align-items: flex-end;
width: fit-content;
max-width: 100%;
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 300;
font-size: 48px;
line-height: 1.2;
letter-spacing: 0;
text-align: right !important;
white-space: nowrap;
}
.crx-hero__slide--right .crx-hero__title {
gap: 8px;
color: var(--crx-dark);
}
.crx-hero__slide--right .crx-hero__line {
color: var(--crx-dark);
}
.crx-hero__slide--rule .crx-hero__copy {
position: relative;
align-self: flex-start;
align-items: center;
box-sizing: border-box;
width: fit-content;
max-width: 100%;
min-width: 0;
gap: 30px;
padding-left: 50px;
color: var(--crx-white);
text-align: center;
}
.crx-hero__slide--rule .crx-hero__copy::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 2px;
height: 360px;
background: var(--crx-white);
transform: translateY(-50%);
pointer-events: none;
}
.crx-hero__slide--rule .crx-hero__title {
align-items: center;
box-sizing: border-box;
gap: 10px;
width: fit-content;
max-width: 100%;
min-width: 0;
margin: 0;
text-align: center !important;
white-space: normal;
}
.crx-hero__slide--rule .crx-hero__line {
box-sizing: border-box;
width: auto;
max-width: 100%;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 300;
line-height: 1.3;
text-align: center !important;
}
.crx-hero__slide--rule .crx-hero__line:first-child {
font-size: min(81.75px, 8vw);
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
white-space: nowrap;
}
.crx-hero__slide--rule .crx-hero__line:not(:first-child) {
max-width: min(360px, 100%);
margin-inline: auto;
font-size: min(32.74px, 3.4vw);
letter-spacing: 0;
white-space: normal;
}
.crx-hero__slide--rule .crx-hero__btn,
.crx-hero__slide--rule .crx-hero__cta .crx-btn,
.crx-hero__slide--rule .crx-hero__cta a,
.crx-hero__slide--rule .crx-hero__cta button {
align-self: center;
background: var(--crx-dark) !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
font-family: var(--crx-font) !important;
font-weight: 500 !important;
font-size: 20px !important;
line-height: 1.4 !important;
letter-spacing: 0.02em !important;
}
.crx-hero__rule-dot {
position: absolute;
top: 50%;
left: 0;
z-index: 1;
display: block;
width: 300px;
height: 220px;
max-width: none;
overflow: visible;
transform: translate(-50%, -50%);
pointer-events: none;
}
.crx-hero__slide--dark,
.crx-hero__slide--dark .crx-hero__title,
.crx-hero__slide--dark .crx-hero__line {
color: var(--crx-dark);
}
.crx-hero__slide--dark.crx-hero__slide--rule .crx-hero__copy {
color: var(--crx-dark);
}
.crx-hero__copy--split {
display: grid;
grid-template-columns: auto auto auto;
align-items: center;
justify-content: center;
width: 100%;
column-gap: 170px;
}
.crx-hero__copy--split .crx-hero__title {
display: contents;
margin: 0;
}
.crx-hero__copy--split .crx-hero__line {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 300;
font-size: 40px;
line-height: 1.2;
letter-spacing: 0.05em;
text-align: center !important;
white-space: nowrap;
}
.crx-hero__copy--split .crx-hero__line:first-of-type {
grid-column: 1;
justify-self: end;
}
.crx-hero__copy--split .crx-hero__btn,
.crx-hero__copy--split .crx-hero__cta {
grid-column: 2;
grid-row: 1;
margin: 0;
}
.crx-hero__copy--split .crx-hero__line:last-of-type {
grid-column: 3;
justify-self: start;
}
.crx-hero__title {
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
max-width: 100%;
margin: 0 0 35px;
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 300;
font-style: normal;
font-size: var(--crx-fs-jumbo);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: none;
text-align: left !important;
white-space: nowrap;
}
.crx-hero__line {
display: block;
width: fit-content;
margin: 0;
text-align: left !important;
}
.crx-hero__btn,
.crx-hero__cta .crx-btn,
.crx-hero__cta .btn-theme,
.crx-hero__cta a,
.crx-hero__cta #cpq-open-modal,
.crx-hero__cta button.cpq-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: auto !important;
height: 55px;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 30px !important;
border: 0 !important;
border-radius: var(--crx-radius-btn) !important;
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
font-family: var(--crx-font) !important;
font-weight: 500 !important;
font-size: 20px !important;
line-height: 1.4 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
text-transform: none !important;
box-shadow: none !important;
transform: none !important;
opacity: 1 !important;
}
.crx-hero__cta #cpq-open-modal:hover,
.crx-hero__cta button.cpq-btn:hover,
.crx-hero__btn:hover {
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
opacity: 0.88 !important;
transform: none !important;
}
.crx-hero__slider > .swiper-pagination-bullets,
.crx-hero__pagination.swiper-pagination-horizontal {
left: 0 !important;
right: auto !important;
bottom: var(--crx-margin) !important;
z-index: 30;
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100% !important;
max-width: none;
padding-left: max(var(--crx-margin), calc((100% - min(100%, var(--crx-page))) / 2 + var(--crx-margin)));
box-sizing: border-box;
transform: none !important;
pointer-events: auto;
}
.crx-hero__pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
margin: 0 8px 0 0 !important;
border-radius: 50%;
background: #ffffff66;
opacity: 1;
}
.crx-hero__pagination .swiper-pagination-bullet-active {
background: var(--crx-dark);
opacity: 1;
}
@media (max-width: 992px) {
.crx-hero__inner {
justify-content: center;
min-width: 0;
}
.crx-hero__copy,
.crx-hero__title {
max-width: 100%;
min-width: 0;
}
.crx-hero__title,
.crx-hero__line {
white-space: normal;
}
.crx-hero__copy--split {
column-gap: clamp(24px, 5vw, 80px);
}
.crx-hero__copy--split .crx-hero__line {
font-size: clamp(28px, 3.2vw, 36px);
}
}
@media (max-width: 768px) {
.crx-hero__slider,
.crx-hero__slide {
height: 582px;
}
.crx-hero__inner {
padding: var(--crx-margin);
overflow: visible;
}
.crx-hero__copy,
.crx-hero__slide--right .crx-hero__copy,
.crx-hero__slide--left .crx-hero__copy,
.crx-hero__slide--rule .crx-hero__copy {
align-items: center;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.crx-hero__slide--right .crx-hero__inner {
justify-content: flex-start;
padding-top: 110px;
}
.crx-hero__slide--right .crx-hero__copy {
gap: 24px;
}
.crx-hero__slide--right .crx-hero__title,
.crx-hero__slide--right .crx-hero__line,
.crx-hero__title,
.crx-hero__line {
align-items: center;
text-align: center !important;
}
.crx-hero__slide--right .crx-hero__title,
.crx-hero__slide--right .crx-hero__line {
font-size: 32px;
white-space: nowrap;
}
.crx-hero__slide--right .crx-hero__title {
gap: 8px;
}
.crx-hero__copy--split {
display: flex;
flex-direction: column;
align-items: center;
gap: 170px;
}
.crx-hero__copy--split .crx-hero__title {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 0;
}
.crx-hero__copy--split .crx-hero__line,
.crx-hero__copy--split .crx-hero__line:first-of-type,
.crx-hero__copy--split .crx-hero__line:last-of-type {
grid-column: auto;
justify-self: center;
font-size: 30px;
line-height: 1.2;
letter-spacing: 0.05em;
text-align: center !important;
white-space: nowrap;
}
.crx-hero__copy--split .crx-hero__btn,
.crx-hero__copy--split .crx-hero__cta {
grid-column: auto;
justify-self: center;
}
.crx-hero__title {
width: 100%;
max-width: 100%;
font-size: clamp(28px, 8.5vw, var(--crx-fs-jumbo));
line-height: 1.2;
letter-spacing: 0.05em;
white-space: normal;
}
.crx-hero__line {
width: auto;
max-width: 100%;
white-space: normal;
}
.crx-hero__slider > .swiper-pagination-bullets,
.crx-hero__pagination.swiper-pagination-horizontal {
bottom: 76px !important;
}
.crx-hero__slide--rule .crx-hero__copy {
align-self: center;
gap: 16px;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
transform: none;
}
.crx-hero__slide--rule .crx-hero__copy::before {
height: 260px;
}
.crx-hero__slide--rule .crx-hero__title {
gap: 10px;
}
.crx-hero__slide--rule .crx-hero__line:first-child {
font-size: min(78.46px, 10vw);
line-height: 1;
letter-spacing: 0.05em;
white-space: nowrap;
}
.crx-hero__slide--rule .crx-hero__line:not(:first-child) {
max-width: 100%;
font-size: clamp(18px, 5.6vw, 24px);
line-height: 1.3;
letter-spacing: 0;
white-space: nowrap;
}
}.crx-press {
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
width: 100%;
min-height: 0;
margin: 0 auto;
padding: var(--crx-section-y) 0;
gap: 40px;
background: transparent;
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-press__heading {
display: flex;
align-items: center;
width: 100%;
gap: 20px;
}
.crx-press__rule {
flex: 1 1 auto;
min-width: 0;
height: 0;
border: 0;
border-top: 0.5px solid var(--crx-divider);
}
.crx-press__title {
flex: 0 0 auto;
margin: 0;
padding: 0 8px;
font-family: var(--crx-font);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: var(--crx-dark);
white-space: nowrap;
}
.crx-press__stage {
display: flex;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 40px 20px;
overflow-x: auto;
}
.crx-press__logos {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 80px;
width: max-content;
margin: 0 auto;
padding: 0;
list-style: none;
}
.crx-press__logo {
box-sizing: border-box;
flex: 0 0 auto;
width: auto;
height: 30px;
margin: 0;
}
.crx-press .crx-press__logo img {
display: block;
width: auto;
max-width: none;
height: 30px;
object-fit: contain;
object-position: center;
}
@media (max-width: 1200px) {
.crx-press__logos {
justify-content: flex-start;
gap: 50px;
margin: 0;
}
}
@media (max-width: 992px) {
.crx-press {
padding: 40px 0;
gap: 20px;
}
.crx-press__title {
font-size: 14px;
}
.crx-press__stage {
justify-content: flex-start;
}
.crx-press__logos {
justify-content: flex-start;
gap: 50px;
margin: 0;
}
.crx-press__logo {
height: 20px;
}
.crx-press .crx-press__logo img {
height: 20px;
}
}.crx-about {
background: transparent;
padding: var(--crx-section-y) 0;
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-about__layout {
display: flex;
align-items: center;
width: 100%;
}
.crx-about__rule {
flex: 1 1 auto;
min-width: 0;
height: 0;
border: 0;
border-top: 0.5px solid var(--crx-divider);
}
.crx-about__inner {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 1 720px;
max-width: 720px;
margin-inline: 40px;
text-align: center;
}
.crx-about__eyebrow {
margin: 0 0 30px;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-eyebrow);
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--crx-ink);
}
.crx-about__title {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 30px;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
text-align: center;
color: var(--crx-dark);
}
.crx-about__title-line {
display: block;
}
.crx-about__body {
margin: 0 0 30px;
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.03em;
text-align: center;
color: var(--crx-dark);
}
.crx-about__body p {
margin: 0 0 1em;
font: inherit;
color: inherit;
letter-spacing: inherit;
}
.crx-about__body p:last-child {
margin-bottom: 0;
}
.crx-about__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-about__btn:hover,
.crx-about__btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
.crx-about--shop {
position: relative;
overflow: hidden;
min-height: 420px;
border-radius: var(--crx-radius-hero) var(--crx-radius-hero) 0 0;
}
.crx-about--shop .crx-about__media,
.crx-about--shop .crx-about__media img {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.crx-about--shop .crx-about__layout {
position: relative;
z-index: 1;
}
@media (max-width: 992px) {
.crx-about {
padding: 40px;
}
.crx-about__rule {
display: none;
}
.crx-about__inner {
max-width: 100%;
margin-inline: 0;
}
.crx-about--shop {
min-height: 480px;
padding: 80px 40px;
}
}
.crx-about--home {
background: transparent;
padding: var(--crx-section-y) 0;
border-bottom: 1px solid var(--crx-dark-30);
}
.crx-about--home .crx-about__inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: start;
gap: 80px;
flex: none;
width: 100%;
max-width: var(--crx-page);
margin: 0 auto;
padding: 0 var(--crx-margin);
box-sizing: border-box;
text-align: left;
}
.crx-about--home .crx-about__intro,
.crx-about--home .crx-about__aside {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.crx-about--home .crx-about__eyebrow,
.crx-about--home .crx-about__title,
.crx-about--home .crx-about__body {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.crx-about--home .crx-about__eyebrow {
margin: 0 0 30px;
font-size: var(--crx-fs-eyebrow);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-eyebrow);
color: var(--crx-dark);
}
.crx-about--home .crx-about__title {
align-items: flex-start;
margin: 0;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-align: left;
}
.crx-about--home .crx-about__body {
margin: 0 0 28px;
max-width: 520px;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
text-align: left;
}
.crx-about--home .crx-about__btn {
box-sizing: border-box;
height: 55px;
padding: 0 30px;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-btn-lg);
line-height: var(--crx-lh-body);
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.crx-about--home {
background: transparent;
}
.crx-about--home .crx-about__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.crx-about--home .crx-about__body {
margin-bottom: 0;
}
.crx-about--home .crx-about__aside {
gap: 28px;
}
}.crx-programs {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
min-height: 743px;
margin: 0 auto;
padding: 140px var(--crx-margin) 100px;
gap: 30px;
overflow: hidden;
border-radius: 40px 40px 0 0;
background:
linear-gradient(180.34deg, #ffffff 5.08%, rgba(255, 255, 255, 0) 76.63%),
linear-gradient(0deg, #c9def1, #c9def1);
color: var(--crx-white);
font-family: var(--crx-font);
}
.crx-programs__media,
.crx-programs__media picture,
.crx-programs__media img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.crx-programs__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none; }
.crx-programs__media img {
display: block;
object-fit: cover;
object-position: center;
}
.crx-programs__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
max-width: var(--crx-container);
}
.crx-programs__stage {
position: relative;
width: 100%;
}
.crx-programs--detail .crx-programs__stage:not(.crx-programs__stage--no-nav) {
padding-left: 45px;
padding-right: 45px;
box-sizing: border-box;
}
.crx-programs--detail .crx-programs__prev.swiper-button-prev {
left: 0;
right: auto;
margin-right: 0;
}
.crx-programs--detail .crx-programs__next.swiper-button-next {
right: 0;
left: auto;
margin-left: 0;
}
.crx-programs--detail .crx-programs__arrow.swiper-button-prev,
.crx-programs--detail .crx-programs__arrow.swiper-button-next {
z-index: 3;
}
.crx-programs--flush {
border-radius: var(--crx-radius-hero) var(--crx-radius-hero) 0 0;
}
.crx-programs--flush .crx-programs__media::after {
background: linear-gradient(
180.34deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0) 55%
);
}
.crx-programs__slider {
width: 100%;
overflow: hidden;
}
.crx-programs__slider .swiper-wrapper {
align-items: stretch;
}
.crx-programs__slider .swiper-slide {
display: flex;
height: auto;
}
.crx-programs__card {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
min-height: 418px;
height: 100%;
padding: 40px;
gap: 20px;
overflow: hidden;
border: 0;
border-radius: 40px;
background: linear-gradient(180deg, rgba(43, 43, 43, 0) 0%, rgba(43, 43, 43, 0.3) 100%);
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
color: var(--crx-white);
text-align: center;
text-decoration: none;
}
.crx-programs__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 230px;
min-width: 230px;
height: 200px;
min-height: 200px;
margin: 0;
overflow: hidden;
}
.crx-programs__icon img {
display: block;
width: 230px;
height: 200px;
max-width: none;
object-fit: contain;
object-position: center;
}
.crx-programs__title {
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
text-align: center;
color: var(--crx-white);
}
.crx-programs__tagline {
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-tag);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
color: var(--crx-white);
}
.crx-programs__plus {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 49px;
min-height: 49px;
aspect-ratio: 1;
margin: auto 0 0;
overflow: hidden;
border-radius: 50%;
background: var(--crx-dark);
}
.crx-programs__plus img {
width: 30px;
}
.crx-programs__arrow.swiper-button-prev,
.crx-programs__arrow.swiper-button-next {
top: 50%;
width: 29px;
height: 17px;
margin-top: 0;
padding: 0;
border: 0;
background: transparent;
transform: translateY(-50%);
}
.crx-programs__arrow.swiper-button-prev::after,
.crx-programs__arrow.swiper-button-next::after {
display: none;
content: none;
}
.crx-programs__arrow img {
display: block;
width: 29px;
height: 17px;
}
.crx-programs__prev.swiper-button-prev {
left: auto;
right: 100%;
margin-right: 16px;
}
.crx-programs__prev.swiper-button-prev img {
transform: rotate(180deg);
}
.crx-programs__next.swiper-button-next {
left: 100%;
right: auto;
margin-left: 16px;
}
.crx-programs__arrow.swiper-button-disabled,
.crx-programs__arrow.swiper-button-lock,
.crx-programs__stage--no-nav .crx-programs__arrow {
display: none;
opacity: 0;
pointer-events: none;
}
.crx-programs__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-btn);
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-programs__cta:hover,
.crx-programs__cta:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
@media (max-width: 768px) {
.crx-programs {
min-height: 548px;
padding: 80px 0 80px var(--crx-margin);
gap: 30px; }
.crx-programs--detail .crx-programs__stage:not(.crx-programs__stage--no-nav) {
padding-left: 0px;
padding-right: 0px;
box-sizing: border-box;
}
.crx-programs--flush {
border-radius: var(--crx-radius-hero) var(--crx-radius-hero) 0 0;
}
.crx-programs__inner {
max-width: none;
align-items: stretch;
}
.crx-programs__slider .swiper-slide {
height: auto;
}
.crx-programs__card {
min-height: 296px;
height: 100%;
padding: 20px;
}
.crx-programs__icon {
width: 140px;
min-width: 140px;
height: 122px;
min-height: 122px;
}
.crx-programs__icon img {
width: 140px;
height: 122px;
}
.crx-programs__title {
font-size: 16px;
}
.crx-programs__tagline {
font-size: 14px;
}
.crx-programs__arrow,
.crx-programs--detail .crx-programs__arrow {
display: none !important;
}
.crx-programs__cta {
align-self: center;
margin-right: var(--crx-margin);
}
}.crx-testing {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-page);
min-height: 0;
margin: 0 auto;
padding: var(--crx-section-y) var(--crx-margin);
gap: 30px;
overflow: hidden;
border-radius: var(--crx-radius-hero);
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-testing__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
max-width: var(--crx-container);
margin: 0 auto;
}
.crx-testing__header {
margin: 0;
text-align: center;
}
.crx-testing__title {
margin: 0 0 30px;
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: 0.05em;
color: var(--crx-ink);
}
.crx-testing__intro {
margin: 0 0 30px;
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-ink);
}
.crx-testing__intro:last-child {
margin-bottom: 0;
}
.crx-testing__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
width: 100%;
}
.crx-testing__card {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 0;
padding: 0 0 40px;
gap: 20px;
overflow: hidden;
border-radius: var(--crx-radius-hero);
background: var(--crx-yellow-10);
backdrop-filter: blur(var(--crx-blur-card));
-webkit-backdrop-filter: blur(var(--crx-blur-card));
color: var(--crx-dark);
}
.crx-testing__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 413 / 300;
overflow: hidden;
background: color-mix(in srgb, var(--crx-sky) 70%, #ffffff);
}
.crx-testing__media img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.crx-testing__body {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
box-sizing: border-box;
width: 100%;
min-height: 0;
padding: 0 30px;
gap: 20px;
}
.crx-testing__card-title {
margin: 0;
font-weight: 500;
font-size: var(--crx-fs-h2);
line-height: var(--crx-lh-title);
letter-spacing: 0.05em;
color: var(--crx-dark);
}
.crx-testing__card-headline {
margin: 0;
font-weight: 700;
font-size: 20px;
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--crx-dark);
}
.crx-testing__card-text {
margin: 0;
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
}
.crx-testing__btn {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
margin-top: auto;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-btn);
line-height: 1;
letter-spacing: var(--crx-track-body);
text-align: center;
text-decoration: none;
cursor: pointer;
}
.crx-testing__btn:hover,
.crx-testing__btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
@media (max-width: 1200px) {
.crx-testing__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
.crx-testing__card:last-child {
grid-column: 1 / -1;
width: calc((100% - 30px) / 2);
justify-self: center;
}
}
@media (max-width: 992px) {
.crx-testing {
padding: 40px var(--crx-margin);
border-radius: 24px;
}
.crx-testing__inner,
.crx-testing__header,
.crx-testing__grid {
max-width: none;
width: 100%;
}
.crx-testing__title {
font-size: 30px;
}
.crx-testing__intro {
font-size: 18px;
}
.crx-testing__card-title {
font-size: 20px;
}
.crx-testing__card-headline {
font-size: 16px;
}
.crx-testing__body {
padding: 0 20px;
}
.crx-testing__btn {
max-width: 100%;
white-space: normal;
}
}
@media (max-width: 767px) {
.crx-testing__grid {
grid-template-columns: 1fr;
}
.crx-testing__card:last-child {
grid-column: auto;
width: 100%;
justify-self: stretch;
}
}.rx-showcase-card,
.crx-product-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 300px;
padding: 28px 10px 56px;
overflow: visible;
border: 0;
border-radius: 40px;
background: linear-gradient(180deg, rgba(176, 217, 255, 0.1) 0%, rgba(234, 218, 183, 0.1) 100%);
color: var(--crx-dark);
font-family: var(--crx-font);
text-align: center;
}
.rx-showcase-card:hover,
.crx-product-card:hover {
background: linear-gradient(180deg, rgba(176, 217, 255, 0.1) 0%, rgba(234, 218, 183, 0.1) 100%);
border: 0;
}
.rx-showcase-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 0 20px;
}
.rx-showcase-image-link {
display: block;
color: inherit;
text-decoration: none;
}
.rx-showcase-image {
position: relative;
z-index: 1;
display: block;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
object-position: center;
}
.rx-showcase-product-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
color: inherit;
text-decoration: none;
}
.rx-showcase-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: center;
}
.rx-showcase-product-title,
.rx-showcase-product-title-link {
margin: 0;
width: 100%;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-eyebrow);
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--crx-dark);
text-align: center;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rx-showcase-product-description,
.rx-showcase-product-price {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.rx-showcase-button-wrapper {
display: contents;
}
.rx-showcase-card .rx-showcase-product-btn,
.crx-product-card .rx-showcase-product-btn {
position: absolute;
left: 50%;
bottom: 0;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
margin: 0;
padding: 12px 24px;
transform: translate(-50%, 50%);
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
}
.rx-showcase-product-btn:hover,
.rx-showcase-product-btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
.rx-showcase-card:has(.rx-flipped),
.crx-product-card:has(.rx-flipped) {
z-index: 6;
overflow: hidden;
}
.rx-showcase-card:has(.rx-flipped) .rx-showcase-product-btn,
.crx-product-card:has(.rx-flipped) .rx-showcase-product-btn,
.rx-product-card-wrapper.rx-flipped .rx-showcase-product-btn {
display: none;
}
.rx-showcase-out-of-stock {
opacity: 0.55;
pointer-events: none;
}
.crx-showcase a.added_to_cart,
.crx-catalog-slider a.added_to_cart,
.woocommerce ul.products a.added_to_cart,
.woocommerce-page ul.products a.added_to_cart {
display: none !important;
}
.rx-showcase-card .rx-product-card-wrapper,
.rx-showcase-card .rx-product-card-wrapper.rx-has-subscription {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
min-height: 0 !important;
padding-bottom: 0;
overflow: visible;
}
.rx-showcase-card .rx-flip-card-front {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 60px 10px 56px;
overflow: visible;
}
.rx-showcase-card:has(.rx-flipped) .rx-product-card-wrapper,
.rx-showcase-card:has(.rx-flipped) .rx-flip-card-front {
overflow: hidden;
}
.rx-showcase-card .rx-flip-card-back {
border-radius: 40px;
overflow-x: hidden;
overflow-y: scroll;
}
.rx-showcase-card .rx-product-card-wrapper.rx-flipped,
.rx-showcase-card:has(.rx-flipped) .rx-product-card-wrapper {
inset: 0;
z-index: 7;
height: 100%;
min-height: 0 !important;
overflow: hidden;
}
.rx-showcase-card:has(.rx-flipped) .rx-flip-card-back,
.rx-showcase-card .rx-product-card-wrapper.rx-flipped .rx-flip-card-back {
position: absolute;
inset: 0;
height: 100%;
min-height: 0;
padding: 44px 16px 24px;
overflow-x: hidden;
overflow-y: scroll;
}
@media (max-width: 768px) {
.rx-showcase-card:has(.rx-flipped) {
height: auto;
min-height: 260px;
padding: 0;
}
.rx-showcase-card:has(.rx-flipped) .rx-product-card-wrapper,
.rx-showcase-card .rx-product-card-wrapper.rx-flipped,
.rx-showcase-card:has(.rx-flipped) .rx-flip-card-front {
position: relative;
inset: auto;
height: auto;
min-height: 260px;
overflow: visible !important;
}
.rx-showcase-card:has(.rx-flipped) .rx-flip-card-back,
.rx-showcase-card .rx-product-card-wrapper.rx-flipped .rx-flip-card-back {
position: relative;
inset: auto;
height: auto;
min-height: 260px;
padding: 28px 8px 8px;
overflow: visible;
border-radius: 24px;
}
.rx-showcase-card,
.crx-product-card {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 300px;
padding: 28px 10px 56px;
box-sizing: border-box;
}
.rx-showcase-image {
width: auto;
max-width: min(227px, 100%);
height: auto;
max-height: 152px;
}
}
span.woocommerce-Price-amount.amount,
span.rx-per-month-price,
span.rx-per-doses-text {
font-size: 16px;
font-weight: 600;
color: var(--crx-dark);
margin-bottom: 5px;
}
a.added_to_cart.wc-forward {
display: none;
}.rx-product-catalog-header {
margin: 0 0 60px;
text-align: left;
}
.rx-product-catalog-title {
margin: 0 0 20px;
font-family: var(--crx-font);
font-weight: 400;
font-style: normal;
font-size: 42px;
line-height: 1.1;
letter-spacing: var(--crx-track-title);
color: var(--crx-ink);
text-align: left;
}
.rx-product-catalog-description {
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--crx-dark);
}
.crx-catalog-sections .rx-product-catalog-section {
padding-top: 0;
padding-bottom: 100px;
background-color: var(--crx-white);
}
.crx-catalog-sections .rx-product-catalog-section:first-child {
padding-top: 100px;
}
.crx-catalog-stage {
position: relative;
width: 100%;
}
.crx-catalog-slider {
display: block;
width: 100%;
overflow: visible;
}
.crx-catalog-slider .swiper-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: stretch;
transform: none;
}
.crx-catalog-slider .swiper-slide {
display: flex;
width: auto;
height: auto;
margin: 0;
padding-bottom: 24px;
box-sizing: border-box;
}
.crx-catalog-slider .rx-showcase-card {
width: 100%;
margin-bottom: 0;
}
.crx-catalog-pagination.swiper-pagination {
display: none;
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
transform: none;
justify-content: center;
width: 100%;
gap: 8px;
margin: 40px 0 0;
}
.crx-catalog-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
margin: 0;
background: var(--crx-dark-30);
opacity: 1;
border-radius: 50%;
}
.crx-catalog-pagination .swiper-pagination-bullet-active {
background: var(--crx-dark);
}
@media (max-width: 1024px) {
.crx-catalog-sections .rx-product-catalog-section .container {
max-width: none;
padding-right: 0;
}
.crx-catalog-slider {
overflow: visible;
}
.crx-catalog-slider .swiper-wrapper {
display: flex;
grid-template-columns: none;
gap: 0;
}
.crx-catalog-slider .swiper-slide {
padding-bottom: 24px;
}
.crx-catalog-stage {
overflow: hidden;
}
.crx-catalog-pagination.swiper-pagination {
display: flex;
}
}
@media (max-width: 992px) {
.crx-catalog-sections .rx-product-catalog-section {
padding-bottom: 60px;
}
.crx-catalog-sections .rx-product-catalog-section:first-child {
padding-top: 60px;
}
}
@media (max-width: 768px) {
.rx-product-catalog-title {
font-size: 30px;
}
.rx-product-catalog-header {
margin-bottom: 40px;
}
.rx-product-catalog-description {
font-size: 14px;
}
.crx-catalog-sections .rx-product-catalog-section {
padding-bottom: 40px;
}
.crx-catalog-sections .rx-product-catalog-section:first-child {
padding-top: 40px;
}
}.crx-showcase {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
min-height: 809px;
margin: 0 auto;
padding: var(--crx-section-y) 0;
background: transparent;
color: var(--crx-dark);
font-family: var(--crx-font);
}
.page-template-Program_detail .crx-showcase {
min-height: 0;
padding: var(--crx-section-y) 0;
}
body.single-product .crx-showcase--home {
flex: 1 1 100%;
min-width: 0;
min-height: 0;
}
.crx-showcase__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 100px;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-page);
min-width: 0;
margin: 0 auto;
padding-inline: var(--crx-margin);
}
.crx-showcase--home .crx-showcase__inner {
gap: 40px;
}
.crx-showcase__header { margin: 0;
text-align: center;
}
.crx-showcase__title,
.crx-showcase__description {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
text-align: center;
color: var(--crx-dark);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.crx-showcase__title {
margin: 0 0 30px;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
}
.crx-showcase__description {
margin: 0;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
}
.crx-showcase__stage {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
}
.crx-showcase__slider {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
overflow: hidden;
padding-bottom: 28px;
}
.crx-showcase__slider .swiper-wrapper {
display: flex;
align-items: stretch;
}
.crx-showcase__slider .swiper-slide {
display: flex;
height: auto;
padding: 0;
box-sizing: border-box;
}
.crx-showcase:not(.crx-showcase--pdp) .rx-showcase-card {
box-sizing: border-box;
width: 100%;
height: 427px;
min-height: 427px;
padding: 60px;
border: 3px solid transparent;
border-radius: 20px;
background:
linear-gradient(var(--crx-white), var(--crx-white)) padding-box,
linear-gradient(180deg, rgba(176, 217, 255, 0.3) 0%, rgba(234, 218, 183, 0.6) 100%) border-box;
}
.crx-showcase:not(.crx-showcase--pdp) .rx-showcase-product-btn {
box-sizing: border-box;
width: fit-content;
min-width: 0;
height: 55px;
padding: 0 30px;
font-weight: 500;
font-size: var(--crx-fs-btn-lg);
line-height: var(--crx-lh-body);
letter-spacing: 0.02em;
transform: translate(-50%, 50%);
}
.crx-showcase__arrow.swiper-button-prev,
.crx-showcase__arrow.swiper-button-next {
top: 45%;
width: 29px;
height: 17px;
margin-top: 0;
padding: 0;
border: 0;
background: transparent;
transform: translateY(-50%);
}
.crx-showcase__arrow.swiper-button-prev::after,
.crx-showcase__arrow.swiper-button-next::after {
display: none;
content: none;
}
.crx-showcase__arrow img {
display: block;
width: 29px;
height: 17px;
filter: invert(1);
}
.crx-showcase__prev.swiper-button-prev {
left: auto;
right: 100%;
margin-right: 16px;
}
.crx-showcase__prev.swiper-button-prev img {
transform: rotate(180deg);
}
.crx-showcase__next.swiper-button-next {
left: 100%;
right: auto;
margin-left: 16px;
}
.crx-showcase__arrow.swiper-button-disabled,
.crx-showcase__arrow.swiper-button-lock,
.crx-showcase__stage--no-nav .crx-showcase__arrow,
.crx-showcase__stage--no-nav .crx-showcase__pagination {
display: none;
opacity: 0;
pointer-events: none;
}
.page-template-Program_detail .crx-showcase__stage--no-nav .swiper-wrapper {
display: flex;
align-items: stretch;
gap: 20px;
}
.page-template-Program_detail .crx-showcase__stage--no-nav .swiper-slide {
flex: 1 1 385px;
width: auto;
max-width: 385px;
min-width: 0;
}
.crx-showcase__pagination {
position: relative;
left: auto;
bottom: auto;
display: none;
justify-content: center;
width: 100%;
gap: 8px;
margin: 30px 0 0;
}
.crx-showcase__pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
margin: 0;
background: var(--crx-dark-30);
opacity: 1;
border-radius: 50%;
}
.crx-showcase__pagination .swiper-pagination-bullet-active {
background: var(--crx-dark);
}
.crx-showcase__rule {
width: 100%;
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--crx-divider);
}
.crx-showcase--home .crx-showcase__rule {
border-top-color: #2B2B2B4D;
}
.crx-showcase__cta {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: fit-content;
height: 55px;
padding: 0 30px;
border: 0;
border-radius: var(--crx-radius-btn);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-btn-lg);
line-height: var(--crx-lh-body);
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-showcase__cta:hover,
.crx-showcase__cta:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
@media (min-width: 769px) {
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__inner {
max-width: none;
padding-inline: 0;
}
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__header,
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__rule {
box-sizing: border-box;
width: min(100%, var(--crx-page));
margin-inline: auto;
padding-inline: var(--crx-margin);
}
.crx-showcase--home .crx-showcase__header {
margin-bottom: 60px;
}
.crx-showcase__stage:not(.crx-showcase__stage--no-nav) {
padding-left: 45px;
padding-right: 45px;
box-sizing: border-box;
}
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__stage:not(.crx-showcase__stage--no-nav) {
padding-left: max(var(--crx-margin), calc((100% - var(--crx-page)) / 2 + var(--crx-margin)));
padding-right: 0;
}
.page-template-Program_detail .crx-showcase__stage--no-nav {
box-sizing: border-box;
padding-left: max(var(--crx-margin), calc((100% - var(--crx-page)) / 2 + var(--crx-margin)));
padding-right: max(var(--crx-margin), calc((100% - var(--crx-page)) / 2 + var(--crx-margin)));
}
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__stage:not(.crx-showcase__stage--no-nav) .crx-showcase__slider .swiper-slide {
width: 385px;
}
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__prev.swiper-button-prev {
left: max(8px, calc((100% - min(100%, var(--crx-page))) / 2 + var(--crx-margin) - 44px));
}
.crx-showcase:not(.crx-showcase--pdp) .crx-showcase__next.swiper-button-next {
right: 20px;
}
.crx-showcase__prev.swiper-button-prev {
left: 0;
right: auto;
margin-right: 0;
}
.crx-showcase__next.swiper-button-next {
right: 0;
left: auto;
margin-left: 0;
}
}
@media (max-width: 768px) {
.crx-showcase {
min-height: 0;
padding: var(--crx-section-y) 0 var(--crx-section-y) var(--crx-margin);
}
.page-template-Program_detail .crx-showcase {
padding: 40px 0 40px var(--crx-margin);
}
.page-template-Program_detail .crx-showcase__stage--no-nav {
box-sizing: border-box;
width: 100%;
padding-right: var(--crx-margin);
}
.crx-showcase__inner,
.crx-showcase--home .crx-showcase__inner {
max-width: none;
align-items: stretch;
gap: 40px;
padding-inline: 0;
}
.crx-showcase--home .crx-showcase__stage {
margin-bottom: 0;
}
.crx-showcase__header,
.crx-showcase__rule {
margin-right: var(--crx-margin);
}
.crx-showcase__cta {
align-self: center;
margin-right: var(--crx-margin);
}
.crx-showcase__slider .swiper-slide {
height: auto;
width: auto;
min-width: 0;
max-width: none;
}
.crx-showcase:not(.crx-showcase--pdp) .rx-showcase-card {
height: auto;
min-height: 360px;
padding: 28px 20px 48px;
}
.crx-showcase__arrow {
display: none !important;
}
.crx-showcase__slider {
padding-bottom: 0;
}
.crx-showcase__slider .swiper-wrapper {
padding-bottom: 28px;
}
.crx-showcase__pagination {
display: flex;
position: relative;
bottom: auto;
margin: 30px var(--crx-margin) 30px 0;
}
.crx-showcase__stage {
margin-bottom: -60px;
}
}
.crx-showcase--related {
border-top: 1px solid #2B2B2B4D;
padding: 100px 0 0;
}
.crx-showcase--related .crx-showcase__inner {
gap: 100px;
}
.crx-showcase--related .crx-showcase__header,
.crx-showcase--related .crx-showcase__title {
margin-bottom: 0;
}
.crx-showcase--home .rx-showcase-product-link,
.page-template-Program_detail .crx-showcase .rx-showcase-product-link {
justify-content: flex-start;
gap: 20px;
}
.crx-showcase--home .rx-showcase-content,
.page-template-Program_detail .crx-showcase .rx-showcase-content {
order: -1;
}
.page-template-Program_detail .crx-showcase .rx-showcase-image-wrapper {
margin: 0;
}
.crx-showcase--home .rx-showcase-image-wrapper {
width: 100%;
height: auto;
margin: 0;
overflow: hidden;
}
.crx-showcase--home .rx-showcase-image-wrapper::before {
display: none;
}
.crx-showcase--home .rx-showcase-image {
width: 100% !important;
max-width: none !important;
height: 100% !important;
}
.crx-showcase--home .rx-showcase-product-description,
.page-template-Program_detail .crx-showcase .rx-showcase-product-description {
position: static;
width: auto;
height: auto;
margin: 8px 0 0;
overflow: visible;
clip: auto;
clip-path: none;
font-family: var(--crx-font);
font-weight: 400;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--crx-dark);
}
.crx-showcase--related .crx-showcase__rule {
border-top-color: #2B2B2B4D;
}
@media (min-width: 769px) {
.crx-showcase--home .crx-showcase__rule,
.crx-showcase--home .crx-showcase__cta {
display: none;
}
.crx-showcase--related:not(.crx-showcase--pdp) .crx-showcase__header,
.crx-showcase--related:not(.crx-showcase--pdp) .crx-showcase__rule {
width: 100%;
padding-inline: 0;
}
.crx-showcase--related:not(.crx-showcase--pdp) .crx-showcase__stage:not(.crx-showcase__stage--no-nav) {
padding-left: 0;
padding-right: 0;
}
.crx-showcase--related:not(.crx-showcase--pdp) .crx-showcase__prev.swiper-button-prev {
left: 0;
}
.crx-showcase--related:not(.crx-showcase--pdp) .crx-showcase__next.swiper-button-next {
right: 0;
}
}
@media (max-width: 768px) {
.crx-showcase--related {
padding: 40px 0 40px var(--crx-margin);
}
.crx-showcase--related .crx-showcase__inner {
gap: 40px;
}
.crx-showcase--related .crx-showcase__stage {
margin-bottom: 0;
}
.crx-showcase--related .crx-showcase__pagination {
position: relative;
bottom: auto !important;
margin: 40px var(--crx-margin) 0 0;
}
}.crx-cta {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
min-height: 614px;
overflow: hidden;
border-radius: var(--crx-radius-hero);
background: linear-gradient(180deg, var(--crx-white) 0%, var(--crx-sky-10) 100%);
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-cta__media {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.crx-cta__media img,
.crx-cta__media video,
.crx-cta__media-item {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
}
.crx-cta__media-item--mobile {
display: none;
}
.crx-cta__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
max-width: 700px;
margin-left: max(0px, calc((100% - min(100%, var(--crx-page))) / 2));
padding: var(--crx-section-y) var(--crx-margin);
}
.crx-cta__title {
margin: 0 0 60px;
font-family: var(--crx-font);
font-weight: 400;
font-style: normal;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
color: var(--crx-ink);
}
.crx-cta__title:has(+ .crx-cta__text) {
margin-bottom: 20px;
}
.crx-cta__text {
margin: 0 0 60px;
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
}
.crx-cta__title-line {
display: block;
}
.crx-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-weight: 400;
font-size: var(--crx-fs-btn);
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-cta__btn:hover,
.crx-cta__btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
.crx-cta:not(.crx-cta--program) .crx-cta__media img,
.crx-cta:not(.crx-cta--program) .crx-cta__media video {
object-position: center;
}
.crx-cta:not(.crx-cta--program) .crx-cta__inner {
align-items: center;
justify-content: center;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
gap: 40px;
text-align: center;
}
.crx-cta:not(.crx-cta--program) .crx-cta__title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-ink);
}
.crx-cta:not(.crx-cta--program) .crx-cta__rule {
display: block;
flex: 0 0 147px;
width: 3px;
height: 147px;
background: var(--crx-dark);
}
.crx-cta:not(.crx-cta--program) .crx-cta__btn {
box-sizing: border-box;
width: 535px;
max-width: 100%;
height: 111px;
padding: 30px 60px;
gap: 10px;
border-radius: 100px;
background: var(--crx-white-30);
color: var(--crx-dark);
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
white-space: nowrap;
backdrop-filter: blur(var(--crx-blur-btn));
-webkit-backdrop-filter: blur(var(--crx-blur-btn));
}
.crx-cta:not(.crx-cta--program) .crx-cta__btn:hover,
.crx-cta:not(.crx-cta--program) .crx-cta__btn:focus-visible {
color: var(--crx-dark);
background: hsla(0, 0%, 100%, 0.45);
opacity: 1;
}
@media (max-width: 768px) {
.crx-cta {
max-width: 420px;
min-height: 423px;
margin-left: auto;
margin-right: auto;
align-items: flex-end;
}
.crx-cta__media img,
.crx-cta__media video {
object-position: 80% center;
}
.crx-cta:not(.crx-cta--program) .crx-cta__media img,
.crx-cta:not(.crx-cta--program) .crx-cta__media video {
object-position: center;
}
.crx-cta__media-item--desktop {
display: none;
}
.crx-cta__media-item--mobile {
display: block;
}
.crx-cta:not(.crx-cta--program) {
align-items: center;
}
.crx-cta:not(.crx-cta--program) .crx-cta__btn {
width: 100%;
height: auto;
padding: 22px 24px;
white-space: normal;
}
.crx-cta__inner {
padding: var(--crx-section-y) var(--crx-margin);
}
.crx-cta__title {
margin-bottom: 30px;
}
.crx-cta__text {
margin-bottom: 30px;
font-size: 16px;
}
}
@media (max-width: 500px) { }
.crx-cta--program {
border-radius: 0;
}.celia-product-testimonials {
padding: 0;
background-color: #ffffff;
}
.celia-testimonials-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.celia-testimonials-title {
margin: 0;
font-family: var(--crx-font);
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #333;
}
.celia-testimonials-nav {
display: flex;
gap: 25px;
align-items: center;
}
.celia-testimonials-nav button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
}
.celia-testimonials-nav button img {
width: 37px;
height: 15px;
}
.celia-testimonials-nav button.slick-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.celia-testimonials-slider {
position: relative;
margin: 0;
overflow: hidden;
}
.celia-testimonials-slider .slick-list {
margin-bottom: 40px;
}
.celia-testimonials-slider .slick-slide {
display: flex;
align-items: center;
height: auto;
padding: 10px;
box-sizing: border-box;
}
.celia-testimonials-slider .slick-slide > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.celia-testimonials-slider .slick-center.celia-testimonial-item {
padding: 10px !important;
border: 1px solid #767676 !important;
box-sizing: border-box;
}
.celia-testimonial-item {
display: flex;
flex-direction: column;
width: 300px;
height: 400px;
margin: 0 auto;
overflow: hidden;
border: 1px solid transparent;
border-radius: 16px;
background-color: #fff;
transition: all 0.3s ease;
}
.celia-testimonial-image-wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 16px;
}
.celia-testimonial-image {
width: 100%;
height: 100%;
min-height: 400px;
max-height: 400px;
object-fit: cover;
}
.celia-testimonial-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
padding: 15px;
background: linear-gradient(180deg, rgba(13, 13, 13, 0) 2.69%, rgba(13, 13, 13, 0.1) 12.04%, #0d0d0d 100%);
}
.celia-quote-icon {
display: block;
margin-bottom: 8px;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #fff;
}
.celia-testimonial-quote {
flex-grow: 1;
margin: 0;
font-family: var(--crx-font);
font-weight: 600;
font-size: 14px;
line-height: 1.5;
color: #fff;
text-align: left;
}
.celia-testimonial-name {
margin: 0;
font-family: var(--crx-font);
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.celia-testimonials-slider .slick-dots {
position: relative;
bottom: 0;
display: flex !important;
justify-content: center;
margin-top: 20px;
padding: 0;
list-style: none;
}
.celia-testimonials-slider .slick-dots li {
width: auto;
height: auto;
margin: 0 4px;
}
.celia-testimonials-slider .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #d4d4d4;
text-indent: -9999px;
cursor: pointer;
transition: all 0.3s ease;
}
.celia-testimonials-slider .slick-dots li button:before {
display: none;
}
.celia-testimonials-slider .slick-dots li.slick-active button {
width: 12px;
height: 12px;
background: linear-gradient(90deg, #e28c69 -12.71%, #eed187 100%);
}
@media screen and (max-width: 992px) {
.celia-product-testimonials {
padding: 30px 0;
}
.celia-testimonials-title {
font-size: 28px;
}
}
@media screen and (max-width: 768px) {
.celia-testimonial-image {
min-height: 300px;
max-height: 300px;
}
}
@media screen and (max-width: 480px) {
.celia-product-testimonials {
padding: 40px 0;
}
.celia-testimonials-title {
font-size: 24px;
}
.celia-testimonials-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.celia-testimonials-nav {
display: none;
}
.celia-testimonial-image {
min-height: 370px;
max-height: 370px;
}
}.crx-features {
box-sizing: border-box;
width: 100%;
min-height: 423px;
padding: var(--crx-section-y) var(--crx-margin);
background: transparent;
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-features__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 320px));
justify-content: space-between;
align-items: start;
max-width: var(--crx-container);
margin: 0 auto;
}
.crx-features__item {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
max-width: 320px;
min-height: 223px;
padding: 20px;
text-align: center;
}
.crx-features__icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin: 0 0 20px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.crx-features__icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.crx-features__copy {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}
.crx-features__title {
margin: 0 0 20px;
font-family: var(--crx-font);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: #1a1a1a;
}
.crx-features__text {
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0;
text-align: center;
color: var(--crx-gray);
}
@media (max-width: 1024px) {
.crx-features__grid {
grid-template-columns: repeat(2, minmax(0, 320px));
justify-content: center;
gap: 20px 40px;
}
}
@media (max-width: 768px) {
.crx-features {
min-height: 562px;
padding: var(--crx-section-y) var(--crx-margin);
}
.crx-features__grid {
display: flex;
flex-direction: column;
gap: 0;
max-width: 380px;
margin: 0 auto;
}
.crx-features__item {
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: 380px;
min-height: 124px;
padding: 16px;
gap: 20px;
text-align: left;
}
.crx-features__icon {
flex: 0 0 64px;
width: 64px;
height: 64px;
margin: 0;
padding: 0 18px;
box-sizing: content-box;
}
.crx-features__icon img {
width: 64px;
height: 64px;
}
.crx-features__copy {
align-items: flex-start;
flex: 1 1 auto;
}
.crx-features__title {
font-size: 14px;
text-align: left;
}
.crx-features__text {
font-size: 12px;
text-align: left;
}
}.crx-shop-hero {
position: relative;
box-sizing: border-box;
width: 100%;
min-height: 525px;
overflow: hidden;
border-radius: 0 0 var(--crx-radius-hero) var(--crx-radius-hero);
background: color-mix(in srgb, var(--crx-sky) 28%, var(--crx-white));
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-shop-hero__media,
.crx-shop-hero__media img {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
}
.crx-shop-hero__media img {
object-fit: cover;
object-position: right center;
}
.crx-shop-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--crx-sky) 32%, var(--crx-white)) 0%,
color-mix(in srgb, var(--crx-sky) 22%, var(--crx-white)) 34%,
transparent 62%
);
}
.crx-shop-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 200px;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-page);
margin: 0 auto;
padding: 200px var(--crx-margin) var(--crx-margin);
}
.crx-shop-hero__copy,
.crx-shop-hero .woocommerce-products-header {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 820px;
margin: 0;
}
.crx-shop-hero .woocommerce-products-header__title,
.crx-shop-hero h1 {
margin: 0 0 20px;
font-family: var(--crx-font);
font-weight: 300;
font-size: var(--crx-fs-jumbo);
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--crx-dark);
}
.crx-shop-hero .woocommerce-products-header__title::before,
.crx-shop-hero h1::before {
display: none;
}
.crx-shop-hero .term-description,
.crx-shop-hero .page-description,
.crx-shop-hero .woocommerce-products-header p {
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.03em;
color: var(--crx-dark);
}
.crx-shop-hero--catalog {
min-height: 348px;
}
.crx-shop-hero--catalog .woocommerce-products-header__title,
.crx-shop-hero--catalog h1 {
margin: 0;
font-size: var(--crx-fs-jumbo);
}
.crx-shop-hero--image .crx-shop-hero__inner {
padding: 0;
min-height: 348px;
}
.crx-shop-hero--image::after {
content: none;
}
.crx-shop-hero--image .crx-shop-hero__media,
.crx-shop-hero--image .crx-shop-hero__media img {
min-height: 348px;
object-position: center;
} .crx-shop-hero--accent {
border-radius: 0;
}
.crx-shop-hero--accent::after {
content: none;
}
.crx-shop-hero--accent .crx-shop-hero__media,
.crx-shop-hero--accent .crx-shop-hero__media img {
inset: auto;
width: 533px;
height: 381px;
max-width: none;
}
.crx-shop-hero--accent .crx-shop-hero__media {
top: 59%;
right: 0;
transform: translateY(-50%);
pointer-events: none;
}
.crx-shop-hero--accent .crx-shop-hero__media img {
position: relative;
inset: auto;
display: block;
width: 533px;
height: 381px;
object-fit: contain;
object-position: center;
opacity: 1;
}
@media (max-width: 768px) {
.crx-shop-hero--accent .crx-shop-hero__media {
right: -150px;
top: unset;
bottom: -150px;
transform: none;
}
.crx-shop-hero {
min-height: 505px;
}
.crx-shop-hero--catalog {
min-height: 339px;
}
.crx-shop-hero--image {
min-height: 216px;
}
.crx-shop-hero--image .crx-shop-hero__inner,
.crx-shop-hero--image .crx-shop-hero__media,
.crx-shop-hero--image .crx-shop-hero__media img {
min-height: 216px;
}
.crx-shop-hero--image .crx-shop-hero__inner {
padding: 0;
}
.crx-shop-hero--image .crx-shop-hero__media img {
object-position: center;
}
.crx-shop-hero__media img {
object-position: center right;
}
.crx-shop-hero__inner {
padding: 120px var(--crx-margin) var(--crx-margin);
}
.crx-shop-hero--accent .crx-shop-hero__inner {
padding: 120px var(--crx-margin) var(--crx-margin);
}
.crx-shop-hero .woocommerce-products-header__title,
.crx-shop-hero h1 {
font-size: var(--crx-fs-jumbo);
}
}.crx-information {
box-sizing: border-box;
max-width: var(--crx-page);
margin: 0 auto;
padding: 100px var(--crx-margin);
color: var(--crx-ink);
font-family: var(--crx-font);
}
.crx-information h1 {
margin: 0 0 30px;
font-family: var(--crx-font);
font-weight: 400;
font-size: 42px;
line-height: 1.1;
letter-spacing: 0.05em;
color: var(--crx-ink);
}
.crx-information .information-content,
.crx-information .information-content p,
.crx-information .information-content li {
font-family: var(--crx-font);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.02em;
color: var(--crx-ink);
}
.crx-information .information-content p {
margin: 0 0 30px;
}
.crx-information .information-content h2 {
margin: 0 0 30px;
font-family: var(--crx-font);
font-weight: 500;
font-size: 24px;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--crx-ink);
}
.crx-information .information-content h3 {
margin: 0 0 30px;
font-family: var(--crx-font);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--crx-ink);
}
.crx-information .information-content ul,
.crx-information .information-content ol {
margin: 0 0 30px;
padding-left: 1.5em;
}
.crx-information .information-content ul li {
list-style-type: disc;
}
.crx-information .information-content ol li {
list-style-type: decimal;
}
.crx-information .information-content li {
margin-bottom: 0.5em;
}
.crx-information .information-content li:last-child {
margin-bottom: 0;
}
.crx-information .information-content ul ul,
.crx-information .information-content ol ol,
.crx-information .information-content ul ol,
.crx-information .information-content ol ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
.crx-information .information-content ul ul {
list-style-type: circle;
}
.crx-information .information-content ul ul ul {
list-style-type: square;
}
.crx-information .information-content ol ol {
list-style-type: lower-alpha;
}
.crx-information .information-content a {
color: var(--crx-ink);
text-decoration: underline;
}
.crx-information .eea-disclosures-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--crx-ink);
}
.crx-information .eea-disclosures-table td {
border: 1px solid var(--crx-ink);
padding: 12px 16px;
vertical-align: top;
}
.crx-information .eea-disclosures-table .label {
font-weight: 500;
width: 22%;
min-width: 180px;
}
.crx-information .eea-disclosures-table .content p {
margin: 0 0 0.75em;
}
.crx-information .eea-disclosures-table .content p:last-child {
margin-bottom: 0;
}
.crx-information .eea-disclosures-table .content ul {
margin: 0.25em 0 0.75em;
padding-left: 1.25em;
}
@media (max-width: 768px) {
.crx-information {
padding: 40px var(--crx-margin);
}
.crx-information h1 {
font-size: 30px;
}
.crx-information .information-content h2 {
font-size: 20px;
}
.crx-information .information-content h3 {
font-size: 18px;
}
}.crx-health-programs {
box-sizing: border-box;
width: 100%;
padding: var(--crx-section-y) var(--crx-margin) 0;
background: var(--crx-white);
color: var(--crx-dark);
font-family: var(--crx-font);
}
.crx-health-programs__inner {
display: flex;
flex-direction: column;
gap: 100px;
width: 100%;
max-width: var(--crx-container);
margin: 0 auto;
}
.crx-health-programs__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
text-align: center;
}
.crx-health-programs__heading {
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-align: center;
color: var(--crx-ink);
}
.crx-health-programs__sub {
margin: 0;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-h2);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
text-align: center;
color: var(--crx-dark);
}
.crx-health-programs__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.crx-health-programs__card {
display: flex;
flex-direction: column;
gap: 20px;
box-sizing: border-box;
min-width: 0;
min-height: 399px;
padding: 0 0 30px;
overflow: hidden;
border-radius: var(--crx-radius-hero);
background: var(--crx-yellow-10);
backdrop-filter: blur(var(--crx-blur-card));
-webkit-backdrop-filter: blur(var(--crx-blur-card));
color: inherit;
text-decoration: none;
}
.crx-health-programs__card:hover,
.crx-health-programs__card:focus-visible {
color: inherit;
}
.crx-health-programs__image {
display: block;
width: 100%;
min-height: 300px;
aspect-ratio: 305 / 300;
object-fit: cover;
background: color-mix(in srgb, var(--crx-yellow) 18%, var(--crx-white));
}
.crx-health-programs__bar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
padding: 0 20px;
}
.crx-health-programs__title {
flex: 1 1 auto;
min-width: 0;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-h3);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
color: var(--crx-dark);
}
.crx-health-programs__plus {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 49px;
min-height: 49px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
background: var(--crx-dark);
}
.crx-health-programs__plus img {
width: 30px;
}
@media (max-width: 1300px) {
.crx-health-programs__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.crx-health-programs {
padding-top: 40px;
}
}
@media (max-width: 768px) {
.crx-health-programs {
padding: 40px 10px 0;
}
.crx-health-programs__inner {
gap: 40px;
}
.crx-health-programs__heading {
font-size: 30px;
}
.crx-health-programs__sub {
font-size: 20px;
}
.crx-health-programs__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.crx-health-programs__card {
min-height: 290px;
border-radius: 20px;
}
.crx-health-programs__image {
min-height: 200px;
aspect-ratio: 1;
}
.crx-health-programs__bar {
padding: 0 14px;
}
.crx-health-programs__title {
font-size: 16px;
}
}.crx-program-about {
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-page);
min-height: 577px;
margin: 0 auto;
padding: 0 0 0 var(--crx-margin);
border-radius: var(--crx-radius-hero);
background:
radial-gradient(ellipse 55% 70% at 72% 55%, var(--crx-sky-10) 0%, transparent 62%),
radial-gradient(ellipse 40% 50% at 8% 20%, var(--crx-yellow-10) 0%, transparent 55%),
radial-gradient(ellipse 35% 45% at 12% 88%, var(--crx-yellow-10) 0%, transparent 50%),
var(--crx-white);
color: #333;
font-family: var(--crx-font);
}
.crx-program-about__inner {
display: grid;
grid-template-columns: minmax(0, 729px) minmax(0, 591px);
align-items: stretch;
gap: 40px;
width: 100%;
}
.crx-program-about__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
max-width: 729px;
min-width: 0;
padding: 100px 0;
}
.crx-program-about__title {
margin: 0 0 20px;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-h2);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
color: var(--crx-ink);
}
.crx-program-about__body {
margin: 0 0 40px;
font-family: var(--crx-font);
font-weight: 500;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: #333;
}
.crx-program-about__body p {
margin: 0 0 20px;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: #333;
}
.crx-program-about__body p:last-child {
margin-bottom: 0;
}
.crx-program-about__body h3 {
margin: 0 0 20px;
font-family: var(--crx-font);
font-weight: 700;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: #333;
}
.crx-program-about__body p + h3 {
margin-top: 0;
}
.crx-program-about__body ul {
margin: 0;
padding: 0 0 0 1.25em;
list-style-type: disc;
list-style-position: outside;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-ink);
}
.crx-program-about__body li,
.crx-program-about__body ul li {
margin: 0 0 12px;
padding: 0;
list-style: disc;
list-style-position: outside;
font-family: inherit;
font-weight: 400;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
}
.crx-program-about__body li:last-child {
margin-bottom: 0;
}
.crx-program-about__body li::marker {
color: #333;
}
.crx-program-about__body li strong {
font-weight: 700;
}
.crx-program-about__body strong {
font-weight: 700;
}
.crx-program-about__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-btn);
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-program-about__btn:hover,
.crx-program-about__btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
.crx-program-about__media {
position: relative;
min-width: 0;
max-width: 591px;
min-height: 570px;
}
.crx-program-about__media img {
display: block;
width: 100%;
max-width: 591px;
height: auto;
object-fit: contain;
object-position: center right;
}
@media (max-width: 768px) {
.crx-program-about {
min-height: 0;
padding: 20px 0 20px var(--crx-margin);
border-radius: var(--crx-radius-hero);
}
.crx-program-about__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.crx-program-about__copy {
max-width: none;
padding: 0 var(--crx-margin) 0 0;
}
.crx-program-about__title {
font-size: 20px;
}
.crx-program-about__body {
font-size: 18px;
}
.crx-program-about__media {
max-width: none;
min-height: 0;
}
.crx-program-about__media img {
max-width: none;
width: 100%;
min-height: 0;
object-position: center right;
}
}.crx-science-intro {
box-sizing: border-box;
width: 100%;
background: transparent;
color: var(--crx-dark);
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
}
.crx-science-intro__inner {
display: flex;
align-items: center;
gap: 30px;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-page);
margin: 0 auto;
padding: var(--crx-section-y) var(--crx-margin);
}
.crx-science-intro__title,
.crx-science-intro__text {
flex: 1 1 0;
min-width: 0;
margin: 0;
text-align: left;
}
.crx-science-intro__title {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-intro__text {
max-width: none;
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
}
@media (max-width: 992px) {
.crx-science-intro__inner {
flex-direction: column;
align-items: stretch;
gap: 30px;
}
.crx-science-intro__title,
.crx-science-intro__text {
flex: none;
width: 100%;
text-align: center;
}
}.crx-science-layers {
position: relative;
display: flex;
box-sizing: border-box;
width: min(100%, 1440px);
min-height: 844px;
margin-inline: auto;
overflow: hidden;
border-radius: 40px;
padding: var(--crx-section-y) var(--crx-margin);
gap: 60px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
color: var(--crx-dark);
}
.crx-science-layers__media {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
}
.crx-science-layers__media img,
.crx-science-layers__media video,
.crx-science-layers__media-item {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.crx-science-layers__media-item--mobile {
display: none;
}
.crx-science-layers__inner {
position: relative;
z-index: 1;
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 30px;
box-sizing: border-box;
width: 100%;
min-height: 644px;
padding: 40px;
border-radius: 40px;
background: var(--crx-dark-30);
backdrop-filter: blur(150px);
-webkit-backdrop-filter: blur(150px);
}
.crx-science-layers__header {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
}
.crx-science-layers__title,
.crx-science-layers__sub,
.crx-science-layers__text,
.crx-science-layers__text p,
.crx-science-layers__card-title,
.crx-science-layers__card-sub,
.crx-science-layers__card-text,
.crx-science-layers__badge-kicker,
.crx-science-layers__badge-text {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-layers__title {
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
color: var(--crx-ink);
}
.crx-science-layers__sub {
font-weight: 400;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
}
.crx-science-layers__text,
.crx-science-layers__text p {
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
}
.crx-science-layers__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.crx-science-layers__card {
display: flex;
gap: 15px;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
min-height: 389px;
overflow: hidden;
padding-top: 40px;
text-align: left;
}
.crx-science-layers__card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
padding: 0 30px;
}
.crx-science-layers__icon {
display: block;
flex: 0 0 auto;
width: 138px;
height: 77px;
object-fit: contain;
}
.crx-science-layers__card-title {
font-weight: 400;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
vertical-align: middle;
}
.crx-science-layers__card-sub {
font-weight: 700;
font-size: var(--crx-fs-tag);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.crx-science-layers__card-text {
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
}
.crx-science-layers__badge {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
box-sizing: border-box;
width: 100%;
min-height: 95px;
padding: 30px;
border-radius: 20px;
background: #ffffff99;
}
.crx-science-layers__badge-kicker {
font-weight: 700;
font-size: var(--crx-fs-tag);
line-height: 1.2;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.crx-science-layers__badge-text {
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
}
@media (max-width: 768px) {
.crx-science-layers {
margin-inline: auto;
padding: var(--crx-margin);
gap: 60px;
}
.crx-science-layers__media-item--desktop {
display: none;
}
.crx-science-layers__media-item--mobile {
display: block;
}
.crx-science-layers__inner {
padding: 40px 20px;
gap: 30px;
}
.crx-science-layers__grid {
grid-template-columns: 1fr;
}
.crx-science-layers__card {
width: 100%;
min-height: 365px;
}
.crx-science-layers__card-sub,
.crx-science-layers__badge-kicker {
font-size: 14px;
}
.crx-science-layers__badge {
min-height: 91px;
}
}.crx-science-measure {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 80px;
width: min(100%, 1440px);
margin-inline: auto;
padding: var(--crx-section-y) var(--crx-margin);
background: transparent;
color: var(--crx-dark);
}
.crx-science-measure__copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 30px;
min-width: 0;
}
.crx-science-measure__title,
.crx-science-measure__sub,
.crx-science-measure__text,
.crx-science-measure__list,
.crx-science-measure__list li,
.crx-science-measure__box-title,
.crx-science-measure__box-text {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-measure__title {
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
}
.crx-science-measure__sub {
font-weight: 400;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
}
.crx-science-measure__text,
.crx-science-measure__box-text {
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
}
.crx-science-measure__list {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
padding-left: 1.2em;
}
.crx-science-measure__list li {
font-weight: 700;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
list-style: disc;
}
.crx-science-measure__box {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
box-sizing: border-box;
width: min(100%, 650px);
min-height: 161px;
padding: 40px 30px;
border-radius: 20px;
background: #ffffff1a;
box-shadow: 0 0 40px 0 var(--crx-sky-30);
text-align: center;
}
.crx-science-measure__box-title {
font-weight: 700;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
text-align: center;
}
.crx-science-measure__box-text {
text-align: center;
}
.crx-science-measure__media {
flex: 0 0 501px;
width: 501px;
height: 645px;
margin: 0;
overflow: hidden;
border-radius: 20px;
}
.crx-science-measure__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
@media (max-width: 992px) {
.crx-science-measure {
flex-direction: column;
align-items: stretch;
gap: 20px;
padding-inline: var(--crx-margin);
}
.crx-science-measure__box {
width: 100%;
max-width: none;
min-height: 177px;
}
.crx-science-measure__media {
flex-basis: auto;
width: 100%;
height: 481px;
border-radius: 15.16px;
}
.crx-science-measure__media img {
border-radius: 15.16px;
}
}.crx-science-signal {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-page);
margin-inline: auto;
overflow: hidden;
border-radius: 40px;
padding: var(--crx-section-y) var(--crx-margin);
background-color: #f4efe6;
background-image: url(//www.celia-rx.com/wp-content/themes/celiarx-child/assets/images/crx/science-signal-bg.png);
background-position: center;
background-size: cover;
color: var(--crx-dark);
}
.crx-science-signal__panel {
display: flex;
flex-direction: column;
gap: 80px;
box-sizing: border-box;
width: 100%;
padding: 40px;
border-radius: 40px;
background: var(--crx-white-30);
backdrop-filter: blur(75px);
-webkit-backdrop-filter: blur(75px);
}
.crx-science-signal__title,
.crx-science-signal__sub,
.crx-science-signal__paras p,
.crx-science-signal__list li,
.crx-science-signal__card-title,
.crx-science-signal__card-text,
.crx-science-signal__card-text p {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-signal__title {
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
text-align: center;
}
.crx-science-signal__row {
display: flex;
align-items: flex-start;
gap: 30px;
width: 100%;
}
.crx-science-signal__copy {
display: flex;
flex: 1.15 1 0;
flex-direction: column;
gap: 30px;
min-width: 0;
}
.crx-science-signal__sub {
font-weight: 400;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
}
.crx-science-signal__paras {
display: flex;
flex-direction: column;
gap: 8px;
}
.crx-science-signal__paras p,
.crx-science-signal__card-text,
.crx-science-signal__card-text p {
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
}
.crx-science-signal__list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding-left: 1.2em;
}
.crx-science-signal__list li {
font-weight: 700;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
list-style: disc;
}
.crx-science-signal__card {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 30px;
box-sizing: border-box;
min-width: 0;
padding: 40px 30px;
border-radius: 20px;
background: #ffffff99;
box-shadow: 0 0 40px 0 #9cadbb4d;
}
.crx-science-signal__card-title {
font-weight: 700;
font-size: var(--crx-fs-eyebrow);
line-height: 1.2;
letter-spacing: 0.1em;
}
.crx-science-signal__card-text {
display: flex;
flex-direction: column;
gap: 20px;
}
.crx-science-signal__card-text strong {
font-weight: 700;
}
@media (max-width: 992px) {
.crx-science-signal__panel {
gap: 40px;
padding-inline: 20px;
}
.crx-science-signal__row {
flex-direction: column;
align-items: stretch;
}
.crx-science-signal__copy,
.crx-science-signal__card {
flex: 1 1 auto;
width: auto;
}
}.crx-science-more {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--crx-section-y);
width: 100%;
max-width: var(--crx-page);
margin-inline: auto;
padding: var(--crx-section-y) var(--crx-margin);
overflow: hidden;
color: var(--crx-dark);
}
.crx-science-more__row {
display: flex;
align-items: center;
gap: var(--crx-margin);
width: 100%;
}
.crx-science-more__copy {
display: flex;
flex: 1.6 1 0;
flex-direction: column;
gap: 30px;
min-width: 0;
}
.crx-science-more__title,
.crx-science-more__sub,
.crx-science-more__text,
.crx-science-more__text p,
.crx-science-more__list li {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-more__title {
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
}
.crx-science-more__sub {
font-weight: 400;
font-size: var(--crx-fs-eyebrow);
line-height: 1.2;
letter-spacing: 0.1em;
}
.crx-science-more__text {
display: flex;
flex-direction: column;
gap: 16px;
}
.crx-science-more__text,
.crx-science-more__text p {
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
}
.crx-science-more__text strong {
font-weight: 700;
}
.crx-science-more__list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding-left: 1.2em;
}
.crx-science-more__list li {
font-weight: 700;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
list-style: disc;
}
.crx-science-more__art {
flex: 0.9 1 0;
min-width: 0;
margin: 0;
}
.crx-science-more__art picture,
.crx-science-more__art img {
display: block;
max-width: none;
height: auto;
}
.crx-science-more__art--rings img {
width: 155%;
margin-left: -55%;
}
.crx-science-more__rule {
display: block;
width: 100%;
height: 1px;
}
@media (max-width: 992px) {
.crx-science-more__row,
.crx-science-more__row--therapy {
flex-direction: column;
align-items: stretch;
}
.crx-science-more__art {
flex: 1 1 auto;
order: -1;
}
.crx-science-more__art--hex img,
.crx-science-more__art--rings img {
width: 100%;
max-width: 100%;
margin-left: 0;
}
}.crx-science-loop {
box-sizing: border-box;
width: 100%;
min-height: 1387px;
overflow: hidden;
border-radius: var(--crx-radius-hero);
font-family: var(--crx-font);
color: var(--crx-dark);
}
.crx-science-loop__header {
padding: 100px var(--crx-margin) 0;
text-align: center;
}
.crx-science-loop__title {
margin: 0 0 30px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-ink);
}
.crx-science-loop__text,
.crx-science-loop__text p {
margin: 0 auto;
max-width: 720px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-loop__text p {
margin: 0;
}
.crx-science-loop__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.crx-science-loop__row--a {
min-height: 540px;
padding: 100px 0 0 var(--crx-margin);
}
.crx-science-loop__row--b {
min-height: 640px;
padding: 100px var(--crx-margin) 100px 0;
}
.crx-science-loop__aside {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 40px;
}
.crx-science-loop__steps {
display: flex;
flex-direction: column;
gap: 40px;
flex: 1;
margin: 0;
padding: 0;
list-style: none;
}
.crx-science-loop__step {
display: flex;
align-items: center;
gap: 20px;
}
.crx-science-loop__num {
flex: 0 0 auto;
font-family: var(--crx-font);
font-weight: 300;
font-size: 100px;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--crx-dark);
}
.crx-science-loop__copy {
padding-top: 18px;
}
.crx-science-loop__step-title {
margin: 0 0 20px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-loop__step-text {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-dark);
}
.crx-science-loop__rule {
flex: 0 0 417px;
width: 417px;
height: 0;
border: 0;
border-top: 0.5px solid var(--crx-divider);
}
.crx-science-loop__media {
flex: 0 0 243px;
width: 243px;
margin: 0;
}
.crx-science-loop__media img {
display: block;
min-width: 243px;
object-fit: cover;
border-radius: 40px;
}
@media (min-width: 769px) and (max-width: 1279px) {
.crx-science-loop__row {
gap: 24px;
}
.crx-science-loop__steps {
flex: 1 1 0;
min-width: 0;
}
.crx-science-loop__aside {
flex: 0 1 auto;
min-width: 0;
max-width: 42%;
gap: 20px;
}
.crx-science-loop__rule {
flex: 0 1 140px;
width: 140px;
min-width: 48px;
max-width: 160px;
}
.crx-science-loop__media {
flex: 0 1 200px;
width: auto;
min-width: 0;
max-width: 100%;
}
.crx-science-loop__media img {
width: 100%;
min-width: 0;
height: auto;
aspect-ratio: 350 / 440;
object-fit: cover;
}
.crx-science-loop__num {
font-size: 64px;
}
}
@media (min-width: 1280px) {
.crx-science-loop:not(.crx-science-loop--four) .crx-science-loop__media {
flex-basis: 350px;
width: 350px;
}
.crx-science-loop:not(.crx-science-loop--four) .crx-science-loop__media img {
width: 350px;
min-width: 350px;
height: 440px;
border-radius: 40px;
object-fit: cover;
}
}
.crx-science-loop--four {
min-height: 0;
}
.crx-science-loop--four .crx-science-loop__row--a,
.crx-science-loop--four .crx-science-loop__row--b {
min-height: 0;
}
.crx-science-loop--four .crx-science-loop__text {
font-weight: 400;
}
@media (max-width: 768px) {
.crx-science-loop {
min-height: 0;
}
.crx-science-loop__header {
padding: 40px var(--crx-margin) 40px;
}
.crx-science-loop__header {
border-bottom: 0.5px solid var(--crx-divider);
}
.crx-science-loop__row {
flex-direction: column;
align-items: stretch;
gap: 40px;
}
.crx-science-loop__rule {
display: none;
}
.crx-science-loop__num {
flex: 0 0 72px;
width: 72px;
font-size: 66.67px;
}
.crx-science-loop__aside {
width: auto;
justify-content: flex-start; }
.crx-science-loop__row--a,
.crx-science-loop__row--b {
min-height: 0;
padding: 40px var(--crx-margin);
}
.crx-science-loop__row--b {
border-top: 0;
padding-top: 0;
}
.crx-science-loop__row--b .crx-science-loop__steps {
order: 1;
}
.crx-science-loop__row--b .crx-science-loop__aside {
order: 2;
justify-content: end;
}
.crx-science-loop:not(.crx-science-loop--four) .crx-science-loop__aside,
.crx-science-loop:not(.crx-science-loop--four) .crx-science-loop__row--b .crx-science-loop__aside {
justify-content: center;
width: 100%;
}
.crx-science-loop__media,
.crx-science-loop__media img {
margin: 0;
object-fit: cover;
border-radius: 40px;
}
.crx-science-loop:not(.crx-science-loop--four) .crx-science-loop__media {
flex: 0 0 auto;
width: 350px;
max-width: 100%;
}
.crx-science-loop:not(.crx-science-loop--four) .crx-science-loop__media img {
width: 350px;
min-width: 0;
max-width: 100%;
height: 440px;
max-height: none;
margin: 0 auto;
object-fit: cover;
border-radius: 40px;
}
}.crx-science-experts {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
max-width: var(--crx-page);
margin-inline: auto;
padding: var(--crx-section-y) var(--crx-margin);
border-radius: 40px;
color: #333;
}
.crx-science-experts__title,
.crx-science-experts__role,
.crx-science-experts__name {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.crx-science-experts__title {
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
color: #333;
}
.crx-science-experts__rule {
width: 100%;
height: 1px;
margin: 0;
border: 0;
background: #2b2b2b4d;
}
.crx-science-experts__list {
display: flex;
align-items: flex-start;
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.crx-science-experts__item {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 20px;
box-sizing: border-box;
min-width: 0;
margin: 0;
padding: 20px;
}
.crx-science-experts__item:nth-child(even) {
padding-top: 80px;
}
.crx-science-experts__glow {
position: absolute;
left: 50%;
z-index: 0;
display: block;
pointer-events: none;
}
.crx-science-experts__item:nth-child(odd) .crx-science-experts__glow {
top: 100%;
transform: translate(-50%, calc(-50% + 27px));
}
.crx-science-experts__item:nth-child(even) .crx-science-experts__glow {
top: 0;
transform: translate(-50%, calc(-50% + 27px));
}
.crx-science-experts__media {
position: relative;
z-index: 1;
margin: 0;
}
.crx-science-experts__media img {
display: block;
width: 100%;
height: auto; object-fit: cover;
border-radius: 40px;
}
.crx-science-experts__role,
.crx-science-experts__name {
position: relative;
z-index: 1;
}
.crx-science-experts__role {
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
color: #333;
}
.crx-science-experts__name {
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--crx-dark);
}
@media (max-width: 992px) {
.crx-science-experts__list {
flex-wrap: wrap;
row-gap: 60px;
column-gap: 30px;
}
.crx-science-experts__item {
flex: 1 1 calc(50% - 15px);
max-width: calc(50% - 15px);
padding: 20px 0;
}
.crx-science-experts__item:nth-child(even) {
padding-top: 80px;
}
.crx-science-experts__media img {
aspect-ratio: 175 / 291;
}
}.crx-affiliate-cta {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 382px;
overflow: hidden;
border-radius: var(--crx-radius-hero) var(--crx-radius-hero) 0 0;
background: var(--crx-white);
font-family: var(--crx-font);
color: var(--crx-dark);
}
.crx-affiliate-cta__media,
.crx-affiliate-cta__media img,
.crx-affiliate-cta__media video {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.crx-affiliate-cta__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
max-width: var(--crx-container);
padding: 100px;
text-align: center;
}
.crx-affiliate-cta__title {
margin: 0 0 50px;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: 1.1;
letter-spacing: 0.05em;
text-align: center;
color: var(--crx-dark);
}
.crx-affiliate-cta__text {
margin: 0 0 50px;
max-width: 720px;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
text-align: center;
color: var(--crx-dark);
}
.crx-affiliate-cta__line {
display: block;
}
.crx-affiliate-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-btn);
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-affiliate-cta__btn:hover,
.crx-affiliate-cta__btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
@media (max-width: 768px) {
.crx-affiliate-cta__title {
font-size: 30px;
}
.crx-affiliate-cta__inner {
padding: 100px var(--crx-margin);
}
}.crx-pdp-banner {
box-sizing: border-box;
flex: 1 1 100%;
position: relative;
left: 50%;
width: 100vw;
max-width: 100vw;
margin: 0 0 0 -50vw;
padding: 0;
}
.crx-pdp-banner__card {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
min-height: 510px;
padding: 140px 80px;
overflow: hidden;
border-radius: var(--crx-radius-hero);
}
.crx-pdp-banner__media,
.crx-pdp-banner__media img,
.crx-pdp-banner__image {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.crx-pdp-banner__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
max-width: 640px;
}
.crx-pdp-banner__title {
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
color: var(--crx-dark);
}
.crx-pdp-banner__text {
margin: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
}
.crx-pdp-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border: 0;
border-radius: var(--crx-radius-pill);
background: var(--crx-dark);
color: var(--crx-white);
font-family: var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-btn);
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
}
.crx-pdp-banner__btn:hover,
.crx-pdp-banner__btn:focus-visible {
color: var(--crx-white);
opacity: 0.88;
}
@media (max-width: 768px) {
.crx-pdp-banner__card {
align-items: center;
padding: 80px var(--crx-margin);
border-radius: var(--crx-radius-hero) var(--crx-radius-hero) 0 0;
}
.crx-pdp-banner__content {
align-items: center;
max-width: 100%;
text-align: center;
}
}
body.single-product .crx-pdp-banner {
display: none !important;
}.crx-pdp {
box-sizing: border-box;
flex: 1 1 100%;
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding: 0 0 80px;
background: transparent;
color: var(--crx-ink);
font-family: var(--crx-font);
}
.crx-pdp .crx-container {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-inline: var(--crx-margin);
}
.crx-pdp .rx-breadcrumbs {
margin: 0 0 30px;
padding: 0;
background: transparent;
border: 0;
}
.crx-pdp .rx-breadcrumbs__list,
.crx-pdp .rx-breadcrumbs__link,
.crx-pdp .rx-breadcrumbs__current,
.crx-pdp .rx-breadcrumbs__item:not(:last-child)::after {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: 1.4;
letter-spacing: 1px;
color: var(--crx-ink);
}
.crx-pdp .rx-breadcrumbs__item:not(:last-child)::after {
content: "/";
margin: 0 6px;
}
.crx-pdp .rx-breadcrumbs__link:hover {
color: var(--crx-ink);
opacity: 0.8;
text-decoration: none;
}
.crx-pdp__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
padding-bottom: 0;
}
.crx-pdp .custom-product-image-gallery {
flex: 0 0 479px;
width: 479px;
max-width: 100%;
margin: 0;
}
@media (min-width: 993px) {
.crx-pdp .custom-product-image-gallery {
position: sticky;
top: 120px;
align-self: flex-start;
z-index: 2;
}
}
.crx-pdp .custom-main-image {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 479px;
height: 653px;
max-width: 100%;
border: 0;
background: transparent;
}
.crx-pdp .custom-main-image img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
min-width: 0;
object-fit: cover;
}
.crx-pdp .custom-product-gallery,
.crx-pdp .slider-nav-btns {
display: none;
}
.crx-pdp div.summary,
.woocommerce div.product div.summary,
.woocommerce div.product .crx-pdp div.summary {
display: flex;
flex-direction: column;
gap: 30px;
flex: 1 1 320px;
width: auto;
max-width: 100%;
margin: 0;
color: var(--crx-ink);
}
.woocommerce div.product .crx-pdp div.summary > * {
margin-top: 0;
margin-bottom: 0;
}
@media (min-width: 993px) {
.crx-pdp__grid {
display: grid;
grid-template-columns: 479px minmax(0, 1fr);
column-gap: 20px;
row-gap: 30px;
align-items: start;
}
.crx-pdp .rx-breadcrumbs {
grid-column: 2;
grid-row: 1;
width: 100%;
margin: 0;
}
.crx-pdp .custom-product-image-gallery {
grid-column: 1;
grid-row: 2;
}
.crx-pdp div.summary {
grid-column: 2;
grid-row: 2;
}
}
.crx-pdp div.summary .product_title {
margin: 0;
padding: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp div.summary .woocommerce-product-rating,
.crx-pdp div.summary .product_meta,
.crx-pdp div.summary .jdgm-preview-badge,
.crx-pdp .first-payment-date,
.crx-pdp .wcsatt-options-product-wrapper,
.crx-pdp div.summary .price,
.crx-pdp .celia-payment-plan-section,
.crx-pdp ul.celia-subscription-options,
.crx-pdp .wcsatt-options-product-prompt,
.crx-pdp .celia-product-qty-wrapper,
.crx-pdp form.cart div.quantity,
.crx-pdp .celia-consultation-note,
.crx-pdp p.stock {
display: none !important;
}
.crx-pdp__description,
.crx-pdp__description p {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp__description p {
margin: 0;
}
.crx-pdp__description p + p {
margin-top: 12px;
}
.crx-pdp div.summary > .crx-pdp__points {
margin: 0;
padding-left: 20px;
}
ul.crx-pdp__points,
.crx-pdp__points ul,
.crx-pdp__points ol {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.crx-pdp__points li,
.crx-pdp__points > p {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp__points li::before,
.crx-pdp__points > p::before {
content: "";
flex: 0 0 22px;
width: 22px;
height: 22px;
margin-top: 1px;
border: 1.5px solid var(--crx-dark);
border-radius: 50%;
background: transparent;
}
.crx-pdp__points--icons li::before {
content: none;
}
.crx-pdp img.crx-pdp__point-icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
max-width: 30px;
object-fit: contain;
opacity: 1;
}
.crx-pdp__point-text,
.crx-pdp__point-text p {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp__point-text strong {
font-weight: 700;
}
.crx-pdp__trust {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
gap: 6px;
margin: 0;
padding: 0 20px;
list-style: none;
}
.crx-pdp__trust li {
display: flex;
align-items: center;
gap: 6px;
min-width: min-content;
max-width: max-content;
height: 26px;
margin: 0;
opacity: 1;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp__trust li::before {
content: "";
flex: 0 0 20px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg filter='url(%23filter0_f_10538_4563)'%3E%3Cpath d='M6 10L9 13L14 7M2 14.8002V5.2002C2 4.08009 2 3.51962 2.21799 3.0918C2.40973 2.71547 2.71547 2.40973 3.0918 2.21799C3.51962 2 4.08009 2 5.2002 2H14.8002C15.9203 2 16.4796 2 16.9074 2.21799C17.2837 2.40973 17.5905 2.71547 17.7822 3.0918C18 3.5192 18 4.07899 18 5.19691V14.8036C18 15.9215 18 16.4805 17.7822 16.9079C17.5905 17.2842 17.2837 17.5905 16.9074 17.7822C16.48 18 15.921 18 14.8031 18H5.19691C4.07899 18 3.5192 18 3.0918 17.7822C2.71547 17.5905 2.40973 17.2842 2.21799 16.9079C2 16.4801 2 15.9203 2 14.8002Z' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_10538_4563' x='0' y='0' width='20' height='20' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='0.5' result='effect1_foregroundBlur_10538_4563'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.crx-pdp-acc {
box-sizing: border-box;
width: 100%;
padding: var(--crx-section-y) 0;
}
.crx-pdp-acc__tabs {
display: flex;
align-items: flex-end;
gap: 32px;
margin: 0 0 24px;
border-bottom: 0.5px solid #2B2B2B4D;
overflow-x: auto;
}
.crx-pdp-acc__tab {
flex: 0 0 auto;
margin: 0;
padding: 0 0 12px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
cursor: pointer;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
letter-spacing: 0;
color: #333333;
opacity: 0.55;
}
.crx-pdp-acc__faq-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 8px 0 20px;
}
.crx-pdp-acc__faq-title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h3);
line-height: 1.2;
letter-spacing: 0.02em;
color: #333333;
}
.crx-pdp-acc__faq-link {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #333333;
text-decoration: none;
}
.crx-pdp-acc__faq-link::after {
content: "→";
}
.crx-pdp-acc__faq-link:hover,
.crx-pdp-acc__faq-link:focus-visible {
color: #333333;
opacity: 0.7;
}
.crx-pdp-acc__faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.crx-pdp-acc__faq-list .crx-pdp-acc__item,
.crx-pdp-acc__faq-list .crx-pdp-acc__item:last-child {
border: 1px solid #2b2b2b26;
border-radius: 12px;
background: #ffffff;
}
.crx-pdp-acc__faq-list .crx-pdp-acc__header {
padding: 18px 20px;
font-size: 16px;
letter-spacing: 0;
}
.crx-pdp-acc__faq-list .crx-pdp-acc__body {
padding: 0 20px 18px;
}
.crx-pdp-acc__tab[aria-selected="true"] {
border-bottom-color: #333333;
opacity: 1;
}
.crx-pdp-acc__panel[hidden] {
display: none;
}
.crx-pdp-acc__panel--copy,
.crx-pdp-acc__panel--copy p,
.crx-pdp-acc__panel--copy li {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: 1.5;
letter-spacing: 0.01em;
color: #333333;
}
.crx-pdp-acc__panel--copy h2,
.crx-pdp-acc__panel--copy h3,
.crx-pdp-acc__panel--copy h4 {
margin: 24px 0 10px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #333333;
}
.crx-pdp-acc__panel--copy > :first-child {
margin-top: 0;
}
.crx-pdp-acc__panel--copy p {
margin: 0 0 12px;
}
.crx-pdp-acc__panel--copy p:has(+ ul),
.crx-pdp-acc__panel--copy p:has(+ ol) {
margin-bottom: 8px;
}
.crx-pdp-acc__panel--copy ul,
.crx-pdp-acc__panel--copy ol {
margin: 0 0 16px;
padding-left: 1.25em;
}
.crx-pdp-acc__panel--copy ul li {
list-style: disc;
list-style-position: outside;
}
.crx-pdp-acc__panel--copy ol li {
list-style: decimal;
list-style-position: outside;
}
.crx-pdp-acc__panel--copy li + li {
margin-top: 6px;
}
.crx-pdp-acc__panel--copy > :last-child {
margin-bottom: 0;
}
.crx-pdp-acc__panel--copy b,
.crx-pdp-acc__panel--copy strong {
font-weight: 700;
}
.crx-pdp-acc__item {
border-top: 0.5px solid #2B2B2B4D;
}
.crx-pdp-acc__item:last-child {
border-bottom: 0.5px solid #2B2B2B4D;
}
.crx-pdp-acc__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0;
padding: 16px 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.2;
letter-spacing: 0.05em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-acc__icon {
display: flex;
flex: 0 0 12px;
transform: none;
transition: transform 0.2s ease;
}
.crx-pdp-acc__item.active .crx-pdp-acc__icon {
transform: rotate(180deg);
}
.crx-pdp-acc__body {
padding: 0 0 16px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp-acc__body[hidden] {
display: none;
}
.crx-pdp-acc__qa + .crx-pdp-acc__qa {
margin-top: 16px;
}
.crx-pdp-acc__question,
.crx-pdp-acc__answer,
.crx-pdp-acc__answer p {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-size: var(--crx-fs-small);
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp-acc__question {
margin: 0 0 4px;
font-weight: 700;
}
.crx-pdp-acc__answer,
.crx-pdp-acc__answer p {
font-weight: 400;
}
.crx-pdp-acc__answer p {
margin: 0 0 12px;
}
.crx-pdp-acc__answer p:last-child,
.crx-pdp-acc__body p:last-child {
margin-bottom: 0;
}
.crx-pdp-acc__body ul,
.crx-pdp-acc__body ol {
margin: 8px 0 0;
padding-left: 1.2em;
}
.crx-pdp-acc__body ul li {
list-style: disc;
list-style-position: outside;
}
.crx-pdp-acc__body ol li {
list-style: decimal;
list-style-position: outside;
}
.crx-pdp-acc__body li + li {
margin-top: 4px;
}
.crx-pdp-acc__body strong {
font-weight: 700;
}
.crx-pdp-acc__body.crx-pdp-acc__body--copy,
.crx-pdp-acc__body--copy p,
.crx-pdp-acc__body--copy li {
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp form.cart {
margin: 0;
padding: 0;
border-top: 0;
}
.crx-pdp .celia-payment-plan-section {
margin: 0 0 30px;
}
.crx-pdp .celia-payment-plan-title {
margin: 0 0 16px;
font-family: var(--crx-font);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--crx-ink);
}
.crx-pdp .wcsatt-options-product-prompt {
margin: 0;
}
.crx-pdp ul.celia-subscription-options {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.crx-pdp ul.celia-subscription-options > li {
margin: 0;
}
.crx-pdp .celia-subscription-label {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
column-gap: 12px;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 16px 20px;
border: 0.5px solid var(--crx-divider);
border-radius: 30px;
background: var(--crx-white);
font-family: var(--crx-font);
cursor: pointer;
}
.crx-pdp .celia-subscription-label.checked {
border-color: var(--crx-ink);
}
.crx-pdp .celia-subscription-label input {
grid-column: 1;
grid-row: 1;
width: 20px;
height: 20px;
margin: 2px 0 0;
accent-color: var(--crx-ink);
}
.crx-pdp .celia-subscription-option-content {
display: grid;
grid-column: 2;
grid-row: 1;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 16px;
}
.crx-pdp .celia-subscription-option-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
grid-column: 1;
}
.crx-pdp .celia-subscription-option-title {
font-family: var(--crx-font);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.02em;
color: var(--crx-ink);
}
.crx-pdp .celia-subscription-badge {
margin: 0;
padding: 4px 10px;
border-radius: var(--crx-radius-pill);
background: var(--crx-ink);
font-family: var(--crx-font);
font-weight: 500;
font-size: 10px;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--crx-white);
}
.crx-pdp .celia-subscription-option-price,
.crx-pdp .celia-subscription-option-price-wrapper,
.crx-pdp .celia-subscription-option-content .amount {
grid-column: 2;
margin: 0 0 0 auto;
font-family: var(--crx-font);
font-weight: 700;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--crx-ink);
}
.crx-pdp .celia-subscription-regular-price {
margin-right: 8px;
text-decoration: line-through;
opacity: 0.5;
font-weight: 400;
}
.crx-pdp .celia-subscription-period-selector {
display: none;
flex-direction: column;
gap: 16px;
width: 100%;
grid-column: 1 / -1;
}
.crx-pdp .celia-subscription-label.checked .celia-subscription-period-selector {
display: flex;
margin-top: 16px;
padding-top: 16px;
border-top: 0.5px solid var(--crx-divider);
}
.crx-pdp .celia-subscription-benefits {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.crx-pdp .celia-subscription-benefits li {
display: flex;
align-items: flex-start;
margin: 0 0 8px;
padding: 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
color: var(--crx-ink);
}
.crx-pdp .celia-subscription-benefits li:last-child {
margin-bottom: 0;
}
.crx-pdp .celia-subscription-benefits li::before {
content: "";
flex: 0 0 8px;
width: 8px;
height: 8px;
margin: 4px 10px 0 0;
border-radius: 50%;
background: var(--crx-ink);
}
.crx-pdp .celia-subscription-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.crx-pdp .celia-subscription-period-selector p {
margin: 0;
font-family: var(--crx-font);
font-size: 14px;
line-height: 1.2;
color: var(--crx-ink);
}
.crx-pdp .celia-subscription-period-dropdown {
min-height: 40px;
padding: 8px 16px;
border: 0.5px solid var(--crx-divider);
border-radius: 30px;
background: var(--crx-white);
font-family: var(--crx-font);
font-weight: 500;
font-size: 14px;
color: var(--crx-ink);
}
.crx-pdp .celia-product-atc-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 10px;
}
.crx-pdp .celia-product-qty-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
box-sizing: border-box;
width: 110px;
height: 40px;
overflow: hidden;
border: 0.5px solid var(--crx-divider);
border-radius: 30px;
background: transparent;
}
.crx-pdp .celia-product-qty-wrapper button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
background: transparent;
color: var(--crx-ink);
font-family: var(--crx-font);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.crx-pdp .celia-product-qty-wrapper button.celia-product-qty-minus {
border: 0;
border-right: 0.5px solid var(--crx-divider);
}
.crx-pdp .celia-product-qty-wrapper button.celia-product-qty-plus {
border: 0;
border-left: 0.5px solid var(--crx-divider);
}
.crx-pdp .celia-product-qty-wrapper .quantity {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-width: 0;
margin: 0;
border: 0;
background: transparent;
}
.crx-pdp .celia-product-qty-wrapper .quantity .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.crx-pdp .celia-product-qty-wrapper .quantity input,
.woocommerce div.product form.cart div.quantity .qty {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
border: 0;
background: transparent;
font-family: var(--crx-font);
font-weight: 500;
font-size: 16px;
line-height: 40px;
letter-spacing: 0;
color: var(--crx-ink);
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
.crx-pdp .celia-product-qty-wrapper .quantity input::-webkit-outer-spin-button,
.crx-pdp .celia-product-qty-wrapper .quantity input::-webkit-inner-spin-button {
appearance: none;
-webkit-appearance: none;
margin: 0;
}
.crx-pdp .single_add_to_cart_button,
.crx-pdp .single_add_to_cart_button.wp-element-button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button[name="add-to-cart"] {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
height: 55px;
margin: 0;
padding: 0 30px;
border: 0;
border-radius: 100px;
background: var(--crx-dark);
box-shadow: none;
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.02em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-white);
vertical-align: middle;
transform: none;
}
.crx-pdp .single_add_to_cart_button::after,
.woocommerce div.product form.cart button.single_add_to_cart_button::after,
.woocommerce div.product form.cart button[name="add-to-cart"]::after {
content: "";
flex: 0 0 9px;
width: 9px;
height: 15px;
margin: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M0.364746 14.342L7.36475 7.80865L0.364747 0.34198' stroke='white'/%3E%3C/svg%3E") center / 9px 15px no-repeat;
animation: none;
}
.crx-pdp .single_add_to_cart_button:hover,
.crx-pdp .single_add_to_cart_button.wp-element-button:hover {
background: var(--crx-dark);
color: var(--crx-white);
opacity: 0.88;
box-shadow: none;
transform: none;
}
.crx-pdp .celia-consultation-note {
width: 100%;
margin: 16px 0 0;
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
color: var(--crx-ink);
}
.crx-pdp .celia-pdp-accordions {
display: none;
box-sizing: border-box;
width: calc(100% + (var(--crx-margin) * 2));
margin: 100px calc(var(--crx-margin) * -1) 0;
padding-inline: 120px;
border-top: 0.5px solid var(--crx-divider);
}
.crx-pdp .celia-accordion-item {
border-bottom: 0.5px solid var(--crx-divider);
}
.crx-pdp .celia-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 0;
background: transparent;
border: 0;
cursor: pointer;
}
.crx-pdp .celia-accordion-header p {
margin: 0;
font-family: var(--crx-font);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--crx-dark);
}
.crx-pdp .celia-accordion-item.active .celia-accordion-header p {
font-weight: 700;
}
.crx-pdp .celia-accordion-icon svg path {
stroke: var(--crx-ink);
}
.crx-pdp .celia-accordion-item.active .celia-accordion-icon svg {
transform: rotate(180deg);
}
.crx-pdp .celia-accordion-body {
padding: 0 0 20px;
}
.crx-pdp .celia-accordion-body .body,
.crx-pdp .celia-accordion-body .body p,
.crx-pdp .celia-accordion-body .body li {
font-family: var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
color: var(--crx-dark);
}
.crx-pdp-intro {
box-sizing: border-box;
width: calc(100% + (var(--crx-margin) * 2));
max-width: none;
margin-inline: calc(var(--crx-margin) * -1);
}
.crx-pdp-intro__card {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
min-height: 560px;
padding: var(--crx-section-y) var(--crx-margin);
border-radius: 40px;
background-color: #ead5bd;
background-image: var(--crx-intro-bg);
background-repeat: no-repeat;
background-position: center right;
background-size: cover;
overflow: hidden;
}
.crx-pdp-intro__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
box-sizing: border-box;
width: min(856px, calc(100% - 80px));
max-width: calc(100% - 80px);
margin: 0;
padding: 0;
background: none;
}
.crx-pdp-intro__title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-intro__text,
.crx-pdp-intro__text p {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.5;
letter-spacing: var(--crx-track-body);
color: #333333;
}
.crx-pdp-intro__text p + p,
.crx-pdp-intro__text ul,
.crx-pdp-intro__text ol {
margin-top: 16px;
}
.crx-pdp-intro__text b,
.crx-pdp-intro__text strong {
font-weight: 700;
}
.crx-pdp-intro__text ul,
.crx-pdp-intro__text ol {
margin-bottom: 0;
padding-left: 1.25em;
}
.crx-pdp-intro__text ul li {
list-style: disc;
list-style-position: outside;
}
.crx-pdp-intro__text li + li {
margin-top: 6px;
}
.crx-break {
display: block;
height: 8px;
}
.crx-pdp-intro__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.crx-pdp-intro__btn,
.crx-pdp-uses__btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: fit-content;
height: 55px;
margin: 0;
padding: 0 30px;
border: 0;
border-radius: 100px;
background: var(--crx-dark);
font-family: var(--crx-font);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.02em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--crx-white);
text-decoration: none;
cursor: pointer;
}
.crx-pdp-intro__btn:hover,
.crx-pdp-intro__btn:focus-visible,
.crx-pdp-uses__btn:hover,
.crx-pdp-uses__btn:focus-visible {
opacity: 0.88;
color: var(--crx-white);
}
.crx-pdp-intro__note {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-small);
line-height: 1.4;
letter-spacing: 1px;
text-box-trim: none;
color: #333333;
}
.crx-pdp-works {
box-sizing: border-box;
width: 100%;
padding-block: var(--crx-section-y);
color: var(--crx-dark);
}
.crx-pdp-works__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.crx-pdp-works__title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #2b2b2b;
}
.crx-pdp-works__intro {
display: flex;
flex-direction: column;
gap: 30px;
}
.crx-pdp-works__intro,
.crx-pdp-works__intro p,
.crx-pdp-works__note {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-eyebrow);
line-height: 1.2;
letter-spacing: var(--crx-track-eyebrow);
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #2b2b2b;
}
.crx-pdp-works__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
row-gap: 40px;
width: min(1280px, 100%);
margin: 80px auto 0;
}
.crx-pdp-works__row {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
min-height: 200px;
}
.crx-pdp-works__photo {
flex: 0 0 auto;
width: min(300px, calc(50% - 10px));
min-width: min(300px, calc(50% - 10px));
height: 200px;
border-radius: 40px;
overflow: hidden;
}
.crx-pdp-works__photo picture {
display: block;
width: 100%;
height: 100%;
}
.crx-pdp-works__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.crx-pdp-works .crx-pdp-works__copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
flex: 1 1 300px;
width: auto;
max-width: 300px;
min-width: 0;
box-sizing: border-box;
padding: 0;
}
.crx-pdp-works__step-title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 700;
font-size: var(--crx-fs-h3);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #2b2b2b;
}
.crx-pdp-works__step-text,
.crx-pdp-works__step-text p {
margin: 0;
padding-left: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #2b2b2b;
}
.crx-pdp-works__step-text p {
padding-left: 0;
}
.crx-pdp-works__step-text p + p {
margin-top: 12px;
}
.crx-pdp-works__note {
max-width: 760px;
margin: 60px auto 0;
}
.crx-pdp-uses {
box-sizing: border-box;
width: calc(100% + (var(--crx-margin) * 2));
max-width: none;
margin-inline: calc(var(--crx-margin) * -1);
}
.crx-pdp-uses__card {
box-sizing: border-box;
width: 100%;
padding: var(--crx-section-y) var(--crx-margin);
border-radius: 40px 40px 0 0;
background-color: #d7ebe8;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.crx-pdp-uses__layout {
display: grid;
grid-template-columns: minmax(0, 770px) minmax(0, 480px);
column-gap: 30px;
align-items: center;
justify-content: start;
width: 100%;
}
.crx-pdp-uses__copy {
display: flex;
flex-direction: column;
gap: 30px;
box-sizing: border-box;
width: 100%;
max-width: 770px;
margin: 0;
padding: 0;
border-radius: 40px;
background: none;
}
.crx-pdp-uses__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.crx-pdp-uses__title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-uses__text,
.crx-pdp-uses__text p {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.5;
letter-spacing: var(--crx-track-body);
color: #333333;
}
.crx-pdp-uses__text p + p,
.crx-pdp-uses__text ul,
.crx-pdp-uses__text ol {
margin-top: 16px;
}
.crx-pdp-uses__text b,
.crx-pdp-uses__text strong {
font-weight: 700;
}
.crx-pdp-uses__text ul,
.crx-pdp-uses__text ol {
margin-bottom: 0;
padding-left: 1.25em;
}
.crx-pdp-uses__text ul li {
list-style: disc;
list-style-position: outside;
}
.crx-pdp-uses__text li + li {
margin-top: 6px;
}
.crx-pdp-uses__points-card {
display: flex;
flex-direction: column;
gap: 30px;
box-sizing: border-box;
width: 100%;
max-width: 480px;
min-height: 284px;
margin: 0;
padding: 20px;
border-radius: 20px;
background: #ffffff4d;
}
.crx-pdp-uses__points-label {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 700;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-uses__points {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.crx-pdp-uses__points li {
position: relative;
margin: 0;
padding-left: 14px;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: 1.4;
letter-spacing: 0.03em;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-uses__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
}
.crx-pdp-uses__emphasis p + p {
margin-top: 12px;
}
.crx-pdp-uses__emphasis,
.crx-pdp-uses__emphasis p {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-body);
letter-spacing: var(--crx-track-body);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-uses__note {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
letter-spacing: 1px;
color: #333333;
}
.crx-pdp-uses__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.crx-pdp-science {
display: flex;
align-items: center;
gap: 80px;
box-sizing: border-box;
width: 100%;
padding-block: var(--crx-section-y);
}
.crx-pdp-science__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 30px;
flex: 1 1 800px;
width: 100%;
max-width: 800px;
min-width: 0;
min-height: 349px;
}
.crx-pdp-science__title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-h1);
line-height: var(--crx-lh-h1);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-science__text {
display: flex;
flex-direction: column;
gap: 12px;
}
.crx-pdp-science__text,
.crx-pdp-science__text p {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, var(--crx-font);
font-weight: 400;
font-size: var(--crx-fs-body);
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: #333333;
}
.crx-pdp-science__media {
flex: 0 0 400px;
width: 400px;
height: 349px;
border-radius: 40px;
overflow: hidden;
}
@media (max-width: 1279px) {
.crx-pdp-science {
gap: 40px;
}
.crx-pdp-science__copy {
flex: 1 1 0;
max-width: none;
min-height: 0;
}
.crx-pdp-science__media {
flex: 0 1 auto;
width: min(400px, 36%);
max-width: none;
height: auto;
aspect-ratio: 400 / 349;
}
}
.crx-pdp .crx-pdp-science__media img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
}
@media (max-width: 992px) {
.crx-pdp {
padding: 0 0 60px;
}
.crx-pdp .rx-breadcrumbs {
margin: 0 0 20px;
}
.crx-pdp__grid {
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
padding-bottom: 0;
}
.crx-pdp div.summary > .crx-pdp__points {
padding-left: 0;
}
.crx-pdp .custom-product-image-gallery,
.crx-pdp .custom-main-image {
flex: 0 0 127px;
width: 127px;
max-width: 127px;
}
.crx-pdp .custom-main-image {
height: 218px;
}
.crx-pdp .custom-main-image img {
max-height: 218px;
}
.crx-pdp div.summary {
flex: 1 1 auto;
min-width: 0;
}
.crx-pdp__trust {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
gap: 6px;
padding: 0;
}
.crx-pdp__trust li {
max-width: 100%;
font-size: 12px;
}
.crx-pdp-acc {
padding: 20px 0 var(--crx-section-y);
}
.crx-pdp-acc__body:not(.crx-pdp-acc__body--copy) {
font-size: 12px;
}
.crx-pdp div.summary .price,
.crx-pdp div.summary .price .amount,
.crx-pdp div.summary .price small {
margin-top: 20px;
font-size: 20px;
}
.crx-pdp form.cart {
margin-top: 0;
padding-top: 0;
}
.crx-pdp .celia-payment-plan-section {
margin-bottom: 20px;
}
.crx-pdp .celia-payment-plan-title {
margin-bottom: 12px;
font-size: 12px;
}
.crx-pdp ul.celia-subscription-options {
gap: 8px;
}
.crx-pdp .celia-subscription-label {
grid-template-columns: 16px minmax(0, 1fr);
column-gap: 8px;
padding: 12px 14px;
border-radius: 20px;
}
.crx-pdp .celia-subscription-label input {
width: 16px;
height: 16px;
}
.crx-pdp .celia-subscription-option-content {
grid-template-columns: 1fr;
gap: 6px;
}
.crx-pdp .celia-subscription-option-header {
gap: 6px;
}
.crx-pdp .celia-subscription-option-title {
font-size: 12px;
}
.crx-pdp .celia-subscription-badge {
padding: 3px 8px;
font-size: 8px;
}
.crx-pdp .celia-subscription-option-price,
.crx-pdp .celia-subscription-option-price-wrapper,
.crx-pdp .celia-subscription-option-content .amount {
grid-column: 1;
margin: 0;
font-size: 14px;
}
.crx-pdp .celia-subscription-label.checked .celia-subscription-period-selector {
margin-top: 10px;
padding-top: 10px;
gap: 10px;
}
.crx-pdp .celia-subscription-benefits li,
.crx-pdp .celia-subscription-period-selector p {
font-size: 12px;
}
.crx-pdp .celia-subscription-period-dropdown {
min-height: 36px;
padding: 6px 12px;
font-size: 12px;
}
.crx-pdp .celia-consultation-note {
font-size: 12px;
}
.crx-pdp .celia-pdp-accordions {
width: 100%;
margin: 0;
padding-inline: 0;
}
.woocommerce div.product div.summary,
.woocommerce div.product .crx-pdp div.summary {
margin: 0;
}
.crx-pdp .celia-accordion-header p {
font-size: 16px;
}
.crx-pdp .celia-accordion-body .body,
.crx-pdp .celia-accordion-body .body p,
.crx-pdp .celia-accordion-body .body li {
font-size: 12px;
}
.crx-pdp-intro__card {
align-items: flex-start;
width: 100%;
max-width: none;
min-height: 0;
margin-inline: 0;
padding: 40px var(--crx-margin) 75%;
background-color: #f0dfcd;
background-image: var(--crx-intro-bg-m, var(--crx-intro-bg));
background-position: center bottom;
background-size: 100% auto;
}
.crx-pdp-intro__copy {
width: 100%;
max-width: none;
}
.crx-pdp-works__list {
grid-template-columns: minmax(0, 1fr);
column-gap: 20px;
row-gap: 20px;
width: 100%;
margin-top: 40px;
}
.crx-pdp-works__row {
gap: 20px;
min-height: 200px;
}
.crx-pdp-works__photo {
flex: 0 0 auto;
width: min(150px, 34%);
min-width: 0;
max-width: 150px;
height: 200px;
border-radius: 40px;
}
.crx-pdp-works .crx-pdp-works__copy {
gap: 16px;
max-width: none;
}
.crx-pdp-works__step-title {
font-size: 18px;
letter-spacing: 0.02em;
}
.crx-pdp-works__step-text,
.crx-pdp-works__step-text p {
font-size: 14px;
letter-spacing: 0.01em;
}
.crx-pdp-works__note {
margin-top: 30px;
}
.crx-pdp-uses {
width: calc(100% + (var(--crx-margin) * 2));
margin-inline: calc(var(--crx-margin) * -1);
}
.crx-pdp-uses__card {
width: 100%;
min-height: 0;
padding: 40px var(--crx-margin);
border-radius: 40px;
}
.crx-pdp-uses__layout {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 30px;
}
.crx-pdp-uses__copy {
display: contents;
max-width: none;
}
.crx-pdp-uses__body {
order: 1;
}
.crx-pdp-uses__points-card {
order: 2;
width: 100%;
max-width: none;
min-height: 0;
}
.crx-pdp-uses__actions {
order: 3;
}
.crx-pdp-uses__note {
font-size: 12px;
}
.crx-pdp-science {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.crx-pdp-science__copy {
flex: none;
gap: 30px;
max-width: none;
min-height: 0;
}
.crx-pdp-science__media {
flex: none;
align-self: center;
width: 100%;
max-width: 400px;
height: auto;
aspect-ratio: 400 / 349;
}
}
body.woocommerce .woocommerce-breadcrumb {
margin: 0;
padding: 13px 0 12px;
border: 1px solid var(--crx-divider);
border-left: 0;
border-right: 0;
}
body.woocommerce .woocommerce-breadcrumb a {
font-size: 14px;
color: var(--crx-ink);
}
body.woocommerce .woocommerce-breadcrumb a:first-child {
color: var(--crx-gray);
}
@media (max-width: 767px) {
body.woocommerce .woocommerce-breadcrumb {
display: none;
}
}
body.woocommerce div.product {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: none;
margin-top: 0;
justify-self: stretch;
}
body.single-product .container {
max-width: none !important;
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.woocommerce div.product .summary ~ .container {
flex: 1 1 100%;
width: 100%;
max-width: none !important;
padding: 0 !important;
}
.up-sells {
padding: 33px 0 140px;
}
.up-sells h2 {
text-align: center;
color: var(--crx-ink);
font-weight: 700;
font-size: 42px;
letter-spacing: 0;
margin-bottom: 27px;
}
@media (max-width: 767px) {
.up-sells {
padding: 11px 0 37px;
}
.up-sells h2 {
font-size: 24px;
margin-bottom: 15px;
}
}
.single-product .woocommerce .products ul,
.single-product.woocommerce ul.products {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
opacity: 1 !important;
visibility: visible !important;
}
.woocommerce-product-gallery__image {
display: block !important;
max-height: 560px;
aspect-ratio: 1/1;
}
.woocommerce-product-gallery__image > a {
overflow: hidden;
}
.woocommerce-product-gallery__image img {
display: block !important;
}
body.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
margin-top: 8px;
}
body.woocommerce div.product div.images img {
box-shadow: none;
max-height: 540px;
object-fit: contain;
}
.single-product #sidebar {
display: none;
}
.celia-accordion-body li {
list-style: disc;
}body.single-product #judgeme_product_reviews {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: var(--crx-section-y) 0;
background: var(--crx-white);
font-family: var(--crx-font) !important;
color: var(--crx-dark);
}
body.single-product #judgeme_product_reviews .jdgm-rev-widg {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent;
border: 0;
font-family: inherit !important;
}
body.single-product .jdgm-rev-widg__header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 30px;
width: 100%;
margin: 0 0 30px;
padding: 0;
border: 0;
text-align: center;
}
body.single-product .jdgm-rev-widg__title {
margin: 0 !important;
font-family: var(--crx-font) !important;
font-weight: 400 !important;
font-size: var(--crx-fs-h1) !important;
line-height: var(--crx-lh-h1) !important;
letter-spacing: var(--crx-track-title) !important;
color: var(--crx-dark) !important;
text-align: center !important;
text-transform: none !important;
}
body.single-product .jdgm-row-stars {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
float: none !important;
gap: 30px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
body.single-product .jdgm-rev-widg__summary,
body.single-product .jdgm-rev-widg__summary-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
float: none !important;
gap: 12px;
width: 100% !important;
margin: 0 !important;
padding: 0;
border: 0;
background: transparent;
text-align: center !important;
}
body.single-product .jdgm-rev-widg__summary-stars {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: center;
width: auto !important;
}
body.single-product .jdgm-rev-widg__summary-stars .jdgm-star {
display: inline-block !important;
flex: 0 0 auto !important;
}
body.single-product .jdgm-rev-widg__summary-text {
margin: 0;
font-family: var(--crx-font) !important;
font-weight: 400 !important;
font-size: var(--crx-fs-body) !important;
line-height: var(--crx-lh-body) !important;
color: var(--crx-dark-60) !important;
text-align: center !important;
}
body.single-product .jdgm-widget-actions-wrapper {
display: flex !important;
justify-content: center !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
body.single-product .jdgm-write-rev-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
float: none !important;
width: auto !important;
margin: 0 auto !important;
padding: 15px 30px !important;
border: 0 !important;
border-radius: var(--crx-radius-pill) !important;
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
font-family: var(--crx-font) !important;
font-weight: 400 !important;
font-size: var(--crx-fs-btn) !important;
line-height: 1.4 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
text-transform: none !important;
white-space: nowrap !important;
}
body.single-product .jdgm-write-rev-link:hover,
body.single-product .jdgm-write-rev-link:focus-visible {
color: var(--crx-white) !important;
opacity: 0.88;
}
body.single-product .jdgm-form-wrapper,
body.single-product .jdgm-form {
margin-top: 30px;
padding: 40px 0 0;
border: 0;
border-top: 0.5px solid var(--crx-divider);
background: transparent;
font-family: var(--crx-font) !important;
}
body.single-product .jdgm-form__title {
margin: 0 0 30px !important;
font-family: var(--crx-font) !important;
font-weight: 400 !important;
font-size: var(--crx-fs-h2) !important;
color: var(--crx-dark) !important;
text-align: center !important;
}
body.single-product .jdgm-form__fieldset {
margin: 0 0 20px;
}
body.single-product .jdgm-form__fieldset label,
body.single-product .jdgm-form__inline-label {
font-family: var(--crx-font) !important;
font-weight: 400 !important;
font-size: var(--crx-fs-small) !important;
color: var(--crx-dark) !important;
}
body.single-product .jdgm-form input[type="text"],
body.single-product .jdgm-form input[type="email"],
body.single-product .jdgm-form textarea {
width: 100%;
padding: 14px 20px !important;
border: 0.5px solid var(--crx-divider) !important;
border-radius: var(--crx-radius-btn) !important;
background: var(--crx-white) !important;
font-family: var(--crx-font) !important;
font-size: var(--crx-fs-body) !important;
color: var(--crx-dark) !important;
box-shadow: none !important;
}
body.single-product .jdgm-form input:focus,
body.single-product .jdgm-form textarea:focus {
outline: 1px solid var(--crx-dark);
border-color: var(--crx-dark) !important;
}
body.single-product .jdgm-form__fieldset p,
body.single-product .jdgm-form__fieldset a {
font-family: var(--crx-font) !important;
font-size: var(--crx-fs-small) !important;
color: var(--crx-dark-60) !important;
}
body.single-product .jdgm-btn,
body.single-product input.jdgm-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 15px 30px !important;
border: 0 !important;
border-radius: var(--crx-radius-pill) !important;
font-family: var(--crx-font) !important;
font-weight: 400 !important;
font-size: var(--crx-fs-btn) !important;
text-transform: none !important;
cursor: pointer;
}
body.single-product .jdgm-btn--solid,
body.single-product input.jdgm-submit-rev {
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
}
body.single-product .jdgm-btn--border,
body.single-product .jdgm-cancel-rev {
background: transparent !important;
color: var(--crx-dark) !important;
box-shadow: inset 0 0 0 1px var(--crx-dark) !important;
}
body.single-product .jdgm-rev {
margin: 0 0 30px;
padding: 30px 0;
border: 0;
border-top: 0.5px solid var(--crx-divider);
background: transparent;
}
body.single-product .jdgm-rev__author,
body.single-product .jdgm-rev__title,
body.single-product .jdgm-rev__body {
font-family: var(--crx-font) !important;
color: var(--crx-dark) !important;
}
body.single-product .jdgm-rev__title {
font-weight: 400 !important;
font-size: var(--crx-fs-h3) !important;
}
body.single-product .jdgm-rev__body {
font-size: var(--crx-fs-body) !important;
line-height: var(--crx-lh-body) !important;
}
@media (max-width: 768px) {
body.single-product .jdgm-rev-widg__title {
font-size: 30px !important;
}
}
body.single-product #judgeme_product_reviews {
display: none !important;
}.crx-hero__cta #cpq-open-modal,
.crx-hero__cta button.cpq-btn,
button#cpq-open-modal.cpq-btn {
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
}
.cpq-container .cpq-btn,
button.cpq-btn {
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
border: 0 !important;
border-radius: var(--crx-radius-btn) !important;
font-family: var(--crx-font) !important;
font-weight: 500 !important;
}
.cpq-container .cpq-btn:hover,
button.cpq-btn:hover {
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
opacity: 0.88 !important;
transform: none !important;
}
.cpq-container .cpq-btn-flat,
button.cpq-btn-flat {
background: transparent !important;
color: var(--crx-dark) !important;
border: 1px solid var(--crx-dark) !important;
border-radius: var(--crx-radius-btn) !important;
font-family: var(--crx-font) !important;
font-weight: 500 !important;
}
.cpq-container .cpq-btn-flat:hover,
button.cpq-btn-flat:hover {
background: transparent !important;
color: var(--crx-dark) !important;
opacity: 0.88 !important;
transform: none !important;
}
#ui-datepicker-div,
#ui-datepicker-div.ui-datepicker,
#ui-datepicker-div.cpq-datepicker {
font-family: var(--crx-font) !important;
background: linear-gradient(180deg, var(--crx-sky-10) 0%, var(--crx-yellow-10) 100%), var(--crx-white) !important;
border: 0.5px solid var(--crx-divider) !important;
border-radius: var(--crx-radius-hero) !important;
color: var(--crx-ink);
}
#ui-datepicker-div .ui-datepicker-header,
#ui-datepicker-div .ui-widget-header {
background: transparent !important;
border: 0 !important;
color: var(--crx-dark);
}
#ui-datepicker-div .ui-datepicker-title select {
border: 0.5px solid var(--crx-divider) !important;
border-radius: var(--crx-radius-pill) !important;
background-color: var(--crx-white) !important;
color: var(--crx-dark) !important;
}
#ui-datepicker-div .ui-datepicker-calendar a.ui-state-default:hover {
background: var(--crx-sky-30) !important;
color: var(--crx-dark) !important;
}
#ui-datepicker-div .ui-datepicker-today a.ui-state-default:not(.ui-state-active) {
background: var(--crx-sky-30) !important;
color: var(--crx-dark) !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar a.ui-state-active {
background: var(--crx-dark) !important;
color: var(--crx-white) !important;
}body.home {
background-color: #fff;
background-image: none;
}
.crx-home-wash {
background-color: #fff;
background-image: url(//www.celia-rx.com/wp-content/themes/celiarx-child/assets/images/crx/page-bg.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
} .crx-pdp-wash {
padding-top: 155px;
background-color: #fff;
background-image: url(//www.celia-rx.com/wp-content/themes/celiarx-child/assets/images/crx/page-bg.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
@media (max-width: 992px) {
.crx-pdp-wash {
padding-top: 97px;
}
}.shopping-bag-toggle {
background: none;
border: none;
padding: 0;
cursor: pointer;
position: relative;
} body.woocommerce-cart .shopping-bag-toggle {
cursor: default;
} body.woocommerce-checkout .shopping-bag-toggle {
display: none !important;
}
.shopping-bag-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 460px;
z-index: 10000;
visibility: hidden;
opacity: 0;
box-sizing: border-box;
transition: visibility var(--crx-ease), opacity var(--crx-ease);
}
.shopping-bag-panel.active {
visibility: visible;
opacity: 1;
}
.shopping-bag-panel-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background: var(--crx-dark-60);
z-index: 9999;
display: none;
}
.shopping-bag-panel.active .shopping-bag-panel-overlay {
display: block;
}
.shopping-bag-panel-content {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
background: var(--crx-white);
color: var(--crx-dark);
font-family: var(--crx-font);
border-left: 0.5px solid var(--crx-divider);
border-top-left-radius: var(--crx-radius-hero);
border-bottom-left-radius: var(--crx-radius-hero);
box-shadow: -24px 0 60px rgba(43, 43, 43, 0.12);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--crx-ease);
z-index: 10001;
}
.shopping-bag-panel.active .shopping-bag-panel-content {
transform: translateX(0);
}
.shopping-bag-panel-header {
padding: 30px;
border-bottom: 0.5px solid var(--crx-divider);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.shopping-bag-panel-header h3 {
margin: 0;
font-family: var(--crx-font);
font-size: var(--crx-fs-h2);
font-weight: 500;
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-title);
color: var(--crx-dark);
}
.shopping-bag-close {
flex: 0 0 auto;
width: 42px;
min-height: 42px;
aspect-ratio: 1;
background: var(--crx-dark);
border: 0;
border-radius: 50%;
padding: 0;
cursor: pointer;
color: var(--crx-white);
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--crx-ease);
}
.shopping-bag-close img {
display: block;
width: 14px;
height: 14px;
}
.shopping-bag-close:hover {
color: var(--crx-white);
opacity: 0.88;
}
.shopping-bag-panel-body {
flex: 1;
overflow-y: auto;
padding: 20px 30px;
}
.shopping-bag-panel-body .products-list {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
min-height: 100px;
} .shopping-bag-panel-body .mini-cart-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
z-index: 10;
opacity: 1;
visibility: visible;
transition: opacity var(--crx-ease), visibility var(--crx-ease);
}
.shopping-bag-panel-body .mini-cart-loader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.shopping-bag-panel-body .mini-cart-loader .spinner {
width: 40px;
min-height: 40px;
aspect-ratio: 1;
border: 3px solid var(--crx-yellow);
border-top-color: var(--crx-dark);
border-radius: 50%;
animation: mini-cart-spin 0.8s linear infinite;
margin-bottom: 16px;
}
.shopping-bag-panel-body .mini-cart-loader .loader-text {
font-size: var(--crx-fs-small);
color: var(--crx-dark-60);
font-weight: 400;
font-family: var(--crx-font);
}
@keyframes mini-cart-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .shopping-bag-panel-body .mini-cart-skeleton {
display: flex;
flex-direction: column;
gap: 20px;
padding: 0;
margin: 0;
}
.shopping-bag-panel-body .skeleton-item {
display: flex;
gap: 16px;
padding: 0 0 20px;
border: 0;
border-bottom: 0.5px solid var(--crx-divider);
border-radius: 0;
position: relative;
background: transparent;
}
.shopping-bag-panel-body .skeleton-image {
width: 80px;
min-height: 80px;
aspect-ratio: 1;
flex-shrink: 0;
border-radius: 16px;
background: linear-gradient(90deg, var(--crx-sky-10) 25%, var(--crx-yellow-10) 50%, var(--crx-sky-10) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
.shopping-bag-panel-body .skeleton-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.shopping-bag-panel-body .skeleton-title {
height: 16px;
background: linear-gradient(90deg, var(--crx-sky-10) 25%, var(--crx-yellow-10) 50%, var(--crx-sky-10) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
width: 80%;
}
.shopping-bag-panel-body .skeleton-title.short {
width: 60%;
}
.shopping-bag-panel-body .skeleton-price {
height: 14px;
background: linear-gradient(90deg, var(--crx-sky-10) 25%, var(--crx-yellow-10) 50%, var(--crx-sky-10) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
width: 40%;
}
.shopping-bag-panel-body .skeleton-quantity {
height: 12px;
background: linear-gradient(90deg, var(--crx-sky-10) 25%, var(--crx-yellow-10) 50%, var(--crx-sky-10) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
width: 30%;
margin-top: 4px;
}
.shopping-bag-panel-body .skeleton-remove {
position: absolute;
top: 0;
right: 0;
width: 24px;
min-height: 24px;
border-radius: 4px;
background: linear-gradient(90deg, var(--crx-sky-10) 25%, var(--crx-yellow-10) 50%, var(--crx-sky-10) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.shopping-bag-panel-body .products-list article.product {
display: flex;
gap: 16px;
padding: 0 0 20px;
margin: 0 0 20px;
border: 0;
border-bottom: 0.5px solid var(--crx-divider);
border-radius: 0;
position: relative;
}
.shopping-bag-panel-body .products-list article.product:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.shopping-bag-panel-body .products-list article.product .product-image {
width: 80px;
min-height: 80px;
aspect-ratio: 1;
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, var(--crx-sky-10) 0%, var(--crx-yellow-10) 100%);
}
.shopping-bag-panel-body .products-list article.product .product-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
}
.shopping-bag-panel-body .products-list article.product .product-body {
flex: 1;
min-width: 0;
padding-right: 28px;
}
.shopping-bag-panel-body .products-list article.product .product-title {
margin: 0 0 8px 0;
font-size: var(--crx-fs-tag);
font-weight: 500;
line-height: var(--crx-lh-title);
letter-spacing: var(--crx-track-body);
width: 100%;
}
.shopping-bag-panel-body .products-list article.product .product-title a {
color: var(--crx-dark);
text-decoration: none;
font-family: var(--crx-font);
font-weight: 500;
}
.shopping-bag-panel-body .products-list article.product .product-price {
margin: 0 0 8px 0;
font-family: var(--crx-font);
font-size: var(--crx-fs-small);
font-weight: 400;
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
}
.shopping-bag-panel-body .products-list article.product .custom-quantity-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.shopping-bag-panel-body .products-list article.product .custom-quantity-input-wrapper .pre {
margin: 0;
font-family: var(--crx-font);
font-size: var(--crx-fs-small);
letter-spacing: var(--crx-track-eyebrow);
text-transform: uppercase;
color: var(--crx-dark-60);
}
.shopping-bag-panel-body .products-list article.product .custom-quantity-input-wrapper .quantity-inner {
font-family: var(--crx-font);
font-size: var(--crx-fs-small);
font-weight: 500;
color: var(--crx-dark);
}
.shopping-bag-panel-body .products-list article.product .product-remote-button {
position: absolute;
top: 0;
right: 0;
width: 18px;
min-height: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--crx-ease);
}
.shopping-bag-panel-body .products-list article.product .product-remote-button:hover {
opacity: 0.7;
}
.shopping-bag-panel-body .products-list article.product .product-remote-button img {
display: block;
width: 16px;
height: 18px;
object-fit: contain;
}
.shopping-bag-panel-body .products-list article.product.cb-child-item {
background: var(--crx-yellow-10);
border-left: 0;
margin-left: 20px;
padding: 16px;
border-radius: 16px;
border-bottom: 0;
}
.shopping-bag-panel-body .products-list article.product.cb-child-item .product-remote-button {
display: none;
}
.shopping-bag-panel-footer {
padding: 24px 30px calc(30px + env(safe-area-inset-bottom, 0px));
border-top: 0.5px solid var(--crx-divider);
flex-shrink: 0;
min-width: 0;
box-sizing: border-box;
}
.shopping-bag-panel-footer .subtotal-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.shopping-bag-panel-footer .subtotal-label {
font-family: var(--crx-font);
font-size: var(--crx-fs-tag);
font-weight: 400;
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
}
.shopping-bag-panel-footer .subtotal-inner {
font-family: var(--crx-font);
font-size: var(--crx-fs-body);
font-weight: 500;
letter-spacing: var(--crx-track-body);
color: var(--crx-dark);
}
.shopping-bag-actions {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.shopping-bag-actions .btn-view-cart,
.shopping-bag-actions .btn-checkout {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 42px;
height: 42px;
padding: 10px 20px;
font-size: 14px;
line-height: 1;
}
.shopping-bag-panel-body .products-list:empty::before {
content: "Your cart is empty";
display: block;
text-align: center;
padding: 40px 20px;
color: var(--crx-dark-60);
font-size: var(--crx-fs-tag);
font-family: var(--crx-font);
letter-spacing: var(--crx-track-body);
}
body.mini-cart-open {
overflow: hidden;
}
@media (max-width: 767px) {
.shopping-bag-panel {
max-width: 100%;
}
.shopping-bag-panel-content {
border-left: 0;
border-radius: 0;
}
.shopping-bag-panel-header,
.shopping-bag-panel-footer {
padding: 20px;
}
.shopping-bag-panel-footer {
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.shopping-bag-panel-body {
padding: 20px;
}
.shopping-bag-panel-body .products-list article.product .product-image {
width: 72px;
min-height: 72px;
}
}