/*
 * Refillery app pages (Refill Me brand, Figma "Refill Me Store Mockup V1").
 *
 * The design system lives in Elementor v4 (Site Settings > Variables and
 * Class Manager), not in this file:
 *   - Colors and font families are the v4 global variables (--rm-aubergine, --rm-font-display, …).
 *   - Typography uses the v4 global class names (font-pla-28px-400, …). Their values come
 *     from Elementor's "sync to v3" stylesheet (--e-global-typography-v4-<class>-<prop>).
 * The values after each comma are the Figma values, used only if Elementor's are missing.
 * This file sets layout, borders and which color goes where.
 */

.rf-page {
	--rf-aubergine: var(--rm-aubergine, #362336);
	--rf-brown: var(--rm-brown, #613e3a);
	--rf-mauve: var(--rm-mauve, #725f75);
	--rf-cream: var(--rm-cream, #f7f0e6);
	--rf-white: var(--rm-white, #fff);
	--rf-sand: var(--rm-sand, #e9ddcb);
	--rf-line: var(--rm-line, #c8bdbe);
	--rf-lilac: var(--rm-lilac, #e5c4ea);
	--rf-lilac-tint: var(--rm-lilac-tint, #f0dee8);
	--rf-sage-tint: var(--rm-sage-tint, #e2e3cc);
	--rf-disabled: var(--rm-disabled, #e6ded3);
	--rf-disabled-text: var(--rm-disabled-text, #9a8f99);
	--rf-ink: var(--rm-ink, #121212);
	--rf-error: var(--rm-error, #b42318);

	--rf-display: var(--rm-font-display, "Playfair Display"), Georgia, serif;
	--rf-body: var(--rm-font-body, "Alegreya Sans"), system-ui, sans-serif;
	--rf-label: var(--rm-font-label, Nunito), system-ui, sans-serif;

	margin: 0;
	color: var(--rf-aubergine);
	font-family: var(--rf-body);
	-webkit-font-smoothing: antialiased;
	/* Quick taps on + / − and chips shouldn't trigger iOS double-tap zoom.
	 * Scrolling and pinch-to-zoom still work. */
	touch-action: manipulation;
}

/* Below the page (behind iOS Safari's toolbar, and the bounce past the bottom)
 * is cream to match the panel. Safari colors that area with the body's
 * background drawn over the page's, so on phones the body has none: the app
 * column carries the aubergine (header, the panel's rounded corners) instead.
 * Wider screens keep an aubergine body around the column. An aubergine strip
 * sits above the page so pulling down past the header still shows purple. */
html:has(> body.rf-page) {
	background: var(--rm-cream, #f7f0e6);
}

/* The theme gives body a white background; on phones it must be transparent. */
html body.rf-page {
	background: transparent;
}

/* The Elementor kit's custom CSS sets overflow-x: hidden on html and body. On body
 * that makes it a scroll box of its own, which stops the sticky header from
 * sticking; clip still prevents sideways scrolling. (html keeps hidden: on the
 * root it applies to the window, which sticky works with.) */
html body.rf-page {
	overflow-x: clip;
}

@media (min-width: 481px) {
	html body.rf-page {
		background: var(--rf-aubergine);
	}
}


.rf-page::before {
	content: "";
	position: absolute;
	top: -100vh;
	left: 0;
	right: 0;
	height: 100vh;
	background: var(--rf-aubergine);
	pointer-events: none;
}

.rf-page *,
.rf-page *::before,
.rf-page *::after {
	box-sizing: border-box;
}

.rf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Shell: purple top bar + cream panel with rounded top corners ---------- */

/* .rf-app / .rf-body are Elementor containers on /refill and plain elements in the plugin templates. */
.rf-page .rf-app,
.rf-page .e-con.rf-app {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--gap: 0;
	--row-gap: 0;
	max-width: 480px;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: var(--rf-aubergine);
}

.rf-page .rf-body,
.rf-page .e-con.rf-body {
	--padding-top: 24px;
	--padding-right: 24px;
	--padding-bottom: 30px;
	--padding-left: 24px;
	--gap: 12px;
	--row-gap: 12px;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 30px;
	background: var(--rf-cream);
	border-radius: 28px 28px 0 0;
}

.rf-page .rf-body--product {
	gap: 14px;
	padding-top: 22px;
}

.rf-page .rf-body--cart,
.rf-page .rf-body--checkout {
	padding-top: 22px;
}

.rf-page .rf-body--thanks {
	align-items: center;
	padding-top: 20px;
}

.rf-page .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.rf-page .elementor-widget-shortcode,
.rf-page .elementor-shortcode {
	width: 100%;
}

/* The header stays pinned while the page scrolls. Besides keeping the cart in
 * reach, it's what Safari on iOS 26 uses to color its status bar (it ignores
 * theme-color), so the top stays aubergine while the bottom is cream.
 * On /refill the header sits inside an Elementor shortcode widget, which is only
 * as tall as the header, so that widget is the sticky element there. */
.rf-topbar,
.rf-page .elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .rf-topbar),
.rf-page .elementor-widget-shortcode:has(> .elementor-shortcode > .rf-topbar) {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--rf-aubergine);
}

.rf-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 79px;
	padding: 22px 24px;
	color: var(--rf-cream);
}

/* Aubergine corner pieces under the pinned header, matching the cream panel's
 * 28px rounded top, so the panel keeps its rounded corners while content
 * scrolls underneath. At the top of the page they sit on the panel's own corners. */
.rf-topbar::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 28px;
	background:
		radial-gradient(circle at 100% 100%, transparent 27.5px, var(--rf-aubergine) 28px) left top / 28px 28px no-repeat,
		radial-gradient(circle at 0 100%, transparent 27.5px, var(--rf-aubergine) 28px) right top / 28px 28px no-repeat;
	pointer-events: none;
}

.rf-page .rf-topbar__brand {
	display: block;
	color: var(--rf-cream);
}

.rf-wordmark {
	display: block;
	width: 114px;
	height: 32px;
	background: currentColor;
	-webkit-mask: url("img/logo-wordmark.svg") center / contain no-repeat;
	mask: url("img/logo-wordmark.svg") center / contain no-repeat;
}

.rf-page .rf-topbar__back,
.rf-page .rf-topbar__back:hover {
	display: inline-flex;
	gap: 8px;
	color: var(--rf-cream);
	text-decoration: none;
}

.rf-page .rf-cart-chip,
.rf-page .rf-cart-chip:hover {
	padding: 6px 14px;
	border: 1.5px solid var(--rf-cream);
	border-radius: 999px;
	color: var(--rf-cream);
	text-decoration: none;
	white-space: nowrap;
}

.rf-cart-chip.is-bumped {
	animation: rf-bump 0.4s ease;
}

@keyframes rf-bump {
	50% {
		transform: scale(1.12);
	}
}

/* ---------- Shared text ---------- */

.rf-page .rf-title {
	margin: 0;
	color: var(--rf-aubergine);
}

.rf-page :is(.rf-title, .rf-product__title) em {
	font-style: italic;
	color: var(--rf-brown);
}

.rf-page .rf-title--center,
.rf-page .rf-lede--center {
	text-align: center;
}

.rf-page .rf-lede {
	margin: 0;
	color: var(--rf-mauve);
}

.rf-page .rf-label {
	margin: 0;
	color: var(--rf-mauve);
}

/* ---------- Sticker: product color + Refill Me logo (or the product image) ---------- */

.rf-page .rf-swatch {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--rf-swatch, var(--rm-sky, #8cb2e4));
	color: var(--rf-cream);
	object-fit: cover;
}

.rf-page .rf-swatch.is-light {
	color: var(--rf-aubergine);
}

.rf-page .rf-swatch--sm {
	width: 40px;
	height: 40px;
}

.rf-page .rf-swatch--lg {
	width: 64px;
	height: 64px;
}

.rf-logo {
	display: block;
	width: 64%;
	aspect-ratio: 28 / 24;
	background: currentColor;
	-webkit-mask: url("img/logo-stacked.svg") center / contain no-repeat;
	mask: url("img/logo-stacked.svg") center / contain no-repeat;
}

/* ---------- /refill page: intro, cards, station note ---------- */

.rf-page .rf-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-page .rf-card,
.rf-page .rf-card:hover {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px 12px 12px;
	border: 1px solid var(--rf-line);
	border-radius: 20px;
	background: var(--rf-white);
	color: var(--rf-aubergine);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.rf-page .rf-card:is(:hover, :focus-visible) {
	border-color: var(--rf-aubergine);
	box-shadow: 0 0 0 1px var(--rf-aubergine);
}

.rf-card__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rf-page .rf-card__sub,
.rf-page .rf-card__unit {
	color: var(--rf-mauve);
}

.rf-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	white-space: nowrap;
}

.rf-page .rf-card__amount {
	color: var(--rf-brown);
}

/* The title, intro and station note on /refill are Elementor v4 atomic widgets styled
 * entirely by global classes (font-pla-34px-400, text-em-brown, rf-station-note, …). */

/* ---------- Product page ---------- */

.rf-product,
.rf-product__panel {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: 14px;
}

.rf-product__header {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rf-product__heading {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rf-page .rf-product__title {
	margin: 0;
	color: var(--rf-aubergine);
}

.rf-page .rf-product__subtitle {
	margin: 0;
	color: var(--rf-mauve);
}

/* New / Refill: underline tabs */
.rf-tabs {
	display: flex;
	align-items: flex-end;
}

.rf-page .rf-product .rf-tab {
	flex: 1 1 0;
	padding: 10px 8px 9px;
	border: 0;
	border-bottom: 1px solid var(--rf-line);
	border-radius: 0;
	background: none;
	color: var(--rf-disabled-text);
	cursor: pointer;
}

.rf-page .rf-product .rf-tab:hover {
	color: var(--rf-mauve);
}

.rf-page .rf-product .rf-tab[aria-pressed="true"] {
	border-bottom: 3px solid var(--rf-aubergine);
	color: var(--rf-aubergine);
}

/* Pill chips: scents and ounce presets */
.rf-chips {
	display: flex;
	gap: 8px;
}

.rf-chips--tight {
	gap: 6px;
}

.rf-page .rf-product .rf-chip {
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 6px;
	border: 1.5px solid var(--rf-line);
	border-radius: 999px;
	background: var(--rf-white);
	color: var(--rf-aubergine);
	white-space: nowrap;
	cursor: pointer;
}

.rf-page .rf-product .rf-chips--tight .rf-chip {
	padding-inline: 4px;
}

.rf-page .rf-product .rf-chip[aria-pressed="true"] {
	border-color: var(--rf-aubergine);
	background: var(--rf-aubergine);
	color: var(--rf-cream);
}

/* Radio option cards */
.rf-options {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rf-page .rf-product .rf-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px 12px 14px;
	border: 1px solid var(--rf-line);
	border-radius: 16px;
	background: var(--rf-white);
	color: var(--rf-aubergine);
	text-align: left;
	cursor: pointer;
}

.rf-page .rf-product .rf-option[aria-checked="true"] {
	padding: 11px 15px 11px 13px;
	border: 2px solid var(--rf-aubergine);
}

.rf-option__radio {
	flex: none;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--rf-line);
	border-radius: 50%;
	background: var(--rf-white);
}

.rf-option[aria-checked="true"] .rf-option__radio {
	border: 6px solid var(--rf-aubergine);
}

.rf-option__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.rf-page .rf-option__sub {
	color: var(--rf-mauve);
}

.rf-page .rf-option__price {
	color: var(--rf-brown);
	white-space: nowrap;
}

/* Plus / minus stepper */
.rf-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border: 1.5px solid var(--rf-line);
	border-radius: 999px;
	background: var(--rf-white);
}

.rf-page .rf-product .rf-stepper button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--rf-sand);
	color: var(--rf-aubergine);
	cursor: pointer;
}

.rf-page .rf-product .rf-stepper button:disabled {
	opacity: 0.4;
	cursor: default;
}

.rf-stepper__value {
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.rf-page .rf-stepper__unit {
	color: var(--rf-mauve);
}

/* Custom ounces */
.rf-custom {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 1.5px solid var(--rf-line);
	border-radius: 16px;
	background: var(--rf-white);
}

.rf-page .rf-custom input {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--rf-aubergine);
	outline: none;
	-moz-appearance: textfield;
}

.rf-custom input::-webkit-outer-spin-button,
.rf-custom input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.rf-custom:focus-within {
	border-color: var(--rf-aubergine);
}

.rf-page .rf-custom span {
	color: var(--rf-mauve);
}

.rf-custom.is-invalid {
	border-color: var(--rf-error);
}

.rf-page .rf-custom.is-invalid input,
.rf-page .rf-field-error {
	color: var(--rf-error);
}

.rf-field-error {
	margin: 0;
}

/* Size guide (reference only, not clickable) */
.rf-guide {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 16px;
	border-radius: 16px;
	background: var(--rf-lilac-tint);
}

.rf-page .rf-guide__title {
	margin: 0;
	color: var(--rf-brown);
}

.rf-guide__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--rf-aubergine);
}

.rf-page .rf-guide__note {
	margin: 0;
	color: var(--rf-mauve);
}

/* Notes */
.rf-page .rf-note {
	margin: 0;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--rf-sage-tint);
	color: var(--rf-aubergine);
}

/* Line total */
.rf-total {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px;
	border-radius: 18px;
	background: var(--rf-sand);
}

.rf-total__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--rf-aubergine);
}

.rf-total__row span:first-child {
	color: var(--rf-mauve);
}

/* Extra lines from the product settings ("About 16 HE loads"). */
.rf-total__row + .rf-total__row span:first-child {
	color: var(--rf-brown);
}

.rf-page .rf-total hr {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--rf-line);
	opacity: 0.5;
}

.rf-total__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.rf-page .rf-total__sum strong {
	color: var(--rf-brown);
}

.rf-page .rf-total.is-empty .rf-total__sum strong {
	color: var(--rf-disabled-text);
}

/* ---------- Buttons ---------- */

.rf-spacer {
	flex: 1 0 0;
}

.rf-page .rf-button,
.rf-page a.rf-button:is(:hover, :focus, :visited) {
	display: block;
	width: 100%;
	padding: 17px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--rf-aubergine);
	color: var(--rf-cream);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.rf-page .rf-button:disabled {
	background: var(--rf-disabled);
	color: var(--rf-disabled-text);
	cursor: default;
}

.rf-page .rf-button.is-busy {
	opacity: 0.7;
	cursor: progress;
}

.rf-page .rf-button--outline,
.rf-page a.rf-button--outline:is(:hover, :focus, :visited) {
	padding: 15.5px 24px;
	border: 1.5px solid var(--rf-aubergine);
	background: transparent;
	color: var(--rf-aubergine);
}

.rf-page .rf-status {
	margin: -4px 0 0;
	min-height: 1.3em;
	text-align: center;
	color: var(--rf-aubergine);
}

.rf-page .rf-status a,
.rf-page .rf-status a:hover {
	color: var(--rf-brown);
	font-weight: 700;
}

.rf-page .rf-status.is-error {
	color: var(--rf-error);
}

.rf-page :is(button, a, input):focus-visible {
	outline: 2px solid var(--rf-aubergine);
	outline-offset: 2px;
}

/* ---------- Loading screen and page cross-fade ---------- */

/* Store pages fade into each other (browsers without support just switch pages). */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.25s;
}

/* Shown by refillery.js the moment a store link is tapped, before the page changes.
 * It fades in right away, with no wait: iPhone browsers drop the old page as soon
 * as the server answers and then hold a still picture of it while the new page
 * loads, so the loader has to be on screen by then to be part of that picture (and
 * of the crossfade into the new page). Even a 50ms wait hid it on iPhone. */
.rf-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	place-items: center;
	background: var(--rf-aubergine);
	opacity: 0;
	will-change: opacity;
}

.rf-loader.is-visible {
	display: grid;
	animation: rf-loader-in 0.15s ease forwards;
}

@keyframes rf-loader-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Cream logo on the aubergine screen, pulsing in size only. */
.rf-page .rf-loader__sticker {
	--rf-swatch: transparent;
	width: 96px;
	height: 96px;
	color: var(--rf-cream);
	animation: rf-pulse 1.2s ease-in-out infinite;
	will-change: transform;
}

.rf-loader__sticker .rf-logo {
	width: 100%;
}

@keyframes rf-pulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	.rf-page .rf-loader__sticker {
		animation: none;
	}
}

/* ---------- Cart ---------- */

.rf-page .rf-lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-line {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 12px;
	border: 1px solid var(--rf-line);
	border-radius: 18px;
	background: var(--rf-white);
}

.rf-line__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.rf-line__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.rf-line__name {
	flex: 1 1 0;
}

.rf-page .rf-line__total {
	color: var(--rf-brown);
	white-space: nowrap;
}

.rf-page .rf-line__detail {
	color: var(--rf-mauve);
}

.rf-line__actions {
	display: flex;
	gap: 16px;
	padding-top: 2px;
}

.rf-page .rf-line__actions a {
	color: var(--rf-mauve);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rf-page .rf-line__actions .rf-line__edit {
	color: var(--rf-brown);
}

.rf-subtotal {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 18px;
	border-radius: 18px;
	background: var(--rf-sand);
}

.rf-subtotal__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.rf-page .rf-subtotal__amount {
	color: var(--rf-brown);
}

.rf-page .rf-subtotal__note {
	margin: 0;
	color: var(--rf-mauve);
}

.rf-page .rf-add-another,
.rf-page .rf-add-another:hover {
	align-self: center;
	color: var(--rf-brown);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rf-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 40px 0 16px;
	text-align: center;
}

.rf-page .rf-empty__art {
	width: 220px;
	max-width: 100%;
	height: auto;
}

.rf-page .rf-empty__title {
	margin: 0;
	color: var(--rf-aubergine);
}

.rf-page .rf-empty__text {
	margin: 0;
	color: var(--rf-mauve);
}

/* WooCommerce notices ("Laundry Powder removed. Undo?") */
.rf-page .rf-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 14px;
	background: var(--rf-sage-tint);
	color: var(--rf-aubergine);
	list-style: none;
}

.rf-page .rf-notices .woocommerce-error {
	background: color-mix(in srgb, var(--rf-error) 12%, var(--rf-cream));
	color: var(--rf-error);
}

.rf-page .rf-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	content: none;
}

