/* =============================================================================
GLOBAL.CSS — Telehealth Base Template
Mirrors the Medovation Templates Figma UI Element library.
All color values reference CSS variables bridged from Elementor global colors
(functions.php → hello_child_elementor_bridge).
Changing a color in Elementor → Site Settings → Global Colors updates
every variant defined here automatically.
============================================================================= */
/* =============================================================================
BASE RESET & BODY
============================================================================= */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-regular);
font-weight: var(--font-weight-normal);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg-white);
margin: 0;
padding: 0;
}
/* =============================================================================
TYPOGRAPHY
============================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
margin-top: 0;
margin-bottom: var(--space-sm);
}
/* Theme default text color — skip Elementor heading widgets (color set per widget in the editor) */
h1:not(.elementor-heading-title),
h2:not(.elementor-heading-title),
h3:not(.elementor-heading-title),
h4:not(.elementor-heading-title),
h5:not(.elementor-heading-title),
h6:not(.elementor-heading-title) {
color: var(--color-text);
}
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
h5 { font-size: var(--text-h5); line-height: var(--leading-h5); }
h6 { font-size: var(--text-h6); line-height: var(--leading-h6); }
p {
margin-top: 0;
margin-bottom: var(--space-sm);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--color-primary-dark); }
strong, b { font-weight: var(--font-weight-semibold); }
/* Tagline / eyebrow — 16px SemiBold 600 */
.tagline {
display: inline-block;
font-family: var(--font-ui);
font-size: var(--text-tagline);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-tagline);
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
/* =============================================================================
BUTTONS
Figma spec: Button component — 4 styles × 2 alternates × 2 sizes + icon-only
─────────────────────────────────────────────────────────────────────────────
USAGE IN ELEMENTOR:
Add one style class + one optional size class to the Button widget's
Advanced → CSS Classes field. Examples:
"btn-primary" → filled primary, medium
"btn-primary btn-lg" → filled primary, large
"btn-secondary btn-sm" → outlined, small
"btn-primary btn-alt" → inverted primary (for dark section backgrounds)
How global colors work:
- background / border color are bound via __globals__ to kit colors
- hover / focus states are driven by the CSS classes below
- changing primary in Site Settings updates both Elementor's inline style
AND the CSS variable, so every button instance updates everywhere
============================================================================= */
/* ── Base reset (applied to all .btn- classes) ─────────────────────────────── */
/* .nova-btn overrides padding/height via its own block below — don't fight it */
[class*="btn-"]:not(.nova-btn),
.elementor-button:not([class*="nova-btn"]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px; /* Figma: 12px icon gap */
font-family: var(--font-ui);
font-size: var(--text-regular); /* 16px */
font-weight: var(--font-weight-normal); /* 400 — Figma Text/Regular/Normal */
line-height: var(--leading-normal); /* 150% */
padding: 12px 20px; /* default = Figma small: 8px 20px */
border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--transition),
border-color var(--transition),
color var(--transition),
box-shadow var(--transition);
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
}
/* ── Size variants ──────────────────────────────────────────────────────────── */
/* Large — Figma: 12px 24px */
.btn-lg,
.elementor-button.btn-lg {
padding: 12px 24px;
}
/* Small — Figma: 8px 20px (already default) */
.btn-sm,
.elementor-button.btn-sm {
padding: 8px 20px;
font-size: var(--text-small); /* 14px */
}
/* Icon-only — Figma: 12px all sides (large) / 8px (small) */
.btn-icon,
.elementor-button.btn-icon {
padding: 12px;
gap: 0;
}
.btn-icon.btn-sm,
.elementor-button.btn-icon.btn-sm {
padding: 8px;
}
/* ── Style=Primary (light bg) ── filled, brand color ───────────────────────── */
.btn-primary,
.elementor-button.btn-primary {
background-color: var(--color-cta);
border: none;
color: var(--color-cta-text);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.elementor-button.btn-primary:hover {
background-color: var(--color-cta-hover);
border: none;
color: var(--color-cta-text-hover);
box-shadow: none;
}
.btn-primary:active,
.elementor-button.btn-primary:active {
background-color: var(--color-cta-hover);
border: none;
color: var(--color-cta-text-hover);
box-shadow: none;
}
/* ── Style=Primary, Alternate (dark bg) ── inverted ────────────────────────── */
.btn-primary.btn-alt,
.elementor-button.btn-primary.btn-alt {
background-color: var(--color-bg-white);
border-color: var(--color-bg-white);
color: var(--color-primary);
}
.btn-primary.btn-alt:hover,
.elementor-button.btn-primary.btn-alt:hover {
background-color: transparent;
border-color: var(--color-bg-white);
color: var(--color-bg-white);
}
/* ── Style=Secondary (light bg) ── outlined ─────────────────────────────────── */
.btn-secondary,
.elementor-button.btn-secondary {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.elementor-button.btn-secondary:hover {
background-color: var(--color-bg-light);
border-color: var(--color-neutral-lighter);
color: var(--color-text);
}
.btn-secondary:active,
.elementor-button.btn-secondary:active {
background-color: var(--color-neutral-lightest);
}
/* ── Style=Secondary, Alternate (dark bg) ── outlined white ─────────────────── */
.btn-secondary.btn-alt,
.elementor-button.btn-secondary.btn-alt {
background-color: transparent;
border-color: rgba(255,255,255,0.40);
color: var(--color-bg-white);
}
.btn-secondary.btn-alt:hover,
.elementor-button.btn-secondary.btn-alt:hover {
background-color: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.65);
color: var(--color-bg-white);
}
/* ── Style=Tertiary (light bg) ── text only, no border ──────────────────────── */
.btn-tertiary,
.elementor-button.btn-tertiary {
background-color: transparent;
border-color: transparent;
color: var(--color-text);
padding-left: 4px;
padding-right: 4px;
}
.btn-tertiary:hover,
.elementor-button.btn-tertiary:hover {
background-color: var(--color-bg-light);
color: var(--color-primary);
}
/* ── Style=Tertiary, Alternate (dark bg) ─────────────────────────────────────── */
.btn-tertiary.btn-alt,
.elementor-button.btn-tertiary.btn-alt {
color: var(--color-bg-white);
}
.btn-tertiary.btn-alt:hover,
.elementor-button.btn-tertiary.btn-alt:hover {
background-color: rgba(255,255,255,0.10);
color: var(--color-bg-white);
}
/* ── Style=Link ── underlined text, no chrome ───────────────────────────────── */
.btn-link,
.elementor-button.btn-link {
background: none;
border: none;
padding: 0;
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
gap: 6px;
}
.btn-link:hover,
.elementor-button.btn-link:hover {
color: var(--color-primary-dark);
}
.btn-link.btn-alt,
.elementor-button.btn-link.btn-alt {
color: var(--color-bg-white);
}
.btn-link.btn-alt:hover {
color: rgba(255,255,255,0.75);
}
/* ── Disabled state (all variants) ──────────────────────────────────────────── */
[class*="btn-"]:disabled,
[class*="btn-"][aria-disabled="true"],
.elementor-button:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* ── Accent / Destructive variant ───────────────────────────────────────────── */
.btn-accent,
.elementor-button.btn-accent {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-bg-white);
}
.btn-accent:hover,
.elementor-button.btn-accent:hover {
filter: brightness(0.88);
}
/* =============================================================================
NOVA SITE BUTTONS — the two canonical button styles used in templates
─────────────────────────────────────────────────────────────────────────────
These are the SINGLE SOURCE OF TRUTH for button appearance across the site.
Every Button widget in every template has its Elementor inline-colour settings
cleared and uses ONE of these two CSS classes instead.
CSS classes set on Button widgets (Advanced → CSS Classes):
Primary (filled black) : "nova-btn nova-btn-primary"
Secondary (outline) : "nova-btn nova-btn-secondary"
To change button appearance site-wide, edit the values here.
The classes are written to global.css so changes take effect on next page load
without any Elementor cache regeneration.
============================================================================= */
/* ── Base — shared by both variants ────────────────────────────────────────── */
/* NOTE: css_classes in Elementor goes on the wrapper div (.elementor-widget-button),
so selectors are .nova-btn-primary .elementor-button (parent → child),
NOT .elementor-button.nova-btn-primary (same element). */
.nova-btn .elementor-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px;
padding: 0 24px !important;
font-family: var(--font-ui) !important;
font-size: var(--text-regular) !important; /* 16px */
font-weight: var(--font-weight-medium) !important; /* 500 */
line-height: 1 !important;
border-radius: var(--radius-sm) !important; /* 4px */
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition),
color var(--transition),
border-color var(--transition) !important;
box-shadow: none !important;
}
/* ── Primary — CTA blue, white text ────────────────────────────────────────── */
.nova-btn-primary .elementor-button {
background-color: var(--color-cta) !important;
color: var(--color-cta-text) !important;
border: none !important;
}
.nova-btn-primary .elementor-button:hover,
.nova-btn-primary .elementor-button:focus {
background-color: var(--color-cta-hover) !important;
border-color: var(--color-cta-hover) !important;
color: var(--color-cta-text-hover) !important;
opacity: 1 !important;
}
/* ── Secondary — white fill, black border, black text ──────────────────────── */
.nova-btn-secondary .elementor-button {
background-color: var(--color-bg-white) !important;
color: var(--color-text) !important;
border: 2px solid var(--color-text) !important;
}
.nova-btn-secondary .elementor-button:hover,
.nova-btn-secondary .elementor-button:focus {
background-color: var(--color-text) !important;
color: var(--color-bg-white) !important;
border-color: var(--color-text) !important;
opacity: 1 !important;
}
/* =============================================================================
TEMPLATE BUTTON OVERRIDES — element-ID targeting (reliable fallback)
─────────────────────────────────────────────────────────────────────────────
Targets each button by its Elementor element ID, matching Elementor's own
CSS pipeline convention (.elementor-{tid} .elementor-element-{eid}).
This fires whether or not _css_classes renders in the HTML.
PRIMARY = black fill, white text
SECONDARY = white fill, black border, black text — inverts on hover
============================================================================= */
/* ── Shared base for all template buttons ──────────────────────────────────── */
.elementor-22 .elementor-element-3527a1f .elementor-button,
.elementor-22 .elementor-element-11f0195 .elementor-button,
.elementor-35 .elementor-element-70cf09e .elementor-button,
.elementor-35 .elementor-element-ce16614 .elementor-button,
.elementor-36 .elementor-element-1761b8e .elementor-button,
.elementor-37 .elementor-element-8be68e5 .elementor-button,
.elementor-37 .elementor-element-fc6fc63 .elementor-button,
.elementor-41 .elementor-element-8a6e785 .elementor-button,
.elementor-41 .elementor-element-8b687be .elementor-button {
height: 48px !important;
padding: 0 24px !important;
font-family: var(--font-ui) !important;
font-size: var(--text-regular) !important;
font-weight: var(--font-weight-medium) !important;
line-height: 1 !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
transition: background-color var(--transition), color var(--transition), border-color var(--transition) !important;
}
/* ── PRIMARY buttons ───────────────────────────────────────────────────────── */
.elementor-22 .elementor-element-3527a1f .elementor-button,
.elementor-35 .elementor-element-70cf09e .elementor-button,
.elementor-36 .elementor-element-1761b8e .elementor-button,
.elementor-37 .elementor-element-8be68e5 .elementor-button,
.elementor-41 .elementor-element-8b687be .elementor-button {
background-color: var(--color-cta) !important;
color: var(--color-cta-text) !important;
border: none !important;
}
/* ── SECONDARY buttons ─────────────────────────────────────────────────────── */
.elementor-22 .elementor-element-11f0195 .elementor-button,
.elementor-35 .elementor-element-ce16614 .elementor-button,
.elementor-37 .elementor-element-fc6fc63 .elementor-button,
.elementor-41 .elementor-element-8a6e785 .elementor-button {
background-color: var(--color-bg-white) !important;
color: var(--color-neutral-darkest) !important;
border: 0 solid var(--color-neutral-darkest) !important;
padding: 0 10px !important;
}
.elementor-22 .elementor-element-11f0195 .elementor-button:hover,
.elementor-35 .elementor-element-ce16614 .elementor-button:hover,
.elementor-37 .elementor-element-fc6fc63 .elementor-button:hover {
background-color: var(--color-neutral-darkest) !important;
color: var(--color-bg-white) !important;
border-color: var(--color-neutral-darkest) !important;
}
opacity: 1 !important;
}
/* Site CTAs — #1C34A7 default, black hover, white text */
:is(
.btn-primary,
.elementor-button.btn-primary,
.nova-btn-primary .elementor-button,
.woocommerce-cart .button,
.woocommerce-cart a.button,
.woocommerce-cart button.button,
.woocommerce-cart input.button,
.woocommerce-cart .return-to-shop .button,
.nova-cart-order .wc-proceed-to-checkout .checkout-button,
.nova-cart-checkout-button,
.nova-cart-coupon .button,
.checkout_coupon .button,
.woocommerce-checkout #place_order,
#place_order,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
.elementor-22 .elementor-element-3527a1f .elementor-button,
.elementor-35 .elementor-element-70cf09e .elementor-button,
.elementor-36 .elementor-element-1761b8e .elementor-button,
.elementor-37 .elementor-element-8be68e5 .elementor-button,
.elementor-41 .elementor-element-8b687be .elementor-button,
.nova-products__btn,
.nova-products__view-all,
.nova-shop__clear-filters,
.nova-shop__cta-btn,
.nova-sp-button-row .nova-sp-buy-now,
.elementor-widget-button:not(.nova-btn-secondary) .elementor-button
) {
background-color: var(--color-cta) !important;
border: none !important;
border-color: var(--color-cta) !important;
color: var(--color-cta-text) !important;
outline: none;
box-shadow: none !important;
}
:is(
.btn-primary,
.elementor-button.btn-primary,
.nova-btn-primary .elementor-button,
.woocommerce-cart .button,
.woocommerce-cart a.button,
.woocommerce-cart button.button,
.woocommerce-cart input.button,
.woocommerce-cart .return-to-shop .button,
.nova-cart-order .wc-proceed-to-checkout .checkout-button,
.nova-cart-checkout-button,
.nova-cart-coupon .button,
.checkout_coupon .button,
.woocommerce-checkout #place_order,
#place_order,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
.elementor-22 .elementor-element-3527a1f .elementor-button,
.elementor-35 .elementor-element-70cf09e .elementor-button,
.elementor-36 .elementor-element-1761b8e .elementor-button,
.elementor-37 .elementor-element-8be68e5 .elementor-button,
.elementor-41 .elementor-element-8b687be .elementor-button,
.nova-products__btn,
.nova-products__view-all,
.nova-shop__clear-filters,
.nova-shop__cta-btn,
.nova-sp-button-row .nova-sp-buy-now,
.elementor-widget-button:not(.nova-btn-secondary) .elementor-button
):is(:hover, :focus-visible, :active) {
background-color: var(--color-cta-hover) !important;
border: none !important;
border-color: var(--color-cta-hover) !important;
color: var(--color-cta-text-hover) !important;
opacity: 1 !important;
box-shadow: none !important;
text-decoration: none !important;
}
/* Homepage hero — second CTA (See If You're a Fit): translucent white */
.elementor-13 .elementor-element-331823d .elementor-button {
background-color: #FFFFFF26 !important;
border: none !important;
border-color: transparent !important;
color: #FFFFFF !important;
}
.elementor-13 .elementor-element-331823d .elementor-button:hover,
.elementor-13 .elementor-element-331823d .elementor-button:focus-visible {
background-color: #FFFFFF40 !important;
border: none !important;
border-color: transparent !important;
color: #FFFFFF !important;
}
/* Product quantity +/- — exclude from site CTA button styling only */
.nova-sp-info .nova-qty-btn,
.nova-sp-info .nova-qty-btn:hover,
.nova-sp-info .nova-qty-btn:focus,
.nova-sp-info .nova-qty-btn:active,
.woocommerce-cart-form .nova-qty-btn,
.woocommerce-cart-form .nova-qty-btn:hover,
.woocommerce-cart-form .nova-qty-btn:focus,
.woocommerce-cart-form .nova-qty-btn:active {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
color: #000 !important;
min-width: 32px;
min-height: 32px;
padding: 0 !important;
font-size: 22px !important;
line-height: 1 !important;
}
/* =============================================================================
INPUTS & FORM FIELDS
Figma: Text Input component — Default, Right icon, Two icons, Left icon,
Input with dropdown, Website input — light & dark (Alternate)
─────────────────────────────────────────────────────────────────────────────
USAGE IN ELEMENTOR:
WPForms / Elementor Form widget field wrappers automatically receive
these styles via the element selectors below.
Apply .input-dark (or wrap in .section-dark) for dark-bg variants.
============================================================================= */
/* ── Base field ─────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
width: 100%;
font-family: var(--font-body);
font-size: var(--text-regular); /* 16px */
font-weight: var(--font-weight-normal);
line-height: var(--leading-normal); /* 150% */
color: var(--color-text);
background-color: transparent; /* Figma: no fill on input */
border: 1px solid var(--color-border);
border-radius: var(--radius-md); /* 8px */
padding: 12px 14px; /* Figma: 12px */
outline: none;
transition: border-color var(--transition),
box-shadow var(--transition);
-webkit-appearance: none;
appearance: none;
}
/* ── Placeholder ─────────────────────────────────────────────────────────────── */
input::placeholder,
textarea::placeholder {
color: var(--color-text-muted); /* rgba(0,0,0,0.60) maps to Text Muted */
opacity: 1;
}
/* ── Focus state ─────────────────────────────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
border-color: var(--color-primary);
/* Focus ring: 3px primary at 15% opacity — updates automatically when primary changes */
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
/* ── Hover ───────────────────────────────────────────────────────────────────── */
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
border-color: var(--color-neutral-lighter); /* #CCCCCC */
}
/* ── Error / invalid state ───────────────────────────────────────────────────── */
input.is-error,
select.is-error,
textarea.is-error,
.elementor-field-group.elementor-error input,
.elementor-field-group.elementor-error select,
.elementor-field-group.elementor-error textarea,
.wpcf7-not-valid {
border-color: var(--color-accent); /* accent = red/error */
}
input.is-error:focus,
.elementor-field-group.elementor-error input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
/* Error message text */
.elementor-message.elementor-message-danger,
.wpcf7-not-valid-tip {
color: var(--color-accent);
font-size: var(--text-small);
margin-top: 4px;
}
/* ── Disabled state ──────────────────────────────────────────────────────────── */
input:disabled,
select:disabled,
textarea:disabled {
background-color: var(--color-bg-light);
border-color: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.65;
}
/* ── Dark / Alternate variant ─────────────────────────────────────────────────
Wrap fields in .input-dark or place inside .section-dark */
.input-dark input,
.input-dark select,
.input-dark textarea,
.section-dark input,
.section-dark select,
.section-dark textarea {
color: var(--color-bg-white);
border-color: rgba(255,255,255,0.40);
background-color: transparent;
}
.input-dark input::placeholder,
.section-dark input::placeholder,
.input-dark textarea::placeholder,
.section-dark textarea::placeholder {
color: rgba(255,255,255,0.65); /* Figma: placeholder on dark = 65% white */
}
.input-dark input:focus,
.section-dark input:focus,
.input-dark select:focus,
.section-dark select:focus,
.input-dark textarea:focus,
.section-dark textarea:focus {
border-color: var(--color-bg-white);
box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}
/* ── Textarea ─────────────────────────────────────────────────────────────────── */
textarea {
min-height: 120px;
resize: vertical;
}
/* ── Select arrow ─────────────────────────────────────────────────────────────── */
select {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%231A1A2E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
/* ── Input with prefix label (Website / dropdown prefix) ─────────────────────── */
.input-group {
display: flex;
align-items: stretch;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition);
}
.input-group:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.input-group-prefix {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: var(--color-bg-light);
border-right: 1px solid var(--color-border);
font-size: var(--text-regular);
color: var(--color-text-muted);
white-space: nowrap;
}
.input-group input {
border: none;
border-radius: 0;
box-shadow: none;
flex: 1;
}
.input-group input:focus {
box-shadow: none;
}
/* ── Label ─────────────────────────────────────────────────────────────────────── */
label {
display: block;
font-family: var(--font-ui);
font-size: var(--text-small); /* 14px */
font-weight: var(--font-weight-semibold); /* 600 — Figma Text/Small/Semi Bold */
line-height: var(--leading-normal);
color: var(--color-text);
margin-bottom: 6px;
}
/* ── Form group spacing ──────────────────────────────────────────────────────── */
.form-group,
.elementor-field-group {
margin-bottom: var(--space-sm);
}
/* =============================================================================
TAGS / CHIPS
Figma: Tag component — Text+icon / Text only × Light / Dark (Alternate)
─────────────────────────────────────────────────────────────────────────────
USAGE: Category
Category
Category
============================================================================= */
.tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 8px; /* Figma: 4px 8px */
font-family: var(--font-ui);
font-size: var(--text-small); /* 14px */
font-weight: var(--font-weight-semibold); /* 600 */
line-height: var(--leading-normal);
border-radius: var(--radius-full); /* pill — adjust to radius-sm for square */
white-space: nowrap;
/* Default = Light variant (Figma: bg #EEEEEE, text #000) */
background-color: var(--color-neutral-lightest); /* #EEEEEE */
color: var(--color-text);
border: 1px solid transparent;
}
/* Dark variant (Figma: bg #222, text white) */
.tag.tag-dark {
background-color: var(--color-neutral-darker); /* #222222 */
color: var(--color-bg-white);
}
/* Outline-only (Figma: Text Only variant, no bg) */
.tag.tag-outline {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
}
.tag.tag-outline.tag-dark {
background-color: transparent;
border-color: rgba(255,255,255,0.40);
color: var(--color-bg-white);
}
/* Primary-tinted tag */
.tag.tag-primary {
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
/* Accent tag */
.tag.tag-accent {
background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
color: var(--color-accent);
border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
}
/* =============================================================================
CHECKBOXES & RADIOS
Figma: Checkbox / Checkbox 2 (card) / Checkbox 3 (pill) — same for Radio
============================================================================= */
/* ── Native accent override ──────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
width: auto;
accent-color: var(--color-primary); /* updates on global color change */
cursor: pointer;
}
/* ── Custom checkbox/radio reset ────────────────────────────────────────────── */
.custom-checkbox,
.custom-radio {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
cursor: pointer;
font-family: var(--font-body);
font-size: var(--text-regular);
color: var(--color-text);
}
.custom-checkbox input[type="checkbox"],
.custom-radio input[type="radio"] {
width: 18px;
height: 18px;
border: 1px solid var(--color-text);
border-radius: 2px;
background: var(--color-bg-white);
appearance: none;
-webkit-appearance: none;
transition: background var(--transition), border-color var(--transition);
flex-shrink: 0;
}
.custom-radio input[type="radio"] {
border-radius: 100px; /* full circle */
}
.custom-checkbox input[type="checkbox"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='white' d='M7.5 13.5 3 9l1.4-1.4 3.1 3.1 6.1-6.1L15 6z'/%3E%3C/svg%3E");
background-size: contain;
}
.custom-radio input[type="radio"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='4' fill='white'/%3E%3C/svg%3E");
background-size: contain;
}
/* ── Pill / toggle-style checkbox (Figma Checkbox 3) ──────────────────────── */
.choice-pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 8px 16px;
border: 1px solid var(--color-text);
border-radius: var(--radius-full);
font-family: var(--font-ui);
font-size: var(--text-regular);
color: var(--color-text);
background-color: transparent;
cursor: pointer;
transition: all var(--transition);
}
.choice-pill.is-selected,
.choice-pill:has(input:checked) {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-bg-white);
}
.choice-pill.choice-pill-dark {
border-color: var(--color-bg-white);
color: var(--color-bg-white);
}
.choice-pill.choice-pill-dark.is-selected {
background-color: var(--color-bg-white);
color: var(--color-primary);
}
/* =============================================================================
TOGGLE SWITCH
Figma: Toggle — OFF/ON × Light/Dark
─────────────────────────────────────────────────────────────────────────────
USAGE:
============================================================================= */
.toggle-switch {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
font-family: var(--font-body);
font-size: var(--text-regular);
font-weight: var(--font-weight-normal);
color: var(--color-text);
}
.toggle-switch input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
position: relative;
display: inline-block;
width: 40px; /* Figma: 40px wide */
height: 24px;
border-radius: 500px; /* Figma: 500px = full pill */
background-color: var(--color-neutral-lighter); /* OFF light: #CCCCCC */
transition: background-color var(--transition);
flex-shrink: 0;
}
.toggle-thumb {
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
border-radius: 50px; /* Figma: 50px */
background-color: var(--color-bg-white);
transition: transform var(--transition);
box-shadow: var(--shadow-sm);
}
/* ON state */
.toggle-switch input:checked ~ .toggle-track {
background-color: var(--color-primary); /* ON = primary color */
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
transform: translateX(16px);
}
/* Dark background variant */
.toggle-switch.toggle-dark .toggle-track {
background-color: var(--color-neutral-dark); /* OFF dark: #444444 */
}
.toggle-switch.toggle-dark input:checked ~ .toggle-track {
background-color: var(--color-bg-white);
}
.toggle-switch.toggle-dark input:checked ~ .toggle-track .toggle-thumb {
background-color: var(--color-primary);
}
.toggle-switch.toggle-dark {
color: var(--color-bg-white);
}
/* Focus ring on track */
.toggle-switch input:focus-visible ~ .toggle-track {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* =============================================================================
TOOLTIP
Figma: Tooltip — Style 1 (text) / Style 2 (rich) × 4 directions × Light/Dark
============================================================================= */
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background-color: var(--color-neutral-darker); /* #222 */
color: var(--color-bg-white);
font-family: var(--font-ui);
font-size: var(--text-small); /* 14px */
line-height: var(--leading-normal);
padding: 8px 12px; /* Figma: 8px 12px */
border-radius: var(--radius-sm);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition);
z-index: 9999;
max-width: 240px;
white-space: normal;
text-align: center;
}
[data-tooltip]:hover::after { opacity: 1; }
/* Tooltip arrow */
[data-tooltip]::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--color-neutral-darker);
pointer-events: none;
opacity: 0;
transition: opacity var(--transition);
}
[data-tooltip]:hover::before { opacity: 1; }
/* Light tooltip variant */
[data-tooltip].tooltip-light::after {
background-color: var(--color-bg-white);
color: var(--color-text);
box-shadow: var(--shadow-md);
}
[data-tooltip].tooltip-light::before {
border-top-color: var(--color-bg-white);
}
/* =============================================================================
TABS
Figma: Tabs — active/inactive states
============================================================================= */
.tabs-menu {
display: flex;
gap: var(--space-xs);
border-bottom: 2px solid var(--color-border);
margin-bottom: var(--space-xl);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab-item {
padding: var(--space-sm) var(--space-md);
font-family: var(--font-ui);
font-size: var(--text-regular);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition);
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.tab-item.active,
.tab-item:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* Boxed tab variant (Figma: container with border + active bg) */
.tabs-boxed {
display: inline-flex;
gap: 0;
padding: 4px;
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.tabs-boxed .tab-item {
border: 1px solid transparent;
border-radius: calc(var(--radius-md) - 2px);
margin-bottom: 0;
padding: 8px 24px;
}
.tabs-boxed .tab-item.active {
background-color: var(--color-bg-white);
border-color: var(--color-border);
color: var(--color-text);
border-bottom-color: var(--color-border);
}
/* =============================================================================
SLIDER ARROWS
Figma: Slider Arrow — circle, 12px padding, border
============================================================================= */
.slider-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--color-text);
background-color: var(--color-bg-white);
color: var(--color-text);
cursor: pointer;
transition: all var(--transition);
padding: 12px;
}
.slider-arrow:hover {
background-color: var(--color-text);
color: var(--color-bg-white);
}
.slider-arrow.slider-arrow-dark {
border-color: var(--color-bg-white);
background-color: transparent;
color: var(--color-bg-white);
}
.slider-arrow.slider-arrow-dark:hover {
background-color: var(--color-bg-white);
color: var(--color-text);
}
/* =============================================================================
FILTERS
Figma: Filters — active / inactive chip buttons
============================================================================= */
.filters {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 16px;
border: 1px solid transparent;
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-ui);
font-size: var(--text-regular);
color: var(--color-text-muted);
cursor: pointer;
transition: all var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
background-color: var(--color-bg-white);
border-color: var(--color-primary);
color: var(--color-primary);
}
.filter-btn.active {
font-weight: var(--font-weight-medium);
}
/* =============================================================================
LAYOUT UTILITIES
============================================================================= */
.container {
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.section {
padding-top: var(--section-padding-y);
padding-bottom: var(--section-padding-y);
}
.section-light { background-color: var(--color-bg-light); }
.section-white { background-color: var(--color-bg-white); }
.section-dark {
background-color: var(--color-text);
color: var(--color-bg-white);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
color: var(--color-bg-white);
}
.section-title {
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-2xl);
}
.section-title h2 { margin-bottom: var(--space-sm); }
.section-title p {
font-size: var(--text-medium);
color: var(--color-text-muted);
margin-bottom: 0;
}
/* =============================================================================
CARDS
============================================================================= */
.card {
background-color: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.product-card .card-image {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.product-card .card-body {
padding: var(--space-sm) var(--space-md);
text-align: center;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.product-card .product-name { font-size: var(--text-medium); font-weight: var(--font-weight-semibold); }
.product-card .product-frequency { font-size: var(--text-small); color: var(--color-text-muted); }
.product-card .product-price { font-size: var(--text-large); font-weight: var(--font-weight-semibold); }
/* =============================================================================
ACCORDION
============================================================================= */
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) 0;
font-family: var(--font-heading);
font-size: var(--text-medium);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.accordion-content {
padding-bottom: var(--space-md);
font-size: var(--text-regular);
color: var(--color-text-muted);
line-height: var(--leading-loose);
}
/* =============================================================================
NAVIGATION
============================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background-color: var(--color-bg-white);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.nav-links {
display: flex;
align-items: center;
gap: var(--space-lg);
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
font-family: var(--font-ui);
font-size: var(--text-regular);
font-weight: var(--font-weight-medium);
color: var(--color-text);
transition: color var(--transition);
}
.nav-links a:hover { color: var(--color-primary); }
/* Homepage only — transparent header overlays the hero (scrolls with page) */
/* .nova-home-header-overlay {
position: relative;
}
.nova-home-header-overlay .elementor-location-header {
position: absolute !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.nova-home-header-overlay .elementor-location-header .elementor-element-6ec1d8d,
.nova-home-header-overlay .elementor-location-header .elementor-element-6ec1d8d:not(.elementor-motion-effects-element-type-background),
.nova-home-header-overlay .elementor-location-header .elementor-element-6ec1d8d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-color: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
} */
/* =============================================================================
FOOTER
============================================================================= */
.site-footer {
background-color: var(--color-text);
color: var(--color-bg-white);
padding-top: var(--space-3xl);
padding-bottom: var(--space-xl);
}
.footer-links a {
color: rgba(255,255,255,0.70);
font-size: var(--text-small);
transition: color var(--transition);
}
.footer-links a:hover { color: var(--color-bg-white); }
.footer-credits {
border-top: 1px solid rgba(255,255,255,0.12);
margin-top: var(--space-xl);
padding-top: var(--space-md);
font-size: var(--text-small);
color: rgba(255,255,255,0.50);
text-align: center;
}
.social-icons {
display: flex;
gap: var(--space-sm);
align-items: center;
}
/* ── Footer nav-menu: strip padding + active/hover backgrounds ─────────────
Overrides widget-nav-menu.min.css (elementor-pro) which sets:
- padding: 13px 20px on all nav
- background: #1f2124 on .current / active states
Our selectors have higher specificity (4 classes vs 2–3) — no !important needed.
─────────────────────────────────────────────────────────────────────────── */
/* Strip horizontal padding, keep vertical breathing room */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu a {
padding: 6px 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: #00000099 !important;
font-weight: var(--font-weight-normal) !important;
}
/* Top-level parent labels — bold column headers, non-interactive */
.elementor-location-footer ul.elementor-nav-menu > li.menu-item-has-children > a,
.elementor-location-footer li.menu-item-has-children > a,
.elementor-location-footer li.current-menu-ancestor > a,
.elementor-location-footer li.current_page_ancestor > a,
.elementor-location-footer li.menu-item-has-children > a.current,
.elementor-location-footer li.menu-item-has-children > a.elementor-item-active {
color: var(--color-neutral-darkest, #000) !important;
font-weight: var(--font-weight-semibold) !important;
pointer-events: none !important;
cursor: default !important;
text-decoration: none !important;
}
/* Active page — child links only (not parent/ancestor) */
.elementor-location-footer .sub-menu li.current-menu-item > a,
.elementor-location-footer .sub-menu li.current_page_item > a,
.elementor-location-footer .children li.current-menu-item > a,
.elementor-location-footer .children li.current_page_item > a {
background: transparent !important;
background-color: transparent !important;
color: var(--color-primary) !important;
font-weight: var(--font-weight-semibold) !important;
}
/* Top-level items without children that are the current page */
.elementor-location-footer ul.elementor-nav-menu > li.current-menu-item:not(.menu-item-has-children) > a,
.elementor-location-footer ul.elementor-nav-menu > li.current_page_item:not(.menu-item-has-children) > a {
color: var(--color-primary) !important;
font-weight: var(--font-weight-semibold) !important;
}
/* Hover — child links only; parent column headers stay static */
.elementor-location-footer .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu a:hover {
background: transparent !important;
background-color: transparent !important;
color: #0088FF !important;
opacity: 0.75;
}
.elementor-location-footer ul.elementor-nav-menu > li.menu-item-has-children > a:hover,
.elementor-location-footer ul.elementor-nav-menu > li.menu-item-has-children > a:focus,
.elementor-location-footer ul.elementor-nav-menu > li.menu-item-has-children > a:active,
.elementor-location-footer li.menu-item-has-children > a:hover,
.elementor-location-footer li.menu-item-has-children > a:focus,
.elementor-location-footer li.menu-item-has-children > a:active,
.elementor-location-footer li.current-menu-ancestor > a:hover,
.elementor-location-footer li.current-menu-ancestor > a:focus,
.elementor-location-footer li.current_page_ancestor > a:hover,
.elementor-location-footer li.current_page_ancestor > a:focus {
color: var(--color-neutral-darkest, #000) !important;
opacity: 1 !important;
background: transparent !important;
background-color: transparent !important;
}
/* Hide any pseudo-element underline indicators Elementor adds */
.elementor-location-footer .elementor-nav-menu a::before,
.elementor-location-footer .elementor-nav-menu a::after {
display: none !important;
}
/* ── Bottom legal links row (Medical Disclaimer / Terms / Privacy) ───────────
Horizontal row — add gap between links and separate from copyright text */
.elementor-location-footer .elementor-element-f0012ff .elementor-nav-menu {
gap: 0 12px !important; /* space between legal links */
}
.elementor-location-footer .elementor-element-f0012ff .elementor-nav-menu a {
padding: 0 !important;
}
/* =============================================================================
BREADCRUMBS
============================================================================= */
.breadcrumbs {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-small);
color: var(--color-text-muted);
margin-bottom: var(--space-md);
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
/* =============================================================================
RESPONSIVE
============================================================================= */
@media (max-width: 768px) {
:root {
--text-h1: var(--text-h1-mobile);
--text-h2: var(--text-h2-mobile);
--text-h3: var(--text-h3-mobile);
--text-h4: var(--text-h4-mobile);
--text-h5: var(--text-h5-mobile);
--text-h6: var(--text-h6-mobile);
--section-padding-y: 48px;
--container-padding: 16px;
}
.section-title { margin-bottom: var(--space-xl); }
.nav-links { display: none; }
}
/* =============================================================================
ELEMENTOR WIDGET OVERRIDES
============================================================================= */
/* Typography only — text/heading colors are set per widget in Elementor */
.elementor-widget-heading h1 { font-family: var(--font-heading); font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-h1); }
.elementor-widget-heading h2 { font-family: var(--font-heading); font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--font-weight-bold); }
.elementor-widget-heading h3 { font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--font-weight-bold); }
.elementor-widget-heading h4 { font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: var(--font-weight-bold); }
.elementor-widget-heading h5 { font-family: var(--font-heading); font-size: var(--text-h5); line-height: var(--leading-h5); font-weight: var(--font-weight-bold); }
.elementor-widget-heading h6 { font-family: var(--font-heading); font-size: var(--text-h6); line-height: var(--leading-h6); font-weight: var(--font-weight-bold); }
.elementor-widget-text-editor {
font-family: var(--font-body);
font-size: var(--text-regular);
line-height: var(--leading-normal);
}
.elementor-widget-button .elementor-button {
font-family: var(--font-ui);
}
.elementor-widget-icon-list .elementor-icon-list-text {
font-family: var(--font-body);
font-size: var(--text-regular);
}
.elementor-widget-image img {
border-radius: var(--radius-md);
}
.elementor-widget-divider .elementor-divider-separator {
border-color: var(--color-border);
}
/* Elementor form fields */
.elementor-field-group .elementor-field {
border-radius: var(--radius-md) !important;
border-color: var(--color-border) !important;
font-family: var(--font-body) !important;
font-size: var(--text-regular) !important;
color: var(--color-text) !important;
padding: 12px 14px !important;
transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.elementor-field-group .elementor-field:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
outline: none !important;
}
/* Elementor button widget — secondary/outline buttons keep their own styles via nova-btn-secondary or template rules above. */
.e-n-accordion-item-title-icon{
padding: 15px;
background-color: #F7F7F7;
border-radius: 8px;
}
.e-n-accordion-item div{
padding: 0 !important;
}
.e-n-accordion-item div p{
padding: 5px 0 0 !important;
max-width: 90%;
}
.ff-default input.ff-el-form-control,
.ff-default select.ff-el-form-control {
border-radius: 55px !important;
}
.ff-default select.ff-el-form-control {
appearance: none !important;
-webkit-appearance: none !important;
padding-right: 44px !important;
background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5675 1.06754L7.31754 7.31754C7.25949 7.37565 7.19056 7.42175 7.11469 7.4532C7.03881 7.48465 6.95748 7.50084 6.87535 7.50084C6.79321 7.50084 6.71188 7.48465 6.63601 7.4532C6.56014 7.42175 6.49121 7.37565 6.43316 7.31754L0.18316 1.06754C0.0658846 0.95026 0 0.7912 0 0.625347C0 0.459495 0.0658846 0.300435 0.18316 0.18316C0.300435 0.0658843 0.459495 0 0.625347 0C0.7912 0 0.95026 0.0658843 1.06753 0.18316L6.87535 5.99175L12.6832 0.18316C12.7412 0.125091 12.8102 0.0790281 12.886 0.0476015C12.9619 0.0161748 13.0432 0 13.1253 0C13.2075 0 13.2888 0.0161748 13.3647 0.0476015C13.4405 0.0790281 13.5095 0.125091 13.5675 0.18316C13.6256 0.241229 13.6717 0.310167 13.7031 0.386037C13.7345 0.461908 13.7507 0.543226 13.7507 0.625347C13.7507 0.707469 13.7345 0.788787 13.7031 0.864658C13.6717 0.940528 13.6256 1.00947 13.5675 1.06754Z' fill='black'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 20px center !important;
background-size: 14px 8px !important;
cursor: pointer;
}
.nova-btn-home-shop svg path{
stroke: #fff;
}
.elementor-nav-menu--dropdown{
padding: 30px 0;
}
/* Mobile nav — Shop + Cart CTAs below dropdown menu links */
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 16px 8px;
margin-top: 8px;
border-top: 1px solid var(--color-border, #E4E4E7);
}
.elementor-location-header .nova-mobile-nav-cta__item {
width: 100%;
margin: 0 !important;
}
.elementor-location-header .nova-mobile-nav-cta__item .elementor-button {
width: 100%;
justify-content: center !important;
}
.elementor-location-header .nova-mobile-nav-cta__item--cart .elementor-button {
gap: 8px;
}
.elementor-location-header .nova-mobile-nav-cta__cart-link {
position: relative;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* Mobile cart CTA — blue icon stroke, visible hover on light dropdown panel */
@media (max-width: 1024px) {
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link {
color: var(--color-neutral-darkest) !important;
background-color: var(--color-bg-white) !important;
border: 1px solid var(--color-border, #E4E4E7) !important;
}
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button:hover,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button:focus-visible,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button:active,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link:hover,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link:focus-visible,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link:active {
color: var(--color-cta, #1C34A7) !important;
background-color: color-mix(in srgb, var(--color-cta, #1C34A7) 12%, #ffffff) !important;
border-color: color-mix(in srgb, var(--color-cta, #1C34A7) 30%, #E4E4E7) !important;
}
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link:hover svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link:focus-visible svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__cart-link:active svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button:hover svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button:focus-visible svg path,
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta__item--cart .elementor-button:active svg path {
stroke: #000000 !important;
}
/* Inner mobile nav — menu icons, sub-arrows, header cart + toggle */
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu svg path,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu--main svg path,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu svg path,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu a svg path,
.elementor-location-header .elementor-element-8a6e785 .elementor-button svg path,
.elementor-location-header .elementor-element-8a6e785 .elementor-button:hover svg path,
.elementor-location-header .elementor-element-8a6e785 .elementor-button:focus-visible svg path,
.elementor-location-header #cartButton svg path,
.elementor-location-header #cartButton:hover svg path,
.elementor-location-header [data-nova-cart-button].nova-cart-button svg path,
.elementor-location-header [data-nova-cart-button].nova-cart-button:hover svg path,
.elementor-location-header .elementor-menu-toggle svg path,
.elementor-location-header .elementor-menu-toggle:hover svg path {
stroke: #000000 !important;
}
}
.elementor-location-header .nova-mobile-nav-cta__cart-link .nova-cart-count {
position: static;
margin-left: 4px;
border-width: 0;
min-width: 22px;
height: 22px;
opacity: 1;
transform: none;
}
.elementor-location-header .nova-mobile-nav-cta__cart-link:not(.has-cart-items) .nova-cart-count:empty {
display: none;
}
@media (min-width: 1025px) {
.elementor-location-header .elementor-nav-menu--dropdown .nova-mobile-nav-cta {
display: none;
}
}
/* =============================================================================
WOOCOMMERCE CHECKOUT
Layout + order summary card. Field and button base styles inherit from the
INPUTS section and woocommerce.css — only checkout-specific rules live here.
============================================================================= */
.woocommerce-checkout{
padding: 0 0 0 !important;
max-width: 100% !important;
margin: 0 !important;
}
@media (max-width: 1200px){
.woocommerce-checkout .site-main{
max-width: 100% !important;
padding: 0 20px;
}
}
.woocommerce{
padding: 0 0 60px !important;
}
.woocommerce-form-coupon-toggle{
margin: 40px 0 0;
}
form.checkout.woocommerce-checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, min(400px, 38vw));
column-gap: var(--space-xl);
row-gap: var(--space-lg);
align-items: start;
}
/* Flatten WooCommerce float columns into the grid */
.woocommerce-checkout .col2-set {
display: contents;
}
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
#customer_details .col-1,
#customer_details .col-2 {
float: none;
width: 100%;
}
.woocommerce-form-coupon-toggle,
.checkout_coupon.woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup {
grid-column: 1 / -1;
}
.woocommerce-checkout .col2-set .col-1,
#customer_details .col-1 {
grid-column: 1;
grid-row: 1;
}
.woocommerce-checkout .col2-set .col-2,
#customer_details .col-2 {
grid-column: 1;
grid-row: 2;
}
#order_review_heading {
margin: 0 0 var(--space-md);
padding: 0;
border-bottom: none;
}
.nova-checkout-order {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
position: sticky;
top: calc(80px + var(--space-md));
min-width: 0;
max-width: 100%;
background: var(--color-bg-white);
border: 1px solid rgb(230 231 235);
border-radius: 11px;
padding: var(--space-lg);
}
.nova-checkout-order #order_review {
padding: 0;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
position: static;
}
/* Sidebar — black text throughout */
.nova-checkout-order,
.nova-checkout-order .woocommerce-Price-amount,
.nova-checkout-order .woocommerce-Price-currencySymbol,
.nova-checkout-order bdi {
color: var(--color-neutral-darkest);
}
/* Section titles */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
font-family: var(--font-heading);
font-size: var(--text-h5);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-h5);
color: var(--color-neutral-darkest);
margin: 0 0 var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border);
}
.woocommerce-checkout .col2-set h3 {
margin-bottom: var(--space-md);
}
.woocommerce-checkout .form-row label,
.woocommerce-checkout label {
color: var(--color-neutral-darkest);
font-weight: var(--font-weight-semibold);
}
/* Billing field grid — first / last name side by side */
.woocommerce-billing-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-sm);
}
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-billing-fields__field-wrapper .hidden-field {
grid-column: 1 / -1;
}
.woocommerce-checkout .form-row {
margin-bottom: var(--space-sm);
padding: 0;
}
.woocommerce-checkout .required {
color: var(--color-accent);
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
background-color: var(--color-bg-white);
}
/* Country/state dropdown (Select2) — match native inputs */
.woocommerce-checkout .select2-container--default .select2-selection--single {
height: auto;
min-height: 46px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 14px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: var(--leading-normal);
padding: 0;
color: var(--color-text);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 50%;
transform: translateY(-50%);
right: 12px;
}
/* Order summary — block layout (avoids broken table/grid artifacts) */
.shop_table.woocommerce-checkout-review-order-table {
display: block;
width: 100%;
margin: 0;
border: none;
}
.shop_table.woocommerce-checkout-review-order-table thead {
display: none;
}
.shop_table.woocommerce-checkout-review-order-table tbody,
.shop_table.woocommerce-checkout-review-order-table tfoot {
display: block;
}
.shop_table.woocommerce-checkout-review-order-table tbody {
margin-bottom: var(--space-sm);
}
.shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-md);
align-items: start;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
background: transparent;
}
.shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item td {
display: block;
padding: 0;
border: none;
background: transparent !important;
color: var(--color-neutral-darkest);
min-width: 0;
}
.shop_table.woocommerce-checkout-review-order-table .product-name {
min-width: 0;
}
.nova-checkout-item {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.nova-checkout-item__name {
display: block;
font-family: var(--font-ui);
font-size: var(--text-regular);
font-weight: var(--font-weight-semibold);
line-height: 1.35;
color: var(--color-neutral-darkest);
overflow-wrap: anywhere;
word-break: break-word;
}
.nova-checkout-item__qty {
display: block;
font-size: var(--text-small);
font-weight: var(--font-weight-medium);
color: var(--color-neutral-dark);
}
.nova-checkout-item__meta {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.nova-checkout-item__price {
display: block;
font-family: var(--font-ui);
font-size: var(--text-regular);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-normal);
color: var(--color-neutral-darkest);
white-space: nowrap;
text-align: right;
}
.shop_table.woocommerce-checkout-review-order-table .product-name dl.variation {
margin: 0;
font-size: var(--text-small);
font-weight: var(--font-weight-normal);
line-height: 1.45;
color: var(--color-neutral-dark);
}
.shop_table.woocommerce-checkout-review-order-table .product-name dl.variation dt {
display: none;
}
.shop_table.woocommerce-checkout-review-order-table .product-name dl.variation dd {
display: block;
margin: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.shop_table.woocommerce-checkout-review-order-table .product-name dl.variation dd p {
margin: 0;
display: block;
overflow-wrap: anywhere;
word-break: break-word;
}
.shop_table.woocommerce-checkout-review-order-table .product-total {
align-self: start;
}
.shop_table.woocommerce-checkout-review-order-table tfoot {
margin-top: var(--space-md);
border-radius: var(--radius-md);
background: transparent;
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-md);
align-items: baseline;
padding: 6px 0;
border: none;
background: transparent;
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr + tr {
border-top: none;
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
border-top: none;
margin-top: 0;
padding-top: 6px;
}
/* Full-width divider — only before the final total row */
.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child {
margin-top: var(--space-sm);
padding-top: var(--space-md);
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child::before {
content: '';
grid-column: 1 / -1;
height: 1px;
background: var(--color-border);
margin-bottom: var(--space-md);
}
body.prewoo-dual-cart-totals.woocommerce-cart .cart_totals .shop_table.woocommerce-checkout-review-order-table tfoot tr:nth-last-child(2) th,
body.prewoo-dual-cart-totals.woocommerce-cart .cart_totals .shop_table.woocommerce-checkout-review-order-table tfoot tr:nth-last-child(2) td {
font-weight: var(--font-weight-semibold);
border-bottom: 0 !important;
}
.shop_table.woocommerce-checkout-review-order-table tfoot th,
.shop_table.woocommerce-checkout-review-order-table tfoot td {
display: block;
padding: 0;
border: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: var(--text-small);
font-weight: var(--font-weight-medium);
color: var(--color-neutral-dark);
min-width: 0;
}
.shop_table.woocommerce-checkout-review-order-table tfoot th {
text-align: left;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.45;
padding-right: var(--space-sm);
}
.shop_table.woocommerce-checkout-review-order-table tfoot td {
text-align: right;
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-darkest);
white-space: nowrap;
align-self: baseline;
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
color: var(--color-neutral-darkest);
width: 100%;
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr.fee th {
font-weight: var(--font-weight-normal);
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child td {
font-size: var(--text-medium);
font-weight: var(--font-weight-bold);
color: var(--color-neutral-darkest);
}
.shop_table.woocommerce-checkout-review-order-table tfoot .order-total th,
.shop_table.woocommerce-checkout-review-order-table tfoot .order-total td {
font-size: inherit;
font-weight: inherit;
border: none !important;
}
/* Payment block inside order card */
.nova-checkout-order #payment {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.nova-checkout-order #payment .woocommerce-info {
margin-bottom: var(--space-sm);
padding: var(--space-sm) var(--space-md);
font-size: var(--text-small);
line-height: var(--leading-normal);
color: var(--color-neutral-darkest);
}
.nova-checkout-order .shop_table td,
.nova-checkout-order .shop_table th {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#payment .wc_payment_methods {
list-style: none;
margin: 0;
padding: 0;
}
#payment .wc_payment_methods li {
margin-bottom: var(--space-xs);
border-radius: var(--radius-md);
background: var(--color-bg-white);
}
#payment .wc_payment_methods li label {
margin: 0 0 5px;
font-weight: var(--font-weight-medium);
color: var(--color-neutral-darkest);
cursor: pointer;
}
#payment .payment_box {
margin-top: var(--space-xs);
font-size: var(--text-small);
color: var(--color-neutral-dark);
}
/* Place order — site CTA button */
.woocommerce-checkout #place_order {
height: 48px;
margin-top: var(--space-sm);
border-radius: 55px !important;
font-weight: var(--font-weight-semibold);
color: var(--color-cta-text);
padding: 0;
}
/* Coupon + notices */
.woocommerce-checkout .woocommerce-info {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-white));
border-left: 3px solid var(--color-primary);
color: var(--color-text);
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-info .showcoupon {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
.checkout_coupon.woocommerce-form-coupon {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-sm);
margin-bottom: var(--space-md);
padding: 0;
border: none;
border-radius: 0;
background: var(--color-bg-white);
}
.checkout_coupon .form-row {
flex: 1 1 200px;
margin: 0;
}
.checkout_coupon .button {
height: 48px;
padding-inline: var(--space-md);
border-radius: 55px !important;
white-space: nowrap;
color: var(--color-cta-text) !important;
background-color: var(--color-cta) !important;
border: none !important;
font-weight: var(--font-weight-semibold);
}
.woocommerce-privacy-policy-text {
margin-bottom: var(--space-sm);
font-size: var(--text-small);
line-height: var(--leading-normal);
color: var(--color-neutral-dark);
}
.woocommerce-privacy-policy-text a {
color: var(--color-neutral-darkest);
font-weight: var(--font-weight-semibold);
}
.woocommerce-account-fields {
margin-top: var(--space-xs);
}
/* Checkbox / radio rows — label and control on one line */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-form__label-for-radio,
.woocommerce-checkout .form-row label:has(input[type="checkbox"]),
.woocommerce-checkout .form-row label:has(input[type="radio"]) {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
cursor: pointer;
}
.woocommerce-checkout .form-row input[type="checkbox"],
.woocommerce-checkout .form-row input[type="radio"] {
width: auto;
min-width: 18px;
height: 18px;
flex-shrink: 0;
margin: 0;
}
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select {
border-color: var(--color-accent);
}
@media (max-width: 900px) {
form.checkout.woocommerce-checkout {
grid-template-columns: 1fr;
}
.nova-checkout-order {
grid-column: 1;
grid-row: auto;
position: static;
margin-top: var(--space-lg);
}
.woocommerce-billing-fields__field-wrapper {
grid-template-columns: 1fr;
}
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last {
grid-column: 1 / -1;
}
}
/* =============================================================================
WOOCOMMERCE CART — matches checkout layout and order summary styling
============================================================================= */
.woocommerce-cart {
padding: 0 0 60px !important;
max-width: 100% !important;
margin: 0 auto !important;
}
.wp-block-woocommerce-cart.is-loading .nova-cart-layout,
.wp-block-woocommerce-cart .nova-cart-layout {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.wp-block-woocommerce-cart.is-loading .nova-qty-btn,
.wp-block-woocommerce-cart .nova-qty-btn {
pointer-events: auto !important;
}
.nova-cart-layout {
padding: 40px 0 0;
}
/* Elementor cart page bypasses Hello's 1140px .site-main — restore checkout width */
.woocommerce-cart .site-main,
.woocommerce-cart .page-content {
max-width: 1140px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--container-padding) !important;
padding-right: var(--container-padding) !important;
min-height: 600px;
}
.woocommerce-cart .woocommerce {
max-width: 100% !important;
}
@media (max-width: 1200px) {
.woocommerce-cart .site-main {
max-width: 100% !important;
padding: 0 20px;
}
}
.nova-cart-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, min(400px, 38vw));
column-gap: var(--space-xl);
row-gap: var(--space-lg);
align-items: start;
}
.nova-cart-main {
min-width: 0;
}
.nova-cart-heading,
.nova-cart-order-heading {
font-family: var(--font-heading) !important;
font-size: var(--text-h5) !important;
font-weight: var(--font-weight-semibold) !important;
line-height: var(--leading-h5) !important;
color: var(--color-neutral-darkest) !important;
margin: 0 0 var(--space-md) !important;
padding-bottom: var(--space-sm) !important;
border-bottom: 1px solid var(--color-border) !important;
}
.nova-cart-order {
position: sticky;
top: calc(80px + var(--space-md));
min-width: 0;
max-width: 100%;
}
.nova-cart-order .cart-collaterals,
.nova-cart-order .cart_totals {
width: 100%;
float: none;
}
.nova-cart-order .cart_totals > h2 {
display: none;
}
.nova-cart-table thead {
display: none;
}
.nova-cart-item {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--space-md);
align-items: start;
min-width: 0;
}
.nova-cart-item__thumb {
display: block;
width: 72px;
height: 72px;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-light);
flex-shrink: 0;
}
.nova-cart-item__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nova-cart-item__content {
display: flex;
flex-direction: column;
gap: var(--space-sm);
min-width: 0;
}
.nova-cart-item__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
}
.nova-cart-item__quantity .quantity.nova-cart-qty-stepper {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 12px;
border: 1px solid #E8E8E8;
border-radius: 50px;
background: #F8F8F8;
overflow: visible;
--nova-qty-accent: #F56630;
}
.nova-cart-item__quantity .quantity.nova-cart-qty-stepper .qty {
width: 36px;
min-height: 36px;
padding: 0;
border: none !important;
border-radius: 0 !important;
text-align: center;
font-family: var(--font-ui);
font-size: 16px;
font-weight: 600;
background: transparent;
color: var(--color-text, #18181B);
}
.nova-cart-qty-stepper .nova-qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: transparent;
color: #000;
font-family: var(--font-ui);
font-size: 22px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease;
}
.nova-cart-qty-stepper .nova-qty-btn:hover,
.nova-cart-qty-stepper .nova-qty-btn:focus-visible {
background: transparent !important;
color: var(--nova-qty-accent, #F56630) !important;
}
.nova-cart-qty-stepper .nova-qty-btn:focus-visible {
outline: 2px solid var(--color-primary, #0171F2);
outline-offset: 2px;
}
.nova-cart-item__remove {
font-family: var(--font-ui);
font-size: var(--text-small);
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.nova-cart-item__remove:hover,
.nova-cart-item__remove:focus {
color: var(--color-accent);
}
.nova-cart-table .nova-checkout-item__name a {
color: var(--color-neutral-darkest);
text-decoration: none;
font-weight: inherit;
}
.nova-cart-table .nova-checkout-item__name a:hover,
.nova-cart-table .nova-checkout-item__name a:focus {
color: var(--color-primary);
}
.nova-cart-form-footer {
margin: 0;
padding: 0;
border: 0;
}
.nova-cart-coupon {
margin-top: var(--space-md);
padding: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-bg-light) 70%, var(--color-bg-white));
}
.nova-cart-order .nova-cart-coupon.checkout_coupon.woocommerce-form-coupon {
display: block;
flex-wrap: unset;
align-items: unset;
gap: 0;
margin-bottom: 0;
}
.nova-cart-coupon form {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
.nova-cart-coupon__label {
display: block;
margin: 0;
font-family: var(--font-ui);
font-size: var(--text-small);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
color: var(--color-neutral-darkest);
}
.nova-cart-coupon__fields {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.nova-cart-coupon .input-text {
width: 100%;
min-width: 0;
height: 44px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--color-border);
border-radius: 55px;
font-family: var(--font-body);
font-size: var(--text-regular);
color: var(--color-neutral-darkest);
background: var(--color-bg-white);
box-shadow: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.nova-cart-coupon .input-text::placeholder {
color: var(--color-neutral-light);
}
.nova-cart-coupon .input-text:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.nova-cart-coupon .button {
flex-shrink: 0;
width: auto;
min-width: 88px;
height: 44px;
margin: 0;
padding: 0 20px;
font-family: var(--font-ui);
font-size: var(--text-regular);
line-height: 1;
}
@media (max-width: 480px) {
.nova-cart-coupon__fields {
grid-template-columns: 1fr;
}
.nova-cart-coupon .button {
width: 100%;
min-width: 0;
}
}
/* Cart CTAs — CTA blue default, black hover */
.woocommerce-cart .button,
.woocommerce-cart a.button,
.woocommerce-cart button.button,
.woocommerce-cart input.button {
border-radius: 55px !important;
color: var(--color-cta-text) !important;
background-color: var(--color-cta) !important;
border: none !important;
font-weight: var(--font-weight-semibold);
}
.nova-cart-order .wc-proceed-to-checkout {
margin-top: var(--space-md);
padding-top: 0;
border-top: none;
}
.nova-cart-order .wc-proceed-to-checkout .checkout-button,
.nova-cart-checkout-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 48px;
margin: 0;
border-radius: 55px !important;
font-weight: var(--font-weight-semibold);
color: var(--color-cta-text) !important;
background-color: var(--color-cta) !important;
border: none !important;
text-align: center;
text-decoration: none;
}
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error {
grid-column: 1 / -1;
margin-bottom: var(--space-md);
}
.woocommerce-cart .cart-empty {
font-family: var(--font-heading);
font-size: var(--text-h5);
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-darkest);
margin: 0 0 var(--space-md);
}
.woocommerce-cart .return-to-shop .button {
height: 48px;
padding-inline: var(--space-lg);
border-radius: 55px !important;
font-weight: var(--font-weight-semibold);
color: var(--color-cta-text);
text-decoration: none;
}
@media (max-width: 900px) {
.nova-cart-layout {
grid-template-columns: 1fr;
}
.nova-cart-order {
position: static;
margin-top: var(--space-lg);
}
}
/* Desktop main nav over hero — white hover (not mobile dropdown) */
.elementor-nav-menu--main .elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
background-color: hsl(0deg 0% 100% / 20%) !important;
border-radius: 10px;
color: #ffffff !important;
}
.dark-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.dark-nav .elementor-nav-menu--main .elementor-nav-menu a:hover {
color: #1C34A7 !important;
}
/* Mobile / dropdown header nav — blue text + tint on light panel */
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu a:focus,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu a:active {
background-color: color-mix(in srgb, var(--color-cta, #1C34A7) 12%, transparent) !important;
border-radius: 10px;
color: var(--color-cta, #1C34A7) !important;
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item-highlighted {
background-color: color-mix(in srgb, var(--color-cta, #1C34A7) 12%, transparent) !important;
border-radius: 0;
color: var(--color-cta, #1C34A7) !important;
}
@media (max-width: 1024px) {
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a:active {
background-color: color-mix(in srgb, var(--color-cta, #1C34A7) 12%, transparent) !important;
border-radius: 10px;
color: var(--color-cta, #1C34A7) !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-item-highlighted {
background-color: color-mix(in srgb, var(--color-cta, #1C34A7) 12%, transparent) !important;
border-radius: 0;
color: var(--color-cta, #1C34A7) !important;
}
}
/* Homepage goals carousel — progress bar + clip (widget 47c1e1f only) */
.elementor-element-47c1e1f {
position: relative;
width: 100% !important;
max-width: 100% !important;
--container-widget-width: 100% !important;
}
.elementor-13 .elementor-element.elementor-element-14eae092{
max-width: 1340px;
}
.elementor-element-47c1e1f .e-n-carousel {
position: relative;
overflow: hidden !important;
width: 100%;
max-width: 100%;
}
.elementor-element-47c1e1f .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
position: absolute !important;
bottom: -60px !important;
top: auto !important;
left: 160px !important;
right: auto !important;
border-radius: 20px !important;
overflow: hidden !important;
width: 310px !important;
transform: none !important;
}
@media (max-width: 767px) {
.elementor-element-47c1e1f .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
bottom: -21px !important;
left: 0 !important;
width: 100% !important;
}
}