.rf-page .rf-notices a {
	margin-left: 6px;
	color: var(--rf-brown);
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Thank-you page ---------- */

.rf-page .rf-thanks__art {
	width: 104px;
	height: auto;
}

.rf-page .rf-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: stretch;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--rf-line);
	border-radius: 18px;
	background: var(--rf-white);
}

.rf-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.rf-page .rf-summary dt {
	color: var(--rf-mauve);
}

.rf-page .rf-summary dd {
	margin: 0;
	color: var(--rf-aubergine);
	text-align: right;
}

.rf-page .rf-thanks__extra {
	align-self: stretch;
	color: var(--rf-mauve);
}

.rf-page .rf-thanks__extra :is(p, h2, h3, ul) {
	margin: 0 0 6px;
	font: inherit;
}

.rf-page .rf-reminder {
	margin: 0;
	color: var(--rf-brown);
	text-align: center;
}

/* ---------- Privacy, terms and refund pages ---------- */

.rf-page .rf-prose {
	color: var(--rf-aubergine);
	line-height: 1.45;
}

.rf-page .rf-prose > * {
	margin: 0 0 12px;
}

.rf-page .rf-prose h2 {
	margin: 22px 0 6px;
	color: var(--rf-aubergine);
	font-family: var(--e-global-typography-v4-font-pla-19px-400-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-19px-400-font-size, 19px);
	font-weight: 400;
	line-height: 1.25;
}

.rf-page .rf-prose ul {
	padding-left: 20px;
}

.rf-page .rf-prose li {
	margin-bottom: 4px;
}

.rf-page .rf-prose a {
	color: var(--rf-brown);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rf-page .rf-prose .rf-updated {
	color: var(--rf-mauve);
	font-size: 14px;
}

/* ---------- Checkout (WooCommerce Checkout block) ----------
 * The block's own markup can't take the Elementor classes, so text here reads the
 * same synced class values directly (--e-global-typography-v4-<class>-<prop>).
 * WooCommerce's block CSS loads after this file, hence the longer selectors.
 */

.rf-page .rf-body--checkout {
	--rf-caps: var(--e-global-typography-v4-font-nun-12px-700-caps-font-weight, 700) var(--e-global-typography-v4-font-nun-12px-700-caps-font-size, 12px) / var(--e-global-typography-v4-font-nun-12px-700-caps-line-height, normal) var(--e-global-typography-v4-font-nun-12px-700-caps-font-family, var(--rf-label));
	--rf-input: var(--e-global-typography-v4-font-ale-16px-400-font-weight, 400) var(--e-global-typography-v4-font-ale-16px-400-font-size, 16px) / var(--e-global-typography-v4-font-ale-16px-400-line-height, normal) var(--e-global-typography-v4-font-ale-16px-400-font-family, var(--rf-body));
	--rf-strong: var(--e-global-typography-v4-font-ale-16px-700-font-weight, 700) var(--e-global-typography-v4-font-ale-16px-700-font-size, 16px) / var(--e-global-typography-v4-font-ale-16px-700-line-height, normal) var(--e-global-typography-v4-font-ale-16px-700-font-family, var(--rf-body));
	--rf-default: var(--e-global-typography-v4-font-ale-15px-400-font-weight, 400) var(--e-global-typography-v4-font-ale-15px-400-font-size, 15px) / var(--e-global-typography-v4-font-ale-15px-400-line-height, normal) var(--e-global-typography-v4-font-ale-15px-400-font-family, var(--rf-body));
	--rf-small: var(--e-global-typography-v4-font-ale-13px-400-font-weight, 400) var(--e-global-typography-v4-font-ale-13px-400-font-size, 13px) / var(--e-global-typography-v4-font-ale-13px-400-line-height, 1.3) var(--e-global-typography-v4-font-ale-13px-400-font-family, var(--rf-body));
	--rf-small-italic: italic var(--e-global-typography-v4-font-ale-13px-400-italic-font-weight, 400) var(--e-global-typography-v4-font-ale-13px-400-italic-font-size, 13px) / var(--e-global-typography-v4-font-ale-13px-400-italic-line-height, normal) var(--e-global-typography-v4-font-ale-13px-400-italic-font-family, var(--rf-body));
	--rf-total: var(--e-global-typography-v4-font-pla-28px-400-lh100-font-weight, 400) var(--e-global-typography-v4-font-pla-28px-400-lh100-font-size, 28px) / var(--e-global-typography-v4-font-pla-28px-400-lh100-line-height, 1) var(--e-global-typography-v4-font-pla-28px-400-lh100-font-family, var(--rf-display));
	--rf-button: var(--e-global-typography-v4-font-ale-18px-700-font-weight, 700) var(--e-global-typography-v4-font-ale-18px-700-font-size, 18px) / var(--e-global-typography-v4-font-ale-18px-700-line-height, 1.2) var(--e-global-typography-v4-font-ale-18px-700-font-family, var(--rf-body));
}

.rf-page .rf-body--checkout .wp-block-woocommerce-checkout {
	margin: 0;
	padding: 0;
	color: var(--rf-aubergine);
	font: var(--rf-default);
}

.rf-page .rf-body--checkout .wc-block-components-sidebar-layout {
	display: block;
	margin: 0;
}

.rf-page .rf-body--checkout .wc-block-components-sidebar-layout .wc-block-components-main {
	width: 100%;
	padding: 0;
}

/* Not needed at the station: the sidebar (the summary is shown above Pay instead),
 * billing address, order notes, the item list and coupons. */
.rf-page .rf-body--checkout :is(
	.wc-block-checkout__sidebar,
	.wc-block-checkout__billing-fields,
	.wc-block-checkout__order-notes,
	.wp-block-woocommerce-checkout-order-summary-cart-items-block,
	.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
	.checkout-order-summary-block-fill-wrapper > .wc-block-components-checkout-step__heading
) {
	display: none;
}

.rf-page .rf-body--checkout .wc-block-components-form .wc-block-components-checkout-step {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.rf-page .rf-body--checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 6px;
}

.rf-page .rf-body--checkout .wc-block-components-checkout-step .wc-block-components-checkout-step__title,
.rf-page .rf-body--checkout .wc-block-components-express-payment .wc-block-components-express-payment__title {
	margin: 0;
	color: var(--rf-mauve);
	font: var(--rf-caps);
	letter-spacing: var(--e-global-typography-v4-font-nun-12px-700-caps-letter-spacing, 0.12em);
	text-transform: uppercase;
}

/* Express pay: label above the buttons, no box around them. */
.rf-page .rf-body--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container {
	display: block;
	margin: 0 0 8px;
	text-align: left;
}

.rf-page .rf-body--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
.rf-page .rf-body--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after {
	content: none;
}

.rf-page .rf-body--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
	padding: 0;
	border: 0;
}

.rf-page .rf-body--checkout .wc-block-components-express-payment-continue-rule {
	margin: 14px 0 18px;
	color: var(--rf-mauve);
	font: var(--rf-small-italic);
	text-transform: lowercase;
}

.rf-page .rf-body--checkout .wc-block-components-express-payment-continue-rule::before,
.rf-page .rf-body--checkout .wc-block-components-express-payment-continue-rule::after {
	border-color: var(--rf-line);
}

/* Email field: the step title is the label, so the floating label is hidden visually. */
.rf-page .rf-body--checkout .wc-block-components-form .wc-block-components-text-input input[type] {
	height: auto;
	min-height: 45px;
	padding: 12px 14px;
	border: 1px solid var(--rf-line);
	border-radius: 12px;
	background: var(--rf-white);
	box-shadow: none;
	color: var(--rf-aubergine);
	font: var(--rf-input);
}

.rf-page .rf-body--checkout .wc-block-components-form .wc-block-components-text-input input[type]:focus {
	border-color: var(--rf-aubergine);
	box-shadow: 0 0 0 1px var(--rf-aubergine);
	outline: none;
}

.rf-page .rf-body--checkout .wc-block-components-text-input.wc-block-components-address-form__email label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rf-page .rf-body--checkout .wc-block-components-form .wc-block-components-text-input.has-error input[type] {
	border-color: var(--rf-error);
}

.rf-page .rf-body--checkout .wc-block-components-validation-error {
	color: var(--rf-error);
	font: var(--rf-small);
}

/* Payment methods: white cards, aubergine when selected. */
.rf-page .rf-body--checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.rf-page .rf-body--checkout .wc-block-components-radio-control-accordion-option {
	margin: 0 0 8px;
	border: 1px solid var(--rf-line);
	border-radius: 16px;
	background: var(--rf-white);
	box-shadow: none;
}

.rf-page .rf-body--checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border: 2px solid var(--rf-aubergine);
	box-shadow: none;
}

.rf-page .rf-body--checkout .wc-block-components-radio-control--highlight-checked::after {
	content: none;
}

.rf-page .rf-body--checkout .wc-block-components-radio-control__label {
	color: var(--rf-aubergine);
	font: var(--rf-strong);
}

.rf-page .rf-body--checkout .wc-block-components-radio-control__input {
	border-color: var(--rf-line);
	accent-color: var(--rf-aubergine);
}

.rf-page .rf-body--checkout .wc-block-components-radio-control__input:checked {
	border: 6px solid var(--rf-aubergine);
	background: var(--rf-white);
}

.rf-page .rf-body--checkout .wc-block-components-radio-control__input:checked::before {
	content: none;
}

.rf-page .rf-body--checkout .wc-block-components-radio-control-accordion-content {
	color: var(--rf-mauve);
	font: var(--rf-small);
}

.rf-page .rf-body--checkout .wc-block-checkout__terms {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	color: var(--rf-mauve);
	font: var(--rf-small);
}

.rf-page .rf-body--checkout .wc-block-checkout__terms::before {
	content: none;
}

.rf-page .rf-body--checkout .wc-block-checkout__terms a {
	color: var(--rf-brown);
}

/* Order summary above Pay: sand box with subtotal, tax and total. */
.rf-page .rf-body--checkout .checkout-order-summary-block-fill-wrapper {
	margin: 0 0 16px;
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 16px;
	border: 0;
	border-radius: 18px;
	background: var(--rf-sand);
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill :is(.wc-block-components-totals-wrapper, .wp-block-woocommerce-checkout-order-summary-totals-block) {
	padding: 0;
	border: 0;
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill .wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--rf-aubergine);
	font: var(--rf-default);
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill .wc-block-components-totals-item__label {
	color: var(--rf-mauve);
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill .wc-block-components-totals-footer-item {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--rf-line);
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--rf-aubergine);
	font: var(--rf-strong);
}

.rf-page .rf-body--checkout .checkout-order-summary-block-fill .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--rf-brown);
	font: var(--rf-total);
}

.rf-page .rf-body--checkout .wc-block-components-totals-item__description {
	color: var(--rf-mauve);
	font: var(--rf-small);
}

/* Pay $15.92 */
.rf-page .rf-body--checkout .wc-block-checkout__actions {
	padding: 0;
}

.rf-page .rf-body--checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 56px;
	padding: 17px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--rf-aubergine);
	color: var(--rf-cream);
	font: var(--rf-button);
}

.rf-page .rf-body--checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:disabled {
	background: var(--rf-disabled);
	color: var(--rf-disabled-text);
}

.rf-page .rf-body--checkout .wc-block-components-checkout-place-order-button__text {
	gap: 0.3em;
}

.rf-page .rf-body--checkout .wc-block-components-checkout-place-order-button__separator {
	display: none;
}

.rf-page .rf-body--checkout .wc-block-components-notice-banner {
	border-radius: 14px;
	font: var(--rf-default);
}

/* ---------- Typography: Elementor v4 global classes ---------- */

.rf-page .font-pla-34px-400 {
	font-family: var(--e-global-typography-v4-font-pla-34px-400-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-34px-400-font-size, 34px);
	font-weight: var(--e-global-typography-v4-font-pla-34px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-34px-400-line-height, 1.1);
	letter-spacing: var(--e-global-typography-v4-font-pla-34px-400-letter-spacing, -0.01em);
}

.rf-page .font-pla-34px-400-lh100 {
	font-family: var(--e-global-typography-v4-font-pla-34px-400-lh100-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-34px-400-lh100-font-size, 34px);
	font-weight: var(--e-global-typography-v4-font-pla-34px-400-lh100-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-34px-400-lh100-line-height, 1);
	letter-spacing: var(--e-global-typography-v4-font-pla-34px-400-lh100-letter-spacing, -0.01em);
}

.rf-page .font-pla-28px-400 {
	font-family: var(--e-global-typography-v4-font-pla-28px-400-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-28px-400-font-size, 28px);
	font-weight: var(--e-global-typography-v4-font-pla-28px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-28px-400-line-height, 1.1);
	letter-spacing: var(--e-global-typography-v4-font-pla-28px-400-letter-spacing, -0.01em);
}

.rf-page .font-pla-28px-400-lh100 {
	font-family: var(--e-global-typography-v4-font-pla-28px-400-lh100-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-28px-400-lh100-font-size, 28px);
	font-weight: var(--e-global-typography-v4-font-pla-28px-400-lh100-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-28px-400-lh100-line-height, 1);
	letter-spacing: var(--e-global-typography-v4-font-pla-28px-400-lh100-letter-spacing, -0.01em);
}

.rf-page .font-pla-26px-400 {
	font-family: var(--e-global-typography-v4-font-pla-26px-400-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-26px-400-font-size, 26px);
	font-weight: var(--e-global-typography-v4-font-pla-26px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-26px-400-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-pla-26px-400-letter-spacing, 0);
}

.rf-page .font-pla-19px-400 {
	font-family: var(--e-global-typography-v4-font-pla-19px-400-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-19px-400-font-size, 19px);
	font-weight: var(--e-global-typography-v4-font-pla-19px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-19px-400-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-pla-19px-400-letter-spacing, -0.01em);
}

.rf-page .font-pla-17px-400 {
	font-family: var(--e-global-typography-v4-font-pla-17px-400-font-family, var(--rf-display));
	font-size: var(--e-global-typography-v4-font-pla-17px-400-font-size, 17px);
	font-weight: var(--e-global-typography-v4-font-pla-17px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-pla-17px-400-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-pla-17px-400-letter-spacing, 0);
}

.rf-page .font-ale-18px-700 {
	font-family: var(--e-global-typography-v4-font-ale-18px-700-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-18px-700-font-size, 18px);
	font-weight: var(--e-global-typography-v4-font-ale-18px-700-font-weight, 700);
	line-height: var(--e-global-typography-v4-font-ale-18px-700-line-height, 1.2);
	letter-spacing: var(--e-global-typography-v4-font-ale-18px-700-letter-spacing, 0);
}

.rf-page .font-ale-17px-400 {
	font-family: var(--e-global-typography-v4-font-ale-17px-400-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-17px-400-font-size, 17px);
	font-weight: var(--e-global-typography-v4-font-ale-17px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-ale-17px-400-line-height, 1.35);
	letter-spacing: var(--e-global-typography-v4-font-ale-17px-400-letter-spacing, 0);
}

.rf-page .font-ale-17px-500 {
	font-family: var(--e-global-typography-v4-font-ale-17px-500-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-17px-500-font-size, 17px);
	font-weight: var(--e-global-typography-v4-font-ale-17px-500-font-weight, 500);
	line-height: var(--e-global-typography-v4-font-ale-17px-500-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-17px-500-letter-spacing, 0);
}

.rf-page .font-ale-16px-400 {
	font-family: var(--e-global-typography-v4-font-ale-16px-400-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-16px-400-font-size, 16px);
	font-weight: var(--e-global-typography-v4-font-ale-16px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-ale-16px-400-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-16px-400-letter-spacing, 0);
}

.rf-page .font-ale-16px-500 {
	font-family: var(--e-global-typography-v4-font-ale-16px-500-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-16px-500-font-size, 16px);
	font-weight: var(--e-global-typography-v4-font-ale-16px-500-font-weight, 500);
	line-height: var(--e-global-typography-v4-font-ale-16px-500-line-height, 1.25);
	letter-spacing: var(--e-global-typography-v4-font-ale-16px-500-letter-spacing, 0);
}

.rf-page .font-ale-16px-700 {
	font-family: var(--e-global-typography-v4-font-ale-16px-700-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-16px-700-font-size, 16px);
	font-weight: var(--e-global-typography-v4-font-ale-16px-700-font-weight, 700);
	line-height: var(--e-global-typography-v4-font-ale-16px-700-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-16px-700-letter-spacing, 0);
}

.rf-page .font-ale-15px-400 {
	font-family: var(--e-global-typography-v4-font-ale-15px-400-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-15px-400-font-size, 15px);
	font-weight: var(--e-global-typography-v4-font-ale-15px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-ale-15px-400-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-15px-400-letter-spacing, 0);
}

.rf-page .font-ale-15px-400-italic {
	font-family: var(--e-global-typography-v4-font-ale-15px-400-italic-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-15px-400-italic-font-size, 15px);
	font-weight: var(--e-global-typography-v4-font-ale-15px-400-italic-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-ale-15px-400-italic-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-15px-400-italic-letter-spacing, 0);
	font-style: var(--e-global-typography-v4-font-ale-15px-400-italic-font-style, italic);
}

.rf-page .font-ale-15px-500 {
	font-family: var(--e-global-typography-v4-font-ale-15px-500-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-15px-500-font-size, 15px);
	font-weight: var(--e-global-typography-v4-font-ale-15px-500-font-weight, 500);
	line-height: var(--e-global-typography-v4-font-ale-15px-500-line-height, 1.3);
	letter-spacing: var(--e-global-typography-v4-font-ale-15px-500-letter-spacing, 0);
}

.rf-page .font-ale-15px-700 {
	font-family: var(--e-global-typography-v4-font-ale-15px-700-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-15px-700-font-size, 15px);
	font-weight: var(--e-global-typography-v4-font-ale-15px-700-font-weight, 700);
	line-height: var(--e-global-typography-v4-font-ale-15px-700-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-15px-700-letter-spacing, 0);
}

.rf-page .font-ale-14px-700 {
	font-family: var(--e-global-typography-v4-font-ale-14px-700-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-14px-700-font-size, 14px);
	font-weight: var(--e-global-typography-v4-font-ale-14px-700-font-weight, 700);
	line-height: var(--e-global-typography-v4-font-ale-14px-700-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-14px-700-letter-spacing, 0);
}

.rf-page .font-ale-13px-400 {
	font-family: var(--e-global-typography-v4-font-ale-13px-400-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-13px-400-font-size, 13px);
	font-weight: var(--e-global-typography-v4-font-ale-13px-400-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-ale-13px-400-line-height, 1.3);
	letter-spacing: var(--e-global-typography-v4-font-ale-13px-400-letter-spacing, 0);
}

.rf-page .font-ale-13px-400-italic {
	font-family: var(--e-global-typography-v4-font-ale-13px-400-italic-font-family, var(--rf-body));
	font-size: var(--e-global-typography-v4-font-ale-13px-400-italic-font-size, 13px);
	font-weight: var(--e-global-typography-v4-font-ale-13px-400-italic-font-weight, 400);
	line-height: var(--e-global-typography-v4-font-ale-13px-400-italic-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-ale-13px-400-italic-letter-spacing, 0);
	font-style: var(--e-global-typography-v4-font-ale-13px-400-italic-font-style, italic);
}

.rf-page .font-nun-22px-800 {
	font-family: var(--e-global-typography-v4-font-nun-22px-800-font-family, var(--rf-label));
	font-size: var(--e-global-typography-v4-font-nun-22px-800-font-size, 22px);
	font-weight: var(--e-global-typography-v4-font-nun-22px-800-font-weight, 800);
	line-height: var(--e-global-typography-v4-font-nun-22px-800-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-nun-22px-800-letter-spacing, 0);
}

.rf-page .font-nun-14px-700-caps {
	font-family: var(--e-global-typography-v4-font-nun-14px-700-caps-font-family, var(--rf-label));
	font-size: var(--e-global-typography-v4-font-nun-14px-700-caps-font-size, 14px);
	font-weight: var(--e-global-typography-v4-font-nun-14px-700-caps-font-weight, 700);
	line-height: var(--e-global-typography-v4-font-nun-14px-700-caps-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-nun-14px-700-caps-letter-spacing, 0.1em);
	text-transform: var(--e-global-typography-v4-font-nun-14px-700-caps-text-transform, uppercase);
}

.rf-page .font-nun-12px-700-caps {
	font-family: var(--e-global-typography-v4-font-nun-12px-700-caps-font-family, var(--rf-label));
	font-size: var(--e-global-typography-v4-font-nun-12px-700-caps-font-size, 12px);
	font-weight: var(--e-global-typography-v4-font-nun-12px-700-caps-font-weight, 700);
	line-height: var(--e-global-typography-v4-font-nun-12px-700-caps-line-height, normal);
	letter-spacing: var(--e-global-typography-v4-font-nun-12px-700-caps-letter-spacing, 0.12em);
	text-transform: var(--e-global-typography-v4-font-nun-12px-700-caps-text-transform, uppercase);
}