/* ==========================================================================
   RMC — GLOBAL v3
   Surfaces, controls, product cards, rail. Checkout excluded throughout.
   ========================================================================== */

/* ---------- Surfaces: white by default, everywhere ---------- */

html body:not(.woocommerce-checkout),
html body:not(.woocommerce-checkout) #page,
html body:not(.woocommerce-checkout) #content,
html body:not(.woocommerce-checkout) #content.site-content,
html body:not(.woocommerce-checkout) .site-content,
html body:not(.woocommerce-checkout) #primary,
html body:not(.woocommerce-checkout) .content-area,
html body:not(.woocommerce-checkout) .ast-container,
html body:not(.woocommerce-checkout) .site-main {
	background-color: var(--rmc-white) !important;
	background-image: none !important;
}

/* ==========================================================================
   CONTROLS — one definition for every button on the site
   ========================================================================== */

/* Icon controls carry .elementor-button too (cart toggle, rail arrows), so
   they are excluded here rather than fixed afterwards. */
html body:not(.woocommerce-checkout) .button:not(.rmc-card-cart):not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) a.button:not(.rmc-card-cart):not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) button.button:not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) input.button,
html body:not(.woocommerce-checkout) .ast-button,
html body:not(.woocommerce-checkout) .ast-custom-button,
html body:not(.woocommerce-checkout) .wp-block-button__link,
html body:not(.woocommerce-checkout) .woocommerce-Button,
html body:not(.woocommerce-checkout) .wc-block-components-button,
html body:not(.woocommerce-checkout) .elementor-button:not(.elementor-menu-cart__toggle_button):not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) button[type="submit"]:not(.adminbar-button):not(.dgwt-wcas-search-submit),
html body:not(.woocommerce-checkout) input[type="submit"]:not(.adminbar-button) {
	border-radius: var(--rmc-radius) !important;
	font-family: var(--rmc-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	padding: 14px 28px !important;
	border: 1px solid transparent !important;
	background: var(--rmc-navy) !important;
	color: var(--rmc-white) !important;
	box-shadow: none !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
	cursor: pointer;
}

html body:not(.woocommerce-checkout) .button:hover,
html body:not(.woocommerce-checkout) a.button:hover,
html body:not(.woocommerce-checkout) button.button:hover,
html body:not(.woocommerce-checkout) .woocommerce-Button:hover,
html body:not(.woocommerce-checkout) button[type="submit"]:not(.adminbar-button):hover {
	background: var(--rmc-navy-hover) !important;
}

/* Copper: the single primary action per view */
html body:not(.woocommerce-checkout) .single_add_to_cart_button,
html body:not(.woocommerce-checkout) form button[type="submit"]:not(.dgwt-wcas-search-submit),
html body:not(.woocommerce-checkout) .wpforms-submit,
html body:not(.woocommerce-checkout) .elementor-button[type="submit"],
html body:not(.woocommerce-checkout) .rmc-btn-accent-el {
	background: var(--rmc-accent) !important;
	color: var(--rmc-accent-ink) !important;
	border-color: var(--rmc-accent) !important;
}

html body:not(.woocommerce-checkout) .single_add_to_cart_button:hover,
html body:not(.woocommerce-checkout) form button[type="submit"]:hover,
html body:not(.woocommerce-checkout) .rmc-btn-accent-el:hover {
	background: var(--rmc-accent-hover) !important;
	border-color: var(--rmc-accent-hover) !important;
}

/* Quiet secondary: hairline outline */
html body:not(.woocommerce-checkout) .rmc-btn-navy-el,
html body:not(.woocommerce-checkout) ul.products li.product .button,
html body:not(.woocommerce-checkout) .e-loop-item a.button {
	background: transparent !important;
	color: var(--rmc-navy) !important;
	border: 1px solid var(--rmc-line) !important;
}

html body:not(.woocommerce-checkout) .rmc-btn-navy-el:hover,
html body:not(.woocommerce-checkout) ul.products li.product .button:hover,
html body:not(.woocommerce-checkout) .e-loop-item a.button:hover {
	background: var(--rmc-navy) !important;
	border-color: var(--rmc-navy) !important;
	color: var(--rmc-white) !important;
}

/* ---------- Fields ---------- */

html body:not(.woocommerce-checkout) input[type="text"],
html body:not(.woocommerce-checkout) input[type="email"],
html body:not(.woocommerce-checkout) input[type="tel"],
html body:not(.woocommerce-checkout) input[type="password"],
html body:not(.woocommerce-checkout) input[type="number"],
html body:not(.woocommerce-checkout) input[type="search"],
html body:not(.woocommerce-checkout) select,
html body:not(.woocommerce-checkout) textarea,
html body:not(.woocommerce-checkout) .elementor-field-textual,
html body:not(.woocommerce-checkout) .woocommerce input.input-text {
	border: 1px solid var(--rmc-line) !important;
	border-radius: var(--rmc-radius) !important;
	background: var(--rmc-white) !important;
	font-family: var(--rmc-font) !important;
	font-size: 15px !important;
	color: var(--rmc-navy) !important;
	padding: 13px 15px !important;
	min-height: 48px !important;
	box-shadow: none !important;
	transition: border-color .16s ease !important;
}

html body:not(.woocommerce-checkout) textarea { min-height: 140px !important; }

html body:not(.woocommerce-checkout) input:focus,
html body:not(.woocommerce-checkout) select:focus,
html body:not(.woocommerce-checkout) textarea:focus {
	border-color: var(--rmc-navy) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(23, 50, 77, .07) !important;
}

body:not(.woocommerce-checkout) .elementor-field-group label,
body:not(.woocommerce-checkout) .wpforms-field-label,
body.page:not(.home) form label,
body.woocommerce-account .woocommerce label {
	font-family: var(--rmc-font) !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--rmc-muted) !important;
	display: block;
	margin-bottom: 9px !important;
}

#wpadminbar input,
#wpadminbar button {
	min-height: auto !important;
	border-radius: 0 !important;
	padding: 0 6px !important;
	font-size: 13px !important;
}

/* ==========================================================================
   PRODUCT CARD — one definition, every markup
   Premium ecommerce: hairline border, soft bed, no colour tiles.
   ========================================================================== */

ul.products li.product,
.rmc-shop-active .elementor-loop-container > .e-loop-item > .e-con {
	position: relative;
	background: var(--rmc-white) !important;
	border: 1px solid var(--rmc-line) !important;
	border-radius: var(--rmc-radius-card) !important;
	padding: 0 !important;
	overflow: visible;
	box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
}

ul.products li.product:hover,
.rmc-shop-active .elementor-loop-container > .e-loop-item > .e-con:hover {
	border-color: var(--rmc-line-strong) !important;
	box-shadow: var(--rmc-shadow-lg) !important;
	transform: none !important;
}

/* Astra nests the entire card — image AND summary — inside
   .astra-shop-thumbnail-wrap, so the image bed must target the product link. */
ul.products li.product .astra-shop-thumbnail-wrap {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	line-height: normal !important;
}

ul.products li.product .woocommerce-LoopProduct-link,
.rmc-shop-active .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container {
	display: block !important;
	background: var(--rmc-surface) !important;
	border-bottom: 1px solid var(--rmc-line);
	border-radius: var(--rmc-radius-card) var(--rmc-radius-card) 0 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
	position: relative;
}

ul.products li.product .woocommerce-LoopProduct-link img,
.rmc-shop-active .e-loop-item .elementor-widget-theme-post-featured-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
	margin: 0 !important;
	mix-blend-mode: multiply;
}

ul.products li.product .astra-shop-summary-wrap {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
	padding: 22px !important;
	margin: 0 !important;
}

ul.products li.product .astra-shop-summary-wrap > * { margin: 0 !important; padding: 0 !important; }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .ast-loop-product__link,
.rmc-shop-active .e-loop-item .product_title {
	font-family: var(--rmc-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--rmc-navy) !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
}

/* Copper on price */
ul.products li.product .price,
ul.products li.product .price bdi,
.rmc-shop-active .e-loop-item .price,
.rmc-shop-active .e-loop-item .price bdi {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--rmc-accent-text) !important;
}

ul.products li.product .price del,
ul.products li.product .price del bdi,
.rmc-shop-active .e-loop-item .price del {
	color: var(--rmc-faint) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

ul.products li.product .price ins,
.rmc-shop-active .e-loop-item .price ins {
	text-decoration: none !important;
	color: var(--rmc-accent-text) !important;
	font-weight: 500 !important;
}

/* ---------- Card meta + footer row ---------- */

ul.products li.product .rmc-card-meta,
.rmc-shop-active .e-loop-item .rmc-card-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 2px 0 0 !important;
}

ul.products li.product .rmc-card-meta span,
.rmc-shop-active .e-loop-item .rmc-card-meta span {
	font-family: var(--rmc-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--rmc-muted);
}

ul.products li.product .rmc-card-foot,
.rmc-shop-active .e-loop-item .rmc-card-foot {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 0 !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid var(--rmc-line);
}

/* The whole text button is replaced by a quiet icon action */
html body ul.products li.product .rmc-card-cart,
html body .rmc-shop-active .e-loop-item .rmc-card-cart {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	border: 1px solid var(--rmc-line) !important;
	border-radius: var(--rmc-radius) !important;
	background: var(--rmc-white) !important;
	color: var(--rmc-navy) !important;
	box-shadow: none !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

html body ul.products li.product .rmc-card-cart:hover,
html body .rmc-shop-active .e-loop-item .rmc-card-cart:hover {
	background: var(--rmc-navy) !important;
	border-color: var(--rmc-navy) !important;
	color: var(--rmc-white) !important;
}

html ul.products li.product .rmc-card-cart.added,
html ul.products li.product .rmc-card-cart.loading {
	background: var(--rmc-accent) !important;
	border-color: var(--rmc-accent) !important;
	color: var(--rmc-white) !important;
}

/* Woo's "View cart" follow-up link is noise in a card */
ul.products li.product .added_to_cart { display: none !important; }

/* Price sits in the footer row, not on its own line */
ul.products li.product .rmc-card-foot .price,
.rmc-shop-active .e-loop-item .rmc-card-foot .price { margin: 0 !important; }

ul.products li.product .star-rating,
.rmc-shop-active .e-loop-item .star-rating { display: none !important; }

/* Sale + stock: quiet labels, no glow */
html body ul.products li.product span.onsale {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	background: var(--rmc-accent) !important;
	color: var(--rmc-accent-ink-dark, #412402) !important;   /* white is 2.53:1 on copper */
	border: 0 !important;
	font-family: var(--rmc-font) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	padding: 7px 13px !important;
	border-radius: var(--rmc-radius) !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	z-index: 6;
	/* Glow animation removed 8.3.5 — same "soft shadows only" cleanup as the
	   deals section. The badge is loud enough by colour alone. */
	box-shadow: none !important;
}

ul.products li.product.outofstock .woocommerce-LoopProduct-link img {
	opacity: .4 !important;
	filter: grayscale(100%);
}

/* Astra prints its own out-of-stock text, which duplicates the chip */
ul.products li.product .ast-shop-product-out-of-stock { display: none !important; }

ul.products li.product.outofstock .woocommerce-LoopProduct-link::after,
.rmc-shop-active .e-loop-item.outofstock .elementor-widget-theme-post-featured-image::after {
	content: "Out of stock";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--rmc-white);
	color: var(--rmc-muted);
	border: 1px solid var(--rmc-line);
	font-family: var(--rmc-font);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: var(--rmc-radius);
	white-space: nowrap;
	z-index: 4;
	box-shadow: var(--rmc-shadow-sm);
	pointer-events: none;
}

/* ---------- Grid ---------- */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

ul.products::before,
ul.products::after { display: none !important; }

ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

@media (max-width: 600px) {
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
	ul.products li.product .astra-shop-summary-wrap { padding: 16px !important; }
}

/* ---------- Scroll rail (opt in: rmc-rail-section) ---------- */

.rmc-rail { position: relative; }

body .rmc-rail ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 24px !important;
	padding: 4px 4px 16px !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

body .rmc-rail ul.products::-webkit-scrollbar { display: none; }

body .rmc-rail ul.products li.product {
	flex: 0 0 280px !important;
	width: 280px !important;
	max-width: 280px !important;
	scroll-snap-align: start;
}

.rmc-rail-btn {
	position: absolute;
	top: 34%;
	transform: translateY(-50%);
	z-index: 10;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--rmc-line);
	background: var(--rmc-white);
	color: var(--rmc-navy);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--rmc-shadow);
	transition: border-color .18s ease, opacity .18s ease;
}

.rmc-rail-btn:hover { border-color: var(--rmc-navy); }
.rmc-rail-btn[disabled] { opacity: 0; pointer-events: none; }
.rmc-rail-prev { left: -12px; }
.rmc-rail-next { right: -12px; }

.rmc-rail::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 16px;
	right: 0;
	width: 64px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 92%);
	transition: opacity .2s ease;
}

.rmc-rail.at-end::after { opacity: 0; }

@media (max-width: 900px) {
	.rmc-rail-btn { display: none; }
	body .rmc-rail ul.products li.product { flex: 0 0 74% !important; width: 74% !important; max-width: 74% !important; }
}

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

.elementor-menu-cart__toggle .elementor-button-icon-qty {
	background: var(--rmc-accent) !important;
	color: var(--rmc-white) !important;
	box-shadow: none !important;
}

#ast-scroll-top { display: none !important; }


@media (prefers-reduced-motion: reduce) {
	body:not(.woocommerce-checkout) * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* The legacy text button is replaced by the icon action */
html body ul.products li.product .button:not(.rmc-card-cart) { display: none !important; }


/* ==========================================================================
   FOOTER
   One Elementor template renders on every page, so this is site-wide by
   definition. Its own stylesheet (post-1438.css) sets an off-palette #F9F9F9
   and leaves link colours inconsistent.
   ========================================================================== */

html body .elementor-location-footer,
html body .elementor-location-footer .e-con,
html body .elementor-location-footer .e-con-inner,
html body .elementor-location-footer > .e-con.e-parent {
	background-color: var(--rmc-white) !important;
	background-image: none !important;
}

html body .elementor-location-footer > .e-con.e-parent {
	border-top: 1px solid var(--rmc-line) !important;
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}

html body .elementor-location-footer,
html body .elementor-location-footer p,
html body .elementor-location-footer .elementor-widget-text-editor {
	font-family: var(--rmc-font) !important;
	font-size: 13px !important;
	line-height: 1.75 !important;
	color: var(--rmc-muted) !important;
}

html body .elementor-location-footer strong {
	color: var(--rmc-navy) !important;
	font-weight: 500 !important;
}

html body .elementor-location-footer a,
html body .elementor-location-footer .elementor-nav-menu a,
html body .elementor-location-footer .elementor-item {
	color: var(--rmc-navy) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	transition: color .16s ease !important;
}

html body .elementor-location-footer a:hover,
html body .elementor-location-footer .elementor-item:hover { color: var(--rmc-accent-text) !important; }

html body .elementor-location-footer .elementor-nav-menu { gap: 28px; }

html body .elementor-location-footer .elementor-divider-separator {
	border-top-color: var(--rmc-line) !important;
	border-color: var(--rmc-line) !important;
}

html body .elementor-location-footer .elementor-widget-divider { margin: 28px 0 !important; }


/* ==========================================================================
   ELEMENTOR BUTTONS
   The theme owns shape, type and behaviour. Colour is a default only — no
   !important — so anything set per button in Elementor overrides it.
   ========================================================================== */

body:not(.woocommerce-checkout) .elementor-button:not(.elementor-menu-cart__toggle_button):not(.rmc-rail-btn) {
	background-color: var(--rmc-navy);
	color: var(--rmc-white);
	border-color: transparent;
}

body:not(.woocommerce-checkout) .elementor-button:hover { color: var(--rmc-white); }

html body:not(.woocommerce-checkout) .elementor-button {
	border-radius: var(--rmc-radius) !important;
	font-family: var(--rmc-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease,
		transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* Darkening by filter works for any colour chosen in Elementor */
html body:not(.woocommerce-checkout) .elementor-button:hover {
	filter: brightness(.92) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(23, 50, 77, .20) !important;
}

html body:not(.woocommerce-checkout) .elementor-button:active { transform: translateY(0) !important; }

/* The cart toggle is navigation, not a call to action */
html body .elementor-menu-cart__toggle_button:hover {
	transform: none !important;
	box-shadow: none !important;
	filter: none !important;
}

/* ==========================================================================
   RAIL CONTROLS
   Not page buttons — excluded from the control layer above.
   ========================================================================== */

html body .rmc-rail-btn,
html body:not(.woocommerce-checkout) button.rmc-rail-btn {
	position: absolute !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: var(--rmc-white) !important;
	border: 1px solid var(--rmc-line) !important;
	color: var(--rmc-navy) !important;
	box-shadow: 0 2px 10px rgba(23, 50, 77, .12) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease !important;
	filter: none !important;
	cursor: pointer;
	z-index: 10;
}

html body .rmc-rail-btn svg { width: 15px; height: 15px; display: block; }

html body .rmc-rail-btn:hover {
	background: var(--rmc-navy) !important;
	border-color: var(--rmc-navy) !important;
	color: var(--rmc-white) !important;
	box-shadow: 0 4px 14px rgba(23, 50, 77, .20) !important;
	filter: none !important;
}

html body .rmc-rail-btn[disabled] { opacity: 0; pointer-events: none; }

html body .rmc-rail-prev { top: 34% !important; left: -12px !important; right: auto !important; transform: translateY(-50%) !important; }
html body .rmc-rail-next { top: 34% !important; right: -12px !important; left: auto !important; transform: translateY(-50%) !important; }
html body .rmc-rail-prev:hover, html body .rmc-rail-next:hover { transform: translateY(-50%) !important; }

@media (max-width: 900px) { html body .rmc-rail-btn { display: none !important; } }

/* ==========================================================================
   CARD HOVER
   ========================================================================== */

html body ul.products li.product,
html body .rmc-shop-active .elementor-loop-container > .e-loop-item > .e-con {
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

html body ul.products li.product .woocommerce-LoopProduct-link img,
html body .rmc-shop-active .e-loop-item .elementor-widget-theme-post-featured-image img {
	transition: transform .5s cubic-bezier(.2, .6, .2, 1) !important;
}

html body ul.products li.product:hover,
html body .rmc-shop-active .elementor-loop-container > .e-loop-item > .e-con:hover {
	transform: translateY(-4px) !important;
	border-color: var(--rmc-line-strong) !important;
	box-shadow: 0 14px 34px rgba(23, 50, 77, .10), 0 2px 6px rgba(23, 50, 77, .05) !important;
}

html body ul.products li.product:hover .woocommerce-LoopProduct-link img,
html body .rmc-shop-active .elementor-loop-container > .e-loop-item > .e-con:hover
	.elementor-widget-theme-post-featured-image img { transform: scale(1.04) !important; }

html body ul.products li.product:hover .woocommerce-loop-product__title,
html body ul.products li.product:hover .ast-loop-product__link { color: var(--rmc-navy) !important; }

/* ==========================================================================
   FLOATING HERO VIALS
   Three copies of one transparent vial, drifting on unrelated cycles.
   ========================================================================== */

@keyframes rmcFloatA { 0%, 100% { transform: translate3d(0,0,0) rotate(-5deg); } 50% { transform: translate3d(0,-24px,0) rotate(-1deg); } }
@keyframes rmcFloatB { 0%, 100% { transform: translate3d(0,0,0) rotate(6deg); }  50% { transform: translate3d(0,-32px,0) rotate(2deg); } }
@keyframes rmcFloatC { 0%, 100% { transform: translate3d(0,0,0) rotate(-9deg); } 50% { transform: translate3d(0,-18px,0) rotate(-4deg); } }

/* The hero sits clear — no scrim. Hero copy is navy rather than white, so it
   reads directly on a light photograph. If a darker image is ever used, the
   copy colours below are the thing to revisit. */
.rmc-site-hero-scrim { position: relative; isolation: isolate; }
.rmc-site-hero-scrim > .e-con-inner { position: relative; z-index: 3; }

html body .rmc-site-hero h1,
html body .rmc-site-hero h2,
html body .rmc-site-hero h3,
html body .rmc-site-hero .elementor-heading-title {
	color: var(--rmc-navy) !important;
	text-shadow: none !important;
}

html body .rmc-site-hero p,
html body .rmc-site-hero .elementor-widget-text-editor,
html body .rmc-site-hero .elementor-widget-text-editor * { color: var(--rmc-body) !important; }

html body .rmc-site-hero .elementor-icon,
html body .rmc-site-hero .elementor-icon svg,
html body .rmc-site-hero .elementor-icon i {
	color: var(--rmc-navy) !important;
	fill: var(--rmc-navy) !important;
}

html body .rmc-site-hero .elementor-icon-box-title,
html body .rmc-site-hero .elementor-icon-list-text { color: var(--rmc-navy) !important; }
html body .rmc-site-hero .elementor-icon-box-description { color: var(--rmc-body) !important; }

.rmc-vial-stage {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

.rmc-vial {
	position: absolute;
	pointer-events: none;
	will-change: transform;
	filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45));
}

.rmc-vial img { width: 100%; height: auto; display: block; }

.rmc-vial-1 { right: 3%;  top: 22%; width: 400px; animation: rmcFloatA 7s ease-in-out infinite; }
.rmc-vial-2 { right: 25%; top: 44%; width: 300px; animation: rmcFloatB 9s ease-in-out infinite; animation-delay: -2.5s; }
.rmc-vial-3 { right: 16%; top: 16%; width: 230px; animation: rmcFloatC 8s ease-in-out infinite; animation-delay: -4.5s; opacity: .9; }

@media (max-width: 1200px) {
	.rmc-vial-1 { width: 320px; right: 0; }
	.rmc-vial-2 { width: 240px; right: 21%; }
	.rmc-vial-3 { width: 185px; }
}

@media (max-width: 900px) {
	.rmc-vial-2, .rmc-vial-3 { display: none; }
	.rmc-vial-1 { width: 240px; right: -3%; top: auto; bottom: 0; opacity: .85; }

}

@media (prefers-reduced-motion: reduce) {
	.rmc-vial { animation: none !important; }
	html body ul.products li.product:hover { transform: none !important; }
	html body ul.products li.product:hover .woocommerce-LoopProduct-link img { transform: none !important; }
}


/* ==========================================================================
   HERO SPACING
   The inner container carried 90px of top padding while also centring its
   content, which pushed everything down before centring.
   ========================================================================== */

.rmc-site-hero > .e-con-inner { padding-top: 0 !important; }

/* Peptide Deals, Verified Reviews and the FAQ style themselves from the design
   tokens now — see rmc-peptide-deals v2.0.0 and their Elementor HTML widgets.
   The overrides that used to live here have been removed; each block is its own
   source of truth. */

/* ==========================================================================
   MOBILE
   Verified rules for small screens. The rail keeps its swipe behaviour but
   gains a visible affordance, since arrows are hidden on touch.
   ========================================================================== */

@media (max-width: 900px) {
	/* Cards show a slice of the next one so the row reads as scrollable */
	html body .rmc-rail ul.products li.product {
		flex: 0 0 72% !important;
		width: 72% !important;
		max-width: 72% !important;
	}

	html body .rmc-rail ul.products { gap: 14px !important; padding: 2px 2px 12px !important; }

	/* Edge fade hints at more content to the right */
	html body .rmc-rail::after { width: 40px; bottom: 12px; }

	/* A thin progress track under the rail, so the swipe is discoverable */
	html body .rmc-rail { padding-bottom: 14px; }

	html body .rmc-rail-progress {
		position: absolute;
		left: 2px;
		right: 2px;
		bottom: 0;
		height: 2px;
		background: var(--rmc-line);
		border-radius: 2px;
		overflow: hidden;
	}

	html body .rmc-rail-progress span {
		display: block;
		height: 100%;
		width: 30%;
		background: var(--rmc-accent);
		border-radius: 2px;
		transition: transform .1s linear;
	}
}

@media (min-width: 901px) {
	html body .rmc-rail-progress { display: none; }
}

/* ==========================================================================
   HERO ON SMALL SCREENS
   The vial row sits in the flow above the headline, so the space above and
   below it is real margin and stays equal at any width. Widths flex, so the
   three vials are always even and as large as the row allows.
   ========================================================================== */

@media (max-width: 767px) {
	html body .rmc-vial-stage {
		position: static !important;
		inset: auto !important;
		height: auto !important;
		display: flex !important;
		align-items: flex-end;
		justify-content: center;
		gap: 10px;
		margin: 22px 0 !important;
		padding: 0 12px !important;
		overflow: visible !important;
		z-index: 2;
	}

	/* vial-3 is excluded — it is hidden below 768px, and listing it here made
	   the outcome depend on which rule came last in the file. */
	html body .rmc-vial,
	html body .rmc-vial-1,
	html body .rmc-vial-2 {
		display: block !important;
		position: static !important;
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		flex: 1 1 0 !important;
		width: auto !important;
		max-width: 132px !important;
		opacity: 1 !important;
	}

	/* The stage occupies its own space now, so the clearance padding is gone. */
	html body .rmc-site-hero > .e-con-inner {
		padding-top: 0 !important;
		padding-bottom: 32px !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	html body .rmc-vial-1 { width: 250px !important; }
	html body .rmc-vial-2 { display: block !important; width: 190px !important; }
	html body .rmc-vial-3 { display: none !important; }
}

/* ==========================================================================
   SECTION TRANSITIONS
   Sections ease in once as they enter the viewport, and adjacent white
   sections are separated by a hairline that fades out at both ends.
   ========================================================================== */

.rmc-reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .7s cubic-bezier(.22, .7, .25, 1), transform .7s cubic-bezier(.22, .7, .25, 1);
	will-change: opacity, transform;
}

.rmc-reveal.is-in { opacity: 1; transform: none; }

.rmc-reveal-child {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity .6s cubic-bezier(.22, .7, .25, 1), transform .6s cubic-bezier(.22, .7, .25, 1);
}

.rmc-reveal.is-in .rmc-reveal-child { opacity: 1; transform: none; }
.rmc-reveal.is-in .rmc-reveal-child:nth-child(1) { transition-delay: .06s; }
.rmc-reveal.is-in .rmc-reveal-child:nth-child(2) { transition-delay: .12s; }
.rmc-reveal.is-in .rmc-reveal-child:nth-child(3) { transition-delay: .18s; }
.rmc-reveal.is-in .rmc-reveal-child:nth-child(4) { transition-delay: .24s; }

.rmc-section-edge { position: relative; }

.rmc-section-edge::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: min(1140px, 88%);
	height: 1px;
	background: linear-gradient(90deg,
		rgba(232, 235, 239, 0) 0%,
		#E8EBEF 18%,
		#E8EBEF 82%,
		rgba(232, 235, 239, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.rmc-reveal,
	.rmc-reveal-child {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   HEADER
   The cart toggle carries .elementor-button, so the control layer above was
   painting it as a solid navy button. It is an icon, not a call to action.
   ========================================================================== */

html body .elementor-location-header .elementor-nav-menu a.elementor-item {
	color: var(--rmc-navy) !important;
	font-family: var(--rmc-font) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	transition: color .16s ease !important;
}

html body .elementor-location-header .elementor-nav-menu a.elementor-item:hover,
html body .elementor-location-header .elementor-nav-menu a.elementor-item.elementor-item-active {
	color: var(--rmc-accent-text) !important;
}

/* Dropdown was square, shadowless, with a translucent black hover wash */
html body .elementor-location-header .elementor-nav-menu--dropdown,
html body .elementor-location-header ul.sub-menu {
	background: var(--rmc-white) !important;
	border: 1px solid var(--rmc-line) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(23, 50, 77, .10), 0 2px 6px rgba(23, 50, 77, .05) !important;
	padding: 6px !important;
	margin-top: 8px !important;
	overflow: hidden;
}

html body .elementor-location-header .elementor-nav-menu--dropdown a,
html body .elementor-location-header ul.sub-menu a {
	color: var(--rmc-body) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	padding: 10px 14px !important;
	border-radius: 6px !important;
	background: transparent !important;
	transition: background-color .16s ease, color .16s ease !important;
}

html body .elementor-location-header .elementor-nav-menu--dropdown a:hover,
html body .elementor-location-header .elementor-nav-menu--dropdown a:focus,
html body .elementor-location-header ul.sub-menu a:hover,
html body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active {
	background: #F4F7FB !important;
	color: var(--rmc-navy) !important;
}

/* Icon cluster: one size, one tap target. These were 20px and 82px wide. */
html body .elementor-location-header .elementor-widget-icon svg,
html body .elementor-location-header .elementor-icon svg,
html body .elementor-location-header .elementor-menu-cart__toggle_button svg {
	width: 20px !important;
	height: 20px !important;
	color: var(--rmc-navy) !important;
	fill: var(--rmc-navy) !important;
}

html body .elementor-location-header .elementor-widget-icon .elementor-icon,
html body .elementor-location-header .elementor-menu-cart__toggle_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--rmc-radius) !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--rmc-navy) !important;
	box-shadow: none !important;
	transform: none !important;
	filter: none !important;
	transition: background-color .16s ease !important;
}

html body .elementor-location-header .elementor-widget-icon .elementor-icon:hover,
html body .elementor-location-header .elementor-menu-cart__toggle_button:hover {
	background: #F4F7FB !important;
	color: var(--rmc-navy) !important;
	transform: none !important;
	filter: none !important;
}

/* Count bubble tucked onto the icon rather than widening the control */
html body .elementor-location-header .elementor-button-icon-qty {
	background: var(--rmc-accent) !important;
	color: #412402 !important;                 /* white is 2.53:1 on copper */
	font-size: 10px !important;
	font-weight: 600 !important;
	min-width: 16px !important;
	height: 16px !important;
	line-height: 16px !important;
	top: 2px !important;
	right: 2px !important;
	box-shadow: none !important;
}

/* Logo: 60px puts it at ~62% of the row, which reads balanced. */
html body .elementor-location-header .elementor-widget-theme-site-logo img,
html body .elementor-location-header img[src*="logo"] {
	max-height: 60px !important;
	width: auto !important;
	height: auto !important;
}

@media (max-width: 1024px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 48px !important; }
}

/* The logo is 2.3:1, so a 44px height is ~101px wide. That plus three 36px
   targets and padding comes to ~341px, which clears a 360px screen. */
@media (max-width: 767px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 44px !important; }

	html body .elementor-location-header .elementor-widget-icon .elementor-icon,
	html body .elementor-location-header .elementor-menu-cart__toggle_button,
	html body .elementor-location-header .elementor-menu-toggle {
		width: 36px !important;
		height: 36px !important;
	}

	html body .elementor-location-header .elementor-widget-icon svg,
	html body .elementor-location-header .elementor-menu-cart__toggle_button svg,
	html body .elementor-location-header .elementor-menu-toggle svg {
		width: 19px !important;
		height: 19px !important;
	}

	html body .elementor-location-header .elementor-nav-menu--dropdown a {
		padding: 12px 14px !important;
		font-size: 15px !important;
	}
}

/* Three 104px vials need 332px; a 320px screen only offers 296px inside the
   stage padding, so they step down rather than overflow. */
@media (max-width: 359px) {
	html body .rmc-vial-stage { gap: 8px; margin: 18px 0 !important; }
}

/* Below 360px the header cluster also runs out of room; the account icon is
   reachable from the menu, so it yields first. */
@media (max-width: 359px) {
	html body .elementor-location-header .elementor-widget-icon { display: none !important; }
	html body .elementor-location-header .elementor-widget-theme-site-logo img { max-height: 40px !important; }
}


/* ==========================================================================
   FIBOSEARCH
   The magnifier is a submit button, so the control layer above was painting it
   as a solid navy block inside the field. It is excluded there and styled as
   an icon here.
   ========================================================================== */

html body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	border: 1px solid var(--rmc-line) !important;
	border-radius: var(--rmc-radius) !important;
	background: var(--rmc-white) !important;
	box-shadow: none !important;
}

html body .dgwt-wcas-search-wrapp.dgwt-wcas-focused .dgwt-wcas-sf-wrapp {
	border-color: var(--rmc-navy) !important;
	box-shadow: 0 0 0 3px rgba(23, 50, 77, .07) !important;
}

html body .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--rmc-font) !important;
	font-size: 15px !important;
	color: var(--rmc-navy) !important;
	padding: 0 8px 0 16px !important;
}

html body .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input:focus {
	box-shadow: none !important;
	outline: none !important;
}

html body .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input::placeholder {
	color: var(--rmc-muted) !important;
	opacity: 1;
}

html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--rmc-navy) !important;
	width: 44px !important;
	height: 38px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--rmc-radius) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transform: none !important;
	filter: none !important;
	transition: color .16s ease, background-color .16s ease !important;
}

html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit:hover {
	background: #F4F7FB !important;
	color: var(--rmc-accent-text) !important;
	transform: none !important;
}

html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit svg,
html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit path {
	width: 18px;
	height: 18px;
	fill: currentColor !important;
}

/* Results panel matches the header dropdown */
html body .dgwt-wcas-suggestions-wrapp {
	border: 1px solid var(--rmc-line) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(23, 50, 77, .10), 0 2px 6px rgba(23, 50, 77, .05) !important;
	padding: 6px !important;
	margin-top: 8px !important;
	font-family: var(--rmc-font) !important;
}

html body .dgwt-wcas-suggestion {
	border-radius: 6px !important;
	padding: 10px 12px !important;
	border: 0 !important;
}

html body .dgwt-wcas-suggestion:hover,
html body .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
	background: #F4F7FB !important;
}

html body .dgwt-wcas-st--title,
html body .dgwt-wcas-st strong { color: var(--rmc-navy) !important; font-weight: 500 !important; }
html body .dgwt-wcas-sp,
html body .dgwt-wcas-sp .amount { color: var(--rmc-accent-text) !important; font-weight: 500 !important; }
html body .dgwt-wcas-st-woo-cat,
html body .dgwt-wcas-si + .dgwt-wcas-content .dgwt-wcas-st-woo-desc { color: var(--rmc-muted) !important; }


/* ==========================================================================
   ABOUT US SECTION
   This section was the only one on the homepage with a 19px copper eyebrow,
   a 600 title and — most visibly — a 700 weight body paragraph. Every widget
   also sat at zero margin, so the block had no rhythm.
   Scoped by section ID; if that section is rebuilt in Elementor this needs
   re-pointing.
   ========================================================================== */

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading h4.elementor-heading-title,
html body.home .rmc-about .elementor-widget-heading h4.elementor-heading-title {
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--rmc-muted) !important;
	line-height: 1.4 !important;
}

/* Weight was 400 when this block was tamed (titles were 400 elsewhere then);
   the site standard is now 600 — see SECTION TITLE CONSISTENCY below. */
html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading h2.elementor-heading-title,
html body.home .rmc-about .elementor-widget-heading h2.elementor-heading-title {
	font-size: 36px !important;
	font-weight: 600 !important;
	letter-spacing: -.03em !important;
	line-height: 1.12 !important;
}

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-text-editor,
html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-text-editor p,
html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-text-editor strong,
html body.home .rmc-about .elementor-widget-text-editor,
html body.home .rmc-about .elementor-widget-text-editor p,
html body.home .rmc-about .elementor-widget-text-editor strong {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: var(--rmc-body) !important;
}

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading:first-of-type,
html body.home .rmc-about .elementor-widget-heading:first-of-type { margin-bottom: 14px !important; }

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading + .elementor-widget-heading,
html body.home .rmc-about .elementor-widget-heading + .elementor-widget-heading { margin-bottom: 18px !important; }

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-divider,
html body.home .rmc-about .elementor-widget-divider { margin: 0 0 22px !important; }

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-text-editor,
html body.home .rmc-about .elementor-widget-text-editor { margin-bottom: 32px !important; }

@media (max-width: 900px) {
	html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading h2.elementor-heading-title,
	html body.home .rmc-about .elementor-widget-heading h2.elementor-heading-title { font-size: 28px !important; }

	/* Stacked, the block needs its own rhythm — the desktop two-column layout
	   was providing some of the separation. */
	html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading:first-of-type,
	html body.home .rmc-about .elementor-widget-heading:first-of-type { margin-bottom: 12px !important; }

	html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading + .elementor-widget-heading,
	html body.home .rmc-about .elementor-widget-heading + .elementor-widget-heading { margin-bottom: 16px !important; }

	html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-divider,
	html body.home .rmc-about .elementor-widget-divider { margin: 0 0 20px !important; }

	html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-text-editor,
	html body.home .rmc-about .elementor-widget-text-editor { margin-bottom: 28px !important; }

	html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-image,
	html body.home .rmc-about .elementor-widget-image { margin-top: 4px !important; }
}

/* ==========================================================================
   PUNCH LIST — header, claim pages, COA library, category pills
   ========================================================================== */

/* ---- Logo -------------------------------------------------------------
   1499x651 is a 2.3:1 mark, so height drives width. At 60px it rendered
   138px wide, which reads small beside a 317px menu. */

html body .elementor-location-header .elementor-widget-theme-site-logo img,
html body .elementor-location-header img[src*="logo"] { max-height: 72px !important; }

@media (max-width: 1024px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 58px !important; }
}

@media (max-width: 767px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 52px !important; }
}

@media (max-width: 359px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 44px !important; }
}

/* ---- Icon cluster -----------------------------------------------------
   The controls were butted together with no breathing room, so the
   hamburger, account and cart read as one squashed block. */

html body .elementor-location-header .elementor-widget-icon,
html body .elementor-location-header .elementor-widget-woocommerce-menu-cart,
html body .elementor-location-header .elementor-widget-nav-menu { margin: 0 !important; }

html body .elementor-location-header .elementor-widget-icon + .elementor-widget-woocommerce-menu-cart,
html body .elementor-location-header .elementor-widget-woocommerce-menu-cart + .elementor-widget-icon { margin-left: 6px !important; }

@media (max-width: 1024px) {
	html body .elementor-location-header .e-con-inner,
	html body .elementor-location-header .e-con.e-parent > .e-con-inner { gap: 10px !important; }

	html body .elementor-location-header .elementor-widget-icon .elementor-icon,
	html body .elementor-location-header .elementor-menu-cart__toggle_button,
	html body .elementor-location-header .elementor-menu-toggle {
		width: 40px !important;
		height: 40px !important;
	}

	html body .elementor-location-header .elementor-widget-icon + .elementor-widget-woocommerce-menu-cart,
	html body .elementor-location-header .elementor-widget-woocommerce-menu-cart + .elementor-widget-icon { margin-left: 2px !important; }
}

/* ---- Cart count -------------------------------------------------------
   The bubble was 16px on a 20px icon — 80% of it, which is why it read as
   covering the cart rather than sitting on it. */

html body .elementor-location-header .elementor-button-icon-qty {
	background: var(--rmc-accent) !important;
	color: #412402 !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	line-height: 14px !important;
	min-width: 14px !important;
	width: 14px !important;
	height: 14px !important;
	padding: 0 !important;
	top: -3px !important;
	right: -4px !important;
	inset: auto -4px auto auto !important;
	border: 1.5px solid var(--rmc-white) !important;
	box-shadow: none !important;
}

/* ---- Category pills ---------------------------------------------------
   27px pills in #17387D, a retired blue. Brought onto the button system. */

html body .e-n-tabs .e-n-tab-title,
html body .e-n-tabs button[role="tab"] {
	border-radius: var(--rmc-radius) !important;
	background: var(--rmc-white) !important;
	background-color: var(--rmc-white) !important;
	color: var(--rmc-navy) !important;
	border: 1px solid var(--rmc-line) !important;
	font-family: var(--rmc-font) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	padding: 11px 20px !important;
	box-shadow: none !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

html body .e-n-tabs .e-n-tab-title:hover,
html body .e-n-tabs button[role="tab"]:hover {
	border-color: var(--rmc-line-strong) !important;
	background: #F7F9FC !important;
}

html body .e-n-tabs .e-n-tab-title[aria-selected="true"],
html body .e-n-tabs button[role="tab"][aria-selected="true"] {
	background: var(--rmc-navy) !important;
	background-color: var(--rmc-navy) !important;
	border-color: var(--rmc-navy) !important;
	color: var(--rmc-white) !important;
	font-weight: 600 !important;
}

html body .e-n-tabs .e-n-tabs-heading { gap: 10px !important; flex-wrap: wrap; }

@media (max-width: 767px) {
	html body .e-n-tabs .e-n-tab-title,
	html body .e-n-tabs button[role="tab"] { padding: 10px 16px !important; font-size: 12px !important; }
}

/* ---- Claim and status pages ------------------------------------------
   These are plain PHP templates with no layout, so the title sat 60px under
   the header with nothing framing it. */

body.page .rmc-claim-page,
body.page-template-default #content .rmc-claim-wrap { max-width: 760px; margin: 0 auto; }

body.page:not(.home):not(.woocommerce-page) #content > .rmc-claim-page,
body.page:not(.home):not(.woocommerce-page) .site-main > form { padding-top: 0; }

body.page:not(.home):not(.woocommerce-page) #content,
body.page:not(.home):not(.woocommerce-page) .site-main { padding-top: 32px !important; }

/* Interior pages sat off-grid: full-bleed container, titles flush against
   the viewport edge, ~200px of stacked padding above them, and 42px/400
   titles from the pre-consistency era. One aligned 1140px column and the
   site-wide title voice instead. Elementor-built pages and cart/checkout
   are excluded — they manage their own layout. (8.3.5) */
html body.page:not(.home):not(.woocommerce-page):not(.woocommerce-cart):not(.woocommerce-checkout) .ast-container {
	max-width: 1140px !important;
	margin: 0 auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

html body.page:not(.home):not(.woocommerce-page) .site-content { padding-top: 0 !important; }
html body.page:not(.home):not(.woocommerce-page) .content-area { margin-top: 24px !important; }

body.page:not(.home):not(.woocommerce-page) h1 {
	font-size: 36px !important;
	font-weight: 600 !important;
	letter-spacing: -.03em !important;
	line-height: 1.1 !important;
	color: var(--rmc-navy) !important;
	margin: 0 0 24px !important;
}

/* The claim form is a centred 760px column — its title aligns with it. */
html body.page-id-7169 .site-main h1 { max-width: 760px; margin: 0 auto 24px !important; }

body.page:not(.home):not(.woocommerce-page) h1 + p {
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--rmc-body) !important;
	margin: 0 0 36px !important;
}

@media (max-width: 767px) {
	body.page:not(.home):not(.woocommerce-page) #content,
	body.page:not(.home):not(.woocommerce-page) .site-main { padding-top: 44px !important; }
	body.page:not(.home):not(.woocommerce-page) h1 { font-size: 30px !important; }
}


/* ---- FiboSearch on mobile ---------------------------------------------
   The plugin's mobile layout floats the magnifier left of the field and
   restyles it, so the desktop rules above do not reach it. */

@media (max-width: 767px) {
	html body .dgwt-wcas-search-wrapp,
	html body .dgwt-wcas-search-wrapp .dgwt-wcas-search-form { width: 100% !important; }

	html body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		min-height: 50px;
		padding: 0 !important;
	}

	/* the field leads, the icon sits at the trailing edge */
	html body .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input {
		order: 1 !important;
		flex: 1 1 auto !important;
		width: auto !important;
		float: none !important;
		font-size: 16px !important;      /* under 16px iOS zooms the page in */
		padding: 0 8px 0 14px !important;
	}

	/* Positioning is handled once, globally — see SEARCH FIELD below. */

	html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit svg,
	html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit path {
		width: 18px !important;
		height: 18px !important;
		fill: currentColor !important;
		transform: none !important;
	}

	/* the full-screen overlay the plugin opens on tap */
	html body .dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
		border-radius: var(--rmc-radius) !important;
		border: 1px solid var(--rmc-line) !important;
	}

	html body .dgwt-wcas-om-bar { background: var(--rmc-white) !important; }
	html body .dgwt-wcas-om-return svg { fill: var(--rmc-navy) !important; }
}


/* ==========================================================================
   HEADER ORDER
   The row's children are the widgets themselves — the widget classes sit on
   them directly, not on descendants. Ordering by widget class rather than by
   position means rearranging the header in Elementor cannot silently invert
   this the way nth-child rules did.

   Desktop  logo · menu · cart · profile
   Mobile   menu · logo · cart · profile
   ========================================================================== */

html body .elementor-location-header .e-con.e-parent:last-child {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	flex-wrap: nowrap;
}

/* The menu previously stretched to fill the row, which pushed it away from
   the logo and stranded the cart and profile at the far edge. It now sits
   next to the logo, and a single auto margin pushes the icons right. */
html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-theme-site-logo { order: 1 !important; flex: 0 0 auto !important; }

/* The menu takes the space between the logo and the icons, with its links
   centred in it. Pinning it beside the logo left a large void before the
   cart; letting it stretch without centring did the same in reverse. */
html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-nav-menu {
	order: 2 !important;
	flex: 1 1 auto !important;
	margin-left: 0 !important;
}

html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-nav-menu .elementor-nav-menu {
	justify-content: center !important;
}

html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-woocommerce-menu-cart {
	order: 3 !important;
	flex: 0 0 auto !important;
	margin-left: 0 !important;
}

html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-icon {
	order: 4 !important;
	flex: 0 0 auto !important;
	margin-left: 4px !important;
}

@media (max-width: 1024px) {
	/* the hamburger leads, the logo sits beside it */
	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-nav-menu {
		order: 1 !important;
		flex: 0 0 auto !important;
		margin-left: 0 !important;
	}

	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-theme-site-logo {
		order: 2 !important;
		flex: 1 1 auto !important;
		margin-left: 10px !important;
	}

	/* the cart and profile were sitting on top of each other */
	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-woocommerce-menu-cart {
		margin-left: auto !important;
		margin-right: 4px !important;
	}

	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-icon { margin-left: 4px !important; }

	html body .elementor-location-header .elementor-widget-theme-site-logo,
	html body .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container { text-align: left !important; }
}

/* ==========================================================================
   VIAL SIZING — a step up on both layouts
   ========================================================================== */

.rmc-vial-1 { width: 460px; }
.rmc-vial-2 { width: 345px; }
.rmc-vial-3 { width: 265px; }

@media (max-width: 1200px) {
	.rmc-vial-1 { width: 370px; }
	.rmc-vial-2 { width: 275px; }
	.rmc-vial-3 { width: 210px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	html body .rmc-vial-1 { width: 290px !important; }
	html body .rmc-vial-2 { display: block !important; width: 220px !important; }
	html body .rmc-vial-3 { display: none !important; }
}

/* Tighter stage padding and gap lets each vial take more of the row. */
/* Three across a phone caps each vial near 119px however the padding is
   tuned. Two are shown instead, which roughly doubles the size. */
@media (max-width: 767px) {
	html body .rmc-vial-stage { gap: 12px !important; padding: 0 10px !important; }

	html body .rmc-vial-1,
	html body .rmc-vial-2 { display: block !important; max-width: 210px !important; }

	html body .rmc-vial-3 { display: none !important; }
}

@media (max-width: 359px) {
	html body .rmc-vial-stage { gap: 6px !important; padding: 0 6px !important; }
}


/* ==========================================================================
   PRICE WRAPPING
   WooCommerce appends screen-reader text to price ranges — "Price range:
   $24.95 through $80.00" — which was rendering visibly and pushing card
   prices onto two and three lines.
   ========================================================================== */

html body ul.products li.product .price .screen-reader-text,
html body .e-loop-item .price .screen-reader-text,
html body .rmc-card-foot .price .screen-reader-text,
html body .rmc-deals-wrap .price .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

html body ul.products li.product .rmc-card-foot .price,
html body .e-loop-item .rmc-card-foot .price {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
}

@media (max-width: 600px) {
	html body ul.products li.product .rmc-card-foot .price,
	html body ul.products li.product .rmc-card-foot .price bdi,
	html body .e-loop-item .rmc-card-foot .price,
	html body .e-loop-item .rmc-card-foot .price bdi { font-size: 14px !important; }
}


/* ==========================================================================
   SHOP GRID ON SMALL SCREENS
   The Loop Grid is fixed at four columns, so four 259px cards could not fit a
   phone. Card heights also varied with the number of spec lines, because the
   footer sat wherever the content ended.
   ========================================================================== */

.rmc-shop-active .elementor-loop-container.elementor-grid > .e-loop-item > .e-con {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}

/* Pins the footer to the bottom whatever the meta line count */
.rmc-shop-active .e-loop-item .rmc-card-foot { margin-top: auto !important; }
.rmc-shop-active .elementor-loop-container.elementor-grid > .e-loop-item { display: flex; }

/* Rows size to their own content. An earlier grid-auto-rows: 1fr made every
   row match the tallest row on the page, which left short cards with a large
   empty area under the price. Cards still stretch to match their neighbours
   within a row, which is the part that matters visually. */
html body:not(.rmc-pdp-active) ul.products li.product { height: 100%; }

@media (max-width: 1024px) {
	html body .rmc-shop-active .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}
}

@media (max-width: 767px) {
	html body .rmc-shop-active .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}

	html body .rmc-shop-active .e-loop-item .elementor-widget-woocommerce-product-title { padding: 14px 14px 0 !important; }
	html body .rmc-shop-active .e-loop-item .rmc-card-meta { padding: 0 14px !important; }
	html body .rmc-shop-active .e-loop-item .rmc-card-foot { margin: 12px 14px 14px !important; }
	html body .rmc-shop-active .e-loop-item .product_title { font-size: 14px !important; }
	html body .rmc-shop-active .e-loop-item .rmc-card-meta span { font-size: 12px !important; }
}

@media (max-width: 420px) {
	html body .rmc-shop-active .elementor-loop-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* The category tabs and their panels must not force the page wider */
html body .e-n-tabs,
html body .e-n-tabs-heading,
html body .e-n-tabs-content { max-width: 100% !important; }

@media (max-width: 767px) {
	html body .e-n-tabs-heading {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	html body .e-n-tabs-heading::-webkit-scrollbar { display: none; }
	html body .e-n-tabs .e-n-tab-title { flex: 0 0 auto !important; white-space: nowrap; }
}

/* ==========================================================================
   MOBILE HEADER — corrections from a device screenshot
   ========================================================================== */

@media (max-width: 1024px) {
	/* The cart badge was overlapping the profile icon. */
	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-woocommerce-menu-cart {
		margin-left: auto !important;
		margin-right: 14px !important;
	}

	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-icon { margin-left: 0 !important; }

	/* Sits inside the icon rather than spilling past its right edge. */
	html body .elementor-location-header .elementor-button-icon-qty {
		top: -2px !important;
		right: -2px !important;
		inset: auto -2px auto auto !important;
		width: 15px !important;
		min-width: 15px !important;
		height: 15px !important;
		line-height: 15px !important;
		font-size: 9px !important;
	}

	/* The hamburger was a solid navy block against two outlined icons. */
	/* Border removed — the hamburger is styled once, globally. */

	html body .elementor-location-header .elementor-menu-toggle i,
	html body .elementor-location-header .elementor-menu-toggle svg {
		color: var(--rmc-navy) !important;
		fill: var(--rmc-navy) !important;
		font-size: 19px !important;
		width: 19px !important;
		height: 19px !important;
	}

	html body .elementor-location-header .elementor-menu-toggle:hover { background: #F4F7FB !important; }

	/* A little more presence for the mark. */
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 62px !important; }
}

@media (max-width: 767px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 58px !important; }

	html body .elementor-location-header .e-con.e-parent:last-child {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

@media (max-width: 359px) {
	html body .elementor-location-header .elementor-widget-theme-site-logo img,
	html body .elementor-location-header img[src*="logo"] { max-height: 46px !important; }

	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-woocommerce-menu-cart { margin-right: 8px !important; }
}

/* ==========================================================================
   OVERFLOW CONTAINMENT
   A single element wider than the viewport makes the whole document wide,
   which is what lets the page be pinch-zoomed out. Scrolling marquees are the
   usual cause: they duplicate their content to animate, so the track is wider
   than the screen by design and must be clipped by its parent.
   ========================================================================== */

html, body { max-width: 100%; overflow-x: hidden !important; }

html body .elementor-location-header .e-con.e-parent:first-child,
html body [class*="marquee"],
html body [class*="ticker"],
html body [class*="announcement"],
html body .rmc-scroll-wrapper {
	overflow: hidden !important;
	max-width: 100% !important;
}

html body .rmc-scroll-track,
html body [class*="marquee"] > *,
html body [class*="ticker"] > * { will-change: transform; }

/* Nothing in the page body may exceed the viewport. */
html body #page,
html body #content,
html body .site-main,
html body .elementor-location-footer,
html body .e-con.e-parent { max-width: 100% !important; }

@media (max-width: 1024px) {
	/* ---- Cart and profile were still crowding each other ---- */
	html body .elementor-location-header .e-con.e-parent:last-child > .elementor-widget-woocommerce-menu-cart {
		margin-left: auto !important;
		margin-right: 26px !important;
	}

	html body .elementor-location-header .elementor-button-icon-qty {
		top: -1px !important;
		right: 0 !important;
		inset: auto 0 auto auto !important;
	}
}

@media (max-width: 767px) {
	/* ---- Two cards per row, sized to actually fit ---- */
	html body .rmc-shop-active .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	html body .rmc-shop-active #content,
	html body .rmc-shop-active .site-main,
	html body .rmc-shop-active .e-con.e-parent > .e-con-inner {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* Everything inside the card scales down so nothing spills. */
	html body .rmc-shop-active .e-loop-item > .e-con { border-radius: 14px !important; }

	html body .rmc-shop-active .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container { max-height: 150px; }
	html body .rmc-shop-active .e-loop-item .elementor-widget-theme-post-featured-image img { max-height: 140px; }

	html body .rmc-shop-active .e-loop-item .elementor-widget-woocommerce-product-title { padding: 12px 10px 0 !important; }
	html body .rmc-shop-active .e-loop-item .product_title { font-size: 13px !important; line-height: 1.3 !important; }

	html body .rmc-shop-active .e-loop-item .rmc-card-meta { padding: 0 10px !important; gap: 1px; }
	html body .rmc-shop-active .e-loop-item .rmc-card-meta span { font-size: 11px !important; line-height: 1.4 !important; }

	html body .rmc-shop-active .e-loop-item .rmc-card-foot {
		margin: 10px 10px 10px !important;
		padding-top: 10px !important;
		gap: 6px !important;
	}

	html body .rmc-shop-active .e-loop-item .rmc-card-foot .price,
	html body .rmc-shop-active .e-loop-item .rmc-card-foot .price bdi { font-size: 12px !important; }

	html body .rmc-shop-active .e-loop-item .rmc-card-cart {
		width: 30px !important;
		height: 30px !important;
	}

	html body .rmc-shop-active .e-loop-item .rmc-card-cart svg { width: 14px; height: 14px; }

	html body .rmc-shop-active .e-loop-item.sale > .e-con::after {
		font-size: 8px !important;
		padding: 4px 8px !important;
		top: 8px !important;
		left: 8px !important;
	}
}

@media (max-width: 359px) {
	html body .rmc-shop-active .elementor-loop-container.elementor-grid { gap: 8px !important; }
	html body .rmc-shop-active .e-loop-item .product_title { font-size: 12px !important; }
	html body .rmc-shop-active .e-loop-item .elementor-widget-theme-post-featured-image img { max-height: 120px; }
}

/* ==========================================================================
   HARD OVERFLOW CONTAINMENT
   overflow-x: hidden on html/body is defeated by any descendant that
   establishes its own scroll context, and it also breaks position: sticky.
   clip does not, and it cannot be escaped by a wide child.
   ========================================================================== */

html {
	overflow-x: clip;
	max-width: 100vw;
}

body {
	overflow-x: clip;
	max-width: 100vw;
	position: relative;
}

/* Every top-level block is held to the viewport, so one wide element can no
   longer stretch the document and enable pinch-zoom-out. */
body > *,
body > * > .elementor,
body > * > .elementor > .e-con,
#page > *,
#content > * { max-width: 100vw; }

@media (max-width: 1024px) {
	html body .e-con,
	html body .e-con-inner,
	html body .elementor-widget,
	html body .elementor-widget-container { max-width: 100% !important; min-width: 0 !important; }

	/* Grids and flex rows shrink rather than forcing a minimum track width. */
	html body .elementor-loop-container,
	html body .elementor-loop-container > * ,
	html body ul.products,
	html body ul.products > li { min-width: 0 !important; }

	html body img,
	html body video,
	html body iframe,
	html body table { max-width: 100% !important; }
}

/* ==========================================================================
   CARD FOOTER ON NARROW CARDS
   A price range like "$24.95 – $80.00" plus a 30px action does not fit one
   row in a half-width card, and the action was being pushed outside the card.
   The row wraps instead: price keeps its full size on its own line, the
   action sits beneath it on the right.
   ========================================================================== */

@media (max-width: 767px) {
	html body .rmc-shop-active .e-loop-item .rmc-card-foot,
	html body ul.products li.product .rmc-card-foot,
	html body .rmc-deals-wrap .rmc-card-foot {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		justify-content: flex-start;
		gap: 8px !important;
		overflow: hidden;
	}

	/* Price takes the full row so it never truncates or shrinks. */
	html body .rmc-shop-active .e-loop-item .rmc-card-foot .price,
	html body ul.products li.product .rmc-card-foot .price,
	html body .rmc-deals-wrap .rmc-card-foot .price {
		flex: 1 1 100% !important;
		min-width: 0 !important;
		white-space: nowrap !important;
		overflow: visible !important;
		text-overflow: clip !important;
		font-size: 14px !important;
	}

	/* Action drops to the next line, aligned right, fully inside the card. */
	html body .rmc-shop-active .e-loop-item .rmc-card-cart,
	html body ul.products li.product .rmc-card-cart,
	html body .rmc-deals-wrap .rmc-card-cart {
		margin-left: auto !important;
		margin-right: 0 !important;
		flex: 0 0 auto !important;
		width: 34px !important;
		height: 34px !important;
	}

	html body .rmc-shop-active .e-loop-item .rmc-card-cart svg,
	html body ul.products li.product .rmc-card-cart svg { width: 16px; height: 16px; }

	/* The card must clip anything that still tries to escape. */
	html body .rmc-shop-active .e-loop-item > .e-con,
	html body ul.products li.product { overflow: hidden !important; }

	/* The sale chip sits on the image, which is inside the clipped card. */
	html body .rmc-shop-active .e-loop-item.sale > .e-con::after { z-index: 6; }
}




/* ==========================================================================
   CARD FOOTER WRAP — final
   Applies wherever the card is narrow enough that a price range and the
   action cannot share a row. An earlier 560-767px "keep one row" override
   was cancelling this on larger phones; it has been removed.
   ========================================================================== */

@media (max-width: 900px) {
	html body .rmc-shop-active .elementor-loop-container .e-loop-item .rmc-card-foot,
	html body:not(.rmc-pdp-active) ul.products li.product .rmc-card-foot,
	html body .rmc-deals-wrap .rmc-card .rmc-card-foot {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		row-gap: 10px !important;
		column-gap: 8px !important;
	}

	html body .rmc-shop-active .elementor-loop-container .e-loop-item .rmc-card-foot > .price,
	html body:not(.rmc-pdp-active) ul.products li.product .rmc-card-foot > .price,
	html body .rmc-deals-wrap .rmc-card .rmc-card-foot > .price {
		flex: 1 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		white-space: nowrap !important;
		overflow: visible !important;
	}

	html body .rmc-shop-active .elementor-loop-container .e-loop-item .rmc-card-foot > .rmc-card-cart,
	html body:not(.rmc-pdp-active) ul.products li.product .rmc-card-foot > .rmc-card-cart,
	html body .rmc-deals-wrap .rmc-card .rmc-card-foot > .rmc-card-cart {
		flex: 0 0 auto !important;
		margin-left: auto !important;
		margin-right: 0 !important;
	}
}

/* ==========================================================================
   SEARCH FIELD — icon placement
   The plugin positions its submit button absolutely but not against the right
   edge, so on wide fields the magnifier landed mid-field, immediately after
   the placeholder text. Pinned right at every width, with room reserved so
   typed text never runs under it.
   ========================================================================== */

html body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	position: relative !important;
	display: flex !important;
	align-items: center;
}

html body .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input {
	flex: 1 1 auto !important;
	width: 100% !important;
	padding-right: 52px !important;
}

html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit {
	position: absolute !important;
	right: 6px !important;
	left: auto !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	width: 40px !important;
	height: 40px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--rmc-navy) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

html body .dgwt-wcas-search-wrapp button.dgwt-wcas-search-submit:hover {
	background: #F4F7FB !important;
	border-radius: var(--rmc-radius) !important;
	color: var(--rmc-accent-text) !important;
}

/* ==========================================================================
   HAMBURGER
   It was a filled navy block with 3px corners; an earlier attempt gave it an
   outlined box instead. Neither matched the plain stroke icons beside it, so
   it is now just the icon.
   ========================================================================== */

/* Appearance only — display is left to Elementor, which hides the toggle above
   its breakpoint. Forcing display here put a hamburger on desktop alongside
   the full menu. */
html body .elementor-location-header .elementor-menu-toggle,
html body .elementor-location-header div.elementor-menu-toggle,
html body .elementor-menu-toggle {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: var(--rmc-radius) !important;
	color: var(--rmc-navy) !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	box-shadow: none !important;
	align-items: center;
	justify-content: center;
	transition: background-color .16s ease !important;
}

html body .elementor-location-header .elementor-menu-toggle:hover { background: #F4F7FB !important; }

html body .elementor-location-header .elementor-menu-toggle i,
html body .elementor-location-header .elementor-menu-toggle svg,
html body .elementor-location-header .elementor-menu-toggle .eicon-menu-bar {
	color: var(--rmc-navy) !important;
	fill: var(--rmc-navy) !important;
	font-size: 22px !important;
	width: 22px !important;
	height: 22px !important;
}

/* ==========================================================================
   HEADER EDGE
   The header row carried box-shadow: rgba(0,0,0,.25) 0 0 3px — no offset, so
   it drew a hard grey halo on all four sides and read as a box outline. A
   single hairline underneath does the job of separating header from page.
   ========================================================================== */

html body .elementor-location-header .e-con.e-parent,
html body .elementor-location-header .e-con.e-parent > .e-con-inner {
	box-shadow: none !important;
	outline: none !important;
}

html body .elementor-location-header .e-con.e-parent:last-child {
	border-bottom: 1px solid var(--rmc-line) !important;
}

/* The announcement bar sits above it and needs no separator of its own. */
html body .elementor-location-header .e-con.e-parent:first-child {
	border-bottom: 0 !important;
}

/* ==========================================================================
   STRUCK-THROUGH PRICES
   WooCommerce applies opacity: .5 to <del>, which halved the token colour to
   roughly 2.4:1 and made the original price read as washed-out tan beside the
   copper sale price. The original price is content, so it carries its own
   colour at full opacity instead.
   ========================================================================== */

html body .woocommerce del,
html body ul.products li.product del,
html body .rmc-card-foot del,
html body .rmc-deals-wrap del,
html body .rmc-pdp-buy del,
html body del.woocommerce-Price-amount,
html body del bdi { opacity: 1 !important; }

/* text-decoration is set in the STRIKETHROUGH POSITION block below, which
   replaces the native line with a centred one. */
html body ul.products li.product del,
html body ul.products li.product del bdi,
html body .rmc-card-foot del,
html body .rmc-card-foot del bdi {
	color: var(--rmc-faint) !important;
	font-weight: 400 !important;
}

/* ==========================================================================
   STRIKETHROUGH POSITION
   IBM Plex Sans sets its strikethrough for lowercase x-height, but prices are
   all digits, which are taller — so the browser's line-through sat high on
   the numerals. The line is drawn instead, centred on the digit box.
   ========================================================================== */

html body ul.products li.product del,
html body .rmc-card-foot del,
html body .rmc-deals-wrap del,
html body .rmc-pdp-buy del,
html body .rmc-tiers del {
	text-decoration: none !important;
	position: relative;
	display: inline-block;
}

html body ul.products li.product del::after,
html body .rmc-card-foot del::after,
html body .rmc-deals-wrap del::after,
html body .rmc-pdp-buy del::after,
html body .rmc-tiers del::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 0.5px);
	height: 1px;
	background: currentColor;
	opacity: .85;
	pointer-events: none;
}

html body ul.products li.product del bdi,
html body .rmc-card-foot del bdi,
html body .rmc-deals-wrap del bdi,
html body .rmc-pdp-buy del bdi { text-decoration: none !important; }

/* ==========================================================================
   SECTION TITLE CONSISTENCY (2026-08-07)
   Homepage section titles disagreed with each other: Popular Peptides and
   Why-Choose rendered 36px/600/navy while Peptide Deals (a <p> in the deals
   plugin) was 36px/400/grey and the reviews/FAQ widget titles were 400.
   One voice: 36px / 600 / navy. Elementor headings are scoped to the home
   page to avoid restyling inner pages; the three widget title classes are
   ours and appear only as section titles, so they are safe globally.
   ========================================================================== */

html body.home h2.elementor-heading-title,
html body .rmc-deals-title,
html body .rmc-reviews__title,
html body .rmc-faq__title {
	font-weight: 600 !important;
	color: var(--rmc-navy) !important;
}

/* Review cards: quotes were pasted in at weight 700 — whole bold paragraphs.
   Quotes read as body text; the reviewer name (500) carries the emphasis. */
html body .rmc-card__quote { font-weight: 400 !important; }
html body .rmc-card__meta { font-weight: 500 !important; }

/* 8.4.4 (2026-08-16): homepage was re-imported on LIVE as an Elementor template,
   which regenerated element IDs. About container 17f4816 -> 376ffec2 (live),
   WHY eyebrow 692cdba -> 13263ecb (live). Both IDs kept via :is() so stage
   (old IDs) and live (new IDs) render identically. Hero uses .rmc-site-hero class. */

/* ==========================================================================
   HOMEPAGE ATMOSPHERE (2026-08-07)
   Stephanie: homepage read "too white". Two elements, zero new colors:
   1) Floating molecule line-art — her hexagon PNG (assets/molecule.png,
      transparent bg) used as a CSS mask and PAINTED with var(--rmc-navy),
      so the artwork can never drift off-palette. Two per section, opposite
      sides, staggered heights, each at its own diagonal with its own drift
      timing (12 total). Approved at 6–8% opacity, ~100px diagonal wander.
   2) Whisper tint bands — rgba(23,50,77,.028) with a 120px fade at each
      end — on the Popular / About / FAQ sections, alternating with white.
   Decoration divs are injected by decorateHome() in global.js (home only).
   The layer sits at z-index:-1 inside an isolated section context and is
   overflow:hidden, so it can never affect layout or create scrollbars.
   ========================================================================== */

.rmc-decor-host { position: relative !important; isolation: isolate; }

.rmc-decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.rmc-decor.tint {
	background:
		linear-gradient(to bottom, rgba(23,50,77,.045), rgba(23,50,77,0) 120px),
		linear-gradient(to top, rgba(23,50,77,.045), rgba(23,50,77,0) 120px),
		rgba(23,50,77,.028);
}

.rmc-decor .rmc-mol {
	position: absolute;
	background-color: var(--rmc-navy);
	-webkit-mask-image: url('molecule.png');
	mask-image: url('molecule.png');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	animation: rmcMolFloat 11s ease-in-out infinite alternate;
}

@keyframes rmcMolFloat {
	0%   { transform: rotate(var(--rot, -30deg)) translate(-30px, -45px); }
	50%  { transform: rotate(calc(var(--rot, -30deg) + 6deg)) translate(25px, 10px); }
	100% { transform: rotate(calc(var(--rot, -30deg) + 12deg)) translate(35px, 55px); }
}

@media (prefers-reduced-motion: reduce) {
	.rmc-decor .rmc-mol { animation: none; }
}

/* Below desktop the corners the molecules live in no longer exist —
   hide the art, keep the tint bands. */
@media (max-width: 1024px) {
	.rmc-decor .rmc-mol { display: none; }
}

/* ==========================================================================
   LUXURY POLISH PASS (2026-08-07)
   Stephanie: "spacing aligns, text seamless section to section, luxury
   research brand." Measured on the live page and normalized:
   - ONE content column: 1140px everywhere. Popular/About Elementor
     containers were 1200, reviews/FAQ widgets 1100, deals already 1140.
     Section classes rmc-sec-* are applied by decorateHome() in global.js.
   - ONE eyebrow voice: 10px / 500 / .18em / uppercase / muted. The
     "WHY RESEARCHERS CHOOSE" heading (element 692cdba) was 19px retired
     navy #1E2F5C with negative tracking — restyled to match.
   - ONE eyebrow-to-title gap: 16px rendered, verified per section.
     (692cdba needs widget margin -4px because Elementor adds its own.)
   - Why-card titles used fills-only copper #E0913D as text (~2.4:1) —
     now var(--rmc-accent-text) 5.45:1.
   - Announcement marquee was Inter with retired #E07B39 highlights —
     now brand font with #F2A65A (6.49:1 on navy).
   - #41506A (pre-token grey-blue, 4 rules above) replaced at source with
     var(--rmc-body).
   ========================================================================== */

html body.home :is(.elementor-element-692cdba,.elementor-element-13263ecb) .elementor-heading-title {
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--rmc-muted) !important;
	line-height: 1.4 !important;
	margin-bottom: 0 !important;
}

html body.home :is(.elementor-element-692cdba,.elementor-element-13263ecb) { margin-bottom: -4px !important; }

html body .rmc-deals-eyebrow,
html body .rmc-reviews__eyebrow,
html body .rmc-faq__eyebrow { margin: 0 0 16px !important; }

html body.home :is(.elementor-element-17f4816,.elementor-element-376ffec2) .elementor-widget-heading:first-of-type,
html body.home .rmc-about .elementor-widget-heading:first-of-type { margin-bottom: 6px !important; }

html body.home .rmc-sec-popular.e-con-boxed > .e-con-inner,
html body.home .rmc-sec-about.e-con-boxed > .e-con-inner { max-width: 1140px !important; }

html body .rmc-reviews__inner,
html body .rmc-faq__inner { max-width: 1140px !important; }

html body.home .rmc-sec-why .elementor-icon-box-title,
html body.home .rmc-sec-why .elementor-icon-box-title * { color: var(--rmc-accent-text) !important; }

html body .rmc-scroll-track,
html body .rmc-scroll-track * { font-family: var(--rmc-font) !important; }

html body .rmc-scroll-track strong { color: #F2A65A !important; font-weight: 600 !important; }

/* Rhythm rebalance (2026-08-07, after Stephanie flagged the why-section
   spacing): the tint-band edges are the perceived section boundaries, and
   they sliced the gaps unevenly — 30px of clean white above the why section
   vs 40px below, while reviews→FAQ sat at 184px (double the ~96px seam
   rhythm). Measured live with reveals settled, then set so the why section
   has exactly 48px of white to the tint edge on BOTH sides, and the
   reviews/FAQ seam matches the page rhythm (their widgets each carried
   80px facing padding). */
html body.home .rmc-sec-why { padding-top: 18px !important; padding-bottom: 8px !important; }
html body .rmc-reviews { padding-bottom: 36px !important; }
html body .rmc-faq { padding-top: 36px !important; }

/* FAQ widget painted its own solid white background over the section — on
   the tinted FAQ band this left a white rectangle floating inside the grey
   (Stephanie spotted it). Transparent lets the band run edge to edge; the
   white question cards and photo sit on the tint like the product cards do
   on Popular. (2026-08-07) */
html body .rmc-faq { background: transparent !important; }

/* ==========================================================================
   MICRO-INTERACTIONS (2026-08-07)
   Stephanie: hovers felt "too simple and abrupt". Three quiet moves:
   1) Menus — the Elementor pointer underline was 2px off-brand grey
      (#3F444B) with a stock pop. Replaced: 1.5px copper hairline that
      slides in from the left on hover and leaves to the right (origin
      swap), .34s decelerating ease. Active item keeps the line.
   2) Text links (text-editor content, review card links) — hairline draws
      under the word via background-size, same easing.
   3) Buttons — soft lift: -1.5px translate + a soft navy (or copper for
      copper CTAs) shadow, quick settle on press. Selector list mirrors the
      control layer above so icon controls stay excluded.
   All effects collapse under prefers-reduced-motion.
   ========================================================================== */

html body .elementor-nav-menu .elementor-item { position: relative; }

html body .elementor-nav-menu .elementor-item::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	bottom: -2px !important;
	width: auto !important;
	height: 1.5px !important;
	background: var(--rmc-accent) !important;
	opacity: 1 !important;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1) !important;
}

html body .elementor-nav-menu .elementor-item:hover::after,
html body .elementor-nav-menu .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

html body .elementor-widget-text-editor a,
html body .rmc-card__link {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 1px;
	text-decoration: none !important;
	transition: background-size .3s cubic-bezier(.22, .61, .36, 1);
}

html body .elementor-widget-text-editor a:hover,
html body .rmc-card__link:hover { background-size: 100% 1px; }

/* Buttons — same selector set as the control layer, exclusions included. */
html body:not(.woocommerce-checkout) .button:not(.rmc-card-cart):not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) a.button:not(.rmc-card-cart):not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) button.button:not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) .ast-button,
html body:not(.woocommerce-checkout) .wp-block-button__link,
html body:not(.woocommerce-checkout) .woocommerce-Button,
html body:not(.woocommerce-checkout) .elementor-button:not(.elementor-menu-cart__toggle_button):not(.rmc-rail-btn),
html body:not(.woocommerce-checkout) button[type="submit"]:not(.adminbar-button):not(.dgwt-wcas-search-submit),
html body .rmc-deals-wrap .rmc-hero .rmc-btn {
	transition: background-color .22s ease, border-color .22s ease, color .22s ease,
		transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s ease !important;
}

html body:not(.woocommerce-checkout) .button:not(.rmc-card-cart):not(.rmc-rail-btn):hover,
html body:not(.woocommerce-checkout) a.button:not(.rmc-card-cart):not(.rmc-rail-btn):hover,
html body:not(.woocommerce-checkout) button.button:not(.rmc-rail-btn):hover,
html body:not(.woocommerce-checkout) .ast-button:hover,
html body:not(.woocommerce-checkout) .wp-block-button__link:hover,
html body:not(.woocommerce-checkout) .woocommerce-Button:hover,
html body:not(.woocommerce-checkout) .elementor-button:not(.elementor-menu-cart__toggle_button):not(.rmc-rail-btn):hover,
html body:not(.woocommerce-checkout) button[type="submit"]:not(.adminbar-button):not(.dgwt-wcas-search-submit):hover {
	transform: translateY(-1.5px);
	box-shadow: 0 10px 24px rgba(23, 50, 77, .20), 0 2px 6px rgba(23, 50, 77, .10) !important;
}

/* Copper CTAs carry a copper-tinted shadow instead of navy. */
html body:not(.woocommerce-checkout) .single_add_to_cart_button:hover,
html body:not(.woocommerce-checkout) .wpforms-submit:hover,
html body:not(.woocommerce-checkout) .rmc-btn-accent-el:hover,
html body .rmc-deals-wrap .rmc-hero .rmc-btn:hover {
	transform: translateY(-1.5px);
	box-shadow: 0 10px 24px rgba(154, 90, 26, .28), 0 2px 6px rgba(154, 90, 26, .12) !important;
}

html body:not(.woocommerce-checkout) .button:active,
html body:not(.woocommerce-checkout) .elementor-button:active,
html body:not(.woocommerce-checkout) .single_add_to_cart_button:active,
html body .rmc-deals-wrap .rmc-hero .rmc-btn:active {
	transform: translateY(0);
	transition-duration: .08s !important;
}

html body:not(.woocommerce-checkout) .elementor-button:focus-visible,
html body:not(.woocommerce-checkout) .button:focus-visible,
html body:not(.woocommerce-checkout) button[type="submit"]:focus-visible {
	outline: 2px solid var(--rmc-accent-text);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html body .elementor-nav-menu .elementor-item::after,
	html body .elementor-widget-text-editor a,
	html body .rmc-card__link { transition: none !important; }

	html body:not(.woocommerce-checkout) .elementor-button:hover,
	html body:not(.woocommerce-checkout) .button:hover,
	html body:not(.woocommerce-checkout) .single_add_to_cart_button:hover,
	html body .rmc-deals-wrap .rmc-hero .rmc-btn:hover { transform: none; }
}

/* ==========================================================================
   QA SWEEP FIXES (2026-08-07, previewed with Stephanie)
   ========================================================================== */

/* PDP sale badge was WooCommerce/Astra's round copper blob — restyled as the
   same quiet chip the shop cards use. */
html body.single-product span.onsale {
	position: absolute;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	background: var(--rmc-white) !important;
	color: var(--rmc-accent-text) !important;
	border: 1px solid var(--rmc-line) !important;
	border-radius: 6px !important;
	font-family: var(--rmc-font) !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	padding: 5px 10px !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	animation: none !important;
	z-index: 6;
}

/* Astra sized the search submit at 16px — the label clipped to "Sear". */
html body .search-form .search-submit {
	width: auto !important;
	min-width: max-content !important;
	padding: 14px 24px !important;
	overflow: visible !important;
}

/* Shop category tabs on phones stacked as four full-width buttons — half a
   screen of chrome before any product. A horizontally scrollable pill row
   instead (Elementor nested-tabs markup). */
@media (max-width: 767px) {
	body.woocommerce-shop .e-n-tabs-heading,
	body.post-type-archive-product .e-n-tabs-heading,
	body.tax-product_cat .e-n-tabs-heading {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		gap: 8px !important;
		padding: 2px 2px 10px !important;
		scrollbar-width: none;
	}

	body.woocommerce-shop .e-n-tabs-heading::-webkit-scrollbar,
	body.post-type-archive-product .e-n-tabs-heading::-webkit-scrollbar,
	body.tax-product_cat .e-n-tabs-heading::-webkit-scrollbar { display: none; }

	body.woocommerce-shop .e-n-tab-title,
	body.post-type-archive-product .e-n-tab-title,
	body.tax-product_cat .e-n-tab-title {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		border-radius: 999px !important;
		padding: 9px 16px !important;
		font-size: 13px !important;
	}
}

/* ------------------------------------------------------------------
   CART CONSOLIDATION (8.3.6)
   The FunnelKit slide cart is the single cart experience. The header
   cart icon is intercepted in global.js (routeCartToFunnelKit) and
   opens the FunnelKit modal; this rule guarantees the Elementor
   mini-cart dropdown never flashes open (e.g. a click that lands
   before our JS is bound). Scoped off the Elementor editor so the
   widget stays editable there. /cart/ itself redirects to checkout
   in functions.php.
   ------------------------------------------------------------------ */
body:not(.elementor-editor-active) .elementor-menu-cart__container {
	display: none !important;
}

/*
 * Floating FunnelKit bubble hidden (Stephanie's call, 2026-08): the header
 * cart icon is now the single entry point. Done here in the theme instead of
 * FunnelKit's "Hide Cart Icon" setting so no plugin config changes — delete
 * this rule to bring the bubble back. The slide cart itself still works:
 * global.js opens it via the fkcart_open event, and Auto Open on
 * add-to-cart is untouched.
 */
#fkcart-floating-toggler,
.fkcart-floating-icon {
	display: none !important;
}

/*
 * The site-wide field layer (Fields block above: 13px/15px padding, 48px
 * min-height, border) leaks into FunnelKit's quantity box — a 32px-wide
 * text input — and squeezes the number invisible. Exempt it and restore
 * FunnelKit's compact centered style. Same for its focus ring.
 */
html body:not(.woocommerce-checkout) input.fkcart-quantity__input {
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	min-height: 0 !important;
	text-align: center !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--rmc-navy) !important;
}

html body:not(.woocommerce-checkout) input.fkcart-quantity__input:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/*
 * FunnelKit slide cart — brand pass (8.3.7, Stephanie: item rows "look a
 * little funky"). FunnelKit ships its own palette (#0170B9 links/checkout,
 * #353030 titles, #E15334 strikes, retired #1E2F5C on image wrappers).
 * Retint to tokens; strikes go quiet like the PDP/deals treatment. All
 * scoped to #fkcart-modal — FunnelKit settings untouched.
 */
#fkcart-modal .fkcart-title,
#fkcart-modal .fkcart-coupon-title,
#fkcart-modal .fkcart-slider-heading {
	color: var(--rmc-navy) !important;
	font-weight: 600 !important;
}

#fkcart-modal .fkcart-item-title {
	color: var(--rmc-navy) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
}

#fkcart-modal .fkcart-item-meta {
	color: var(--rmc-muted) !important;
	font-size: 13px !important;
}

#fkcart-modal a.fkcart-select-options {
	color: var(--rmc-accent-text) !important;
	font-size: 13px !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: border-color .16s ease;
}

#fkcart-modal a.fkcart-select-options:hover {
	border-bottom-color: var(--rmc-accent-text);
}

#fkcart-modal .fkcart-item-price {
	color: var(--rmc-navy) !important;
	font-weight: 600 !important;
}

#fkcart-modal del,
#fkcart-modal del .amount,
#fkcart-modal del bdi {
	color: var(--rmc-faint) !important;
	font-weight: 400 !important;
}

#fkcart-modal .fkcart-remove-item {
	color: var(--rmc-faint) !important;
}

#fkcart-modal .fkcart-quantity-selector {
	border: 1px solid var(--rmc-line-strong) !important;
	border-radius: 8px !important;
	overflow: hidden;
}

#fkcart-modal .fkcart-quantity-button {
	color: var(--rmc-body) !important;
	background: transparent !important;
	transition: background-color .16s ease, color .16s ease;
}

#fkcart-modal .fkcart-quantity-button:hover {
	background: var(--rmc-surface) !important;
	color: var(--rmc-navy) !important;
}

/* Checkout CTA + zero-state Shop Now: FunnelKit blue -> brand navy,
   matching the site's primary buttons (radius 8, navy-hover). */
#fkcart-modal a[href*="checkout"],
#fkcart-modal .fkcart-primary-button {
	background: var(--rmc-navy) !important;
	border-color: var(--rmc-navy) !important;
	color: var(--rmc-white, #fff) !important;
	border-radius: 8px !important;
	font-family: var(--rmc-font) !important;
	font-weight: 500 !important;
	transition: background-color .18s ease, border-color .18s ease;
}

#fkcart-modal a[href*="checkout"]:hover,
#fkcart-modal .fkcart-primary-button:hover {
	background: var(--rmc-navy-hover) !important;
	border-color: var(--rmc-navy-hover) !important;
}

#fkcart-modal .fkcart-shopping-link {
	color: var(--rmc-accent-text) !important;
}

/* ---- My Account grid (8.3.8) -----------------------------------------
   The account pages carry .woocommerce-page, so the 8.3.5 interior grid
   deliberately excluded them — the container ran full-bleed and the
   "My account" title sat on the viewport edge while WooCommerce centred
   the account box on its own (Stephanie: "the title... it looks funny").
   Same 1140 column and title voice as every other interior page.
   Scoped to woocommerce-account only — shop, cart and checkout keep
   managing their own layout. */
html body.woocommerce-account:not(.woocommerce-checkout) .ast-container {
	max-width: 1140px !important;
	margin: 0 auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

html body.woocommerce-account .site-content { padding-top: 0 !important; }
html body.woocommerce-account .content-area { margin-top: 24px !important; }
html body.woocommerce-account #content,
html body.woocommerce-account .site-main { padding-top: 32px !important; }

body.woocommerce-account h1 {
	font-size: 36px !important;
	font-weight: 600 !important;
	letter-spacing: -.03em !important;
	line-height: 1.1 !important;
	color: var(--rmc-navy) !important;
	margin: 0 0 24px !important;
}

/* The account box centred itself inside the full-bleed container; inside
   the 1140 grid it should fill the column so its left edge meets the title. */
body.woocommerce-account .woocommerce {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

@media (max-width: 767px) {
	html body.woocommerce-account #content,
	html body.woocommerce-account .site-main { padding-top: 44px !important; }
	body.woocommerce-account h1 { font-size: 30px !important; }
}

/*
 * Coupon row (8.3.9, Stephanie: typing in "Got a discount code?" "looks
 * weird"): FunnelKit lays the field and Apply button side by side as two
 * disconnected controls — 48px input flush against a 36px button, and the
 * site-wide focus ring collided with the button edge. One composite
 * control instead: the wrap carries the border and focus ring, the input
 * goes borderless inside, Apply sits inset on the right. The input
 * override rides #fkcart-modal's ID specificity past the Fields layer.
 */
#fkcart-modal .fkcart-coupon-input-wrap {
	border: 1px solid var(--rmc-line-strong);
	border-radius: 8px;
	background: var(--rmc-white, #fff);
	align-items: center;
	padding: 5px 5px 5px 0;
	gap: 6px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

#fkcart-modal .fkcart-coupon-input-wrap:focus-within {
	border-color: var(--rmc-navy);
	box-shadow: 0 0 0 3px rgba(23, 50, 77, .07);
}

html body #fkcart-modal .fkcart-coupon-input-wrap input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
	height: 36px !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	color: var(--rmc-navy) !important;
	flex: 1 1 auto;
	border-radius: 0 !important;
}

html body #fkcart-modal .fkcart-coupon-input-wrap input:focus {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

#fkcart-modal .fkcart-coupon-button {
	border-radius: 6px !important;
	height: 36px !important;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   PEPTIDE DEALS PAGE (8.4.3)
   The page stacks two plugin sections — [rmc_peptide_deals] (built for
   the homepage: own 72px padding, hairline top/bottom rules, own
   "Weekly savings / Peptide Deals" header) and [rmc_kit_builder]. On an
   interior page that produced: a dead band where the theme's page title
   sits (duplicate of the deals title), two different content widths, a
   stray hairline, a plain h2 in a different voice, and no seam rhythm.
   Scoped to body.rmc-page-deals — added by functions.php for the page
   whose slug is peptide-deals (or any page containing both shortcodes).
   ------------------------------------------------------------------ */

/* The deals plugin renders the page title itself; hide the theme's h1
   and the empty band it lives in, and let the eyebrow lead. */
html body.rmc-page-deals .site-main > .ast-container > h1,
html body.rmc-page-deals .entry-header,
html body.rmc-page-deals h1.entry-title { display: none !important; }
html body.rmc-page-deals #content,
html body.rmc-page-deals .site-main { padding-top: 40px !important; }

/* Deals section: drop its homepage frame (rules + 72px pad) so it sits
   on the interior grid like any other content block. */
html body.rmc-page-deals .rmc-deals {
	border-top: 0 !important;
	border-bottom: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
html body.rmc-page-deals .rmc-deals-inner { max-width: none !important; margin: 0 !important; }

/* One grid: everything on the same 1140 column the theme gives interior
   pages (the .ast-container rule from 8.3.5 handles the outer). */
html body.rmc-page-deals .rmc-deals-wrap,
html body.rmc-page-deals #rmc-kit { max-width: 100%; }

/* Seam between the two sections: homepage rhythm (~96px), and a
   section header in the site's voice — eyebrow + 36/600 title — so
   "Build your own kit" reads as a sibling of "Peptide Deals". */
html body.rmc-page-deals .rmc-kit-section { margin-top: 88px; padding-top: 0; }
html body.rmc-page-deals .rmc-kit-section::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--rmc-line);
	margin: 0 0 56px;
}
html body.rmc-page-deals .rmc-kit-eyebrow {
	display: flex; align-items: center; gap: 11px;
	margin: 0 0 14px;
	font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
	color: var(--rmc-muted);
}
html body.rmc-page-deals .rmc-kit-eyebrow::before {
	content: ""; width: 1px; height: 14px; background: var(--rmc-accent); flex: 0 0 auto;
}
html body.rmc-page-deals .rmc-kit-section h2,
html body.rmc-page-deals .rmc-kit-title {
	margin: 0 0 12px !important;
	font-size: 36px !important; font-weight: 600 !important; letter-spacing: -.03em !important;
	line-height: 1.12 !important; color: var(--rmc-navy) !important;
}
html body.rmc-page-deals .rmc-kit-lede {
	font-size: 17px; line-height: 1.7; color: var(--rmc-body);
	max-width: 640px; margin: 0 0 32px;
}

/* Bottom breathing room before the footer. */
html body.rmc-page-deals #rmc-kit { margin-bottom: 96px; }

@media (max-width: 767px) {
	html body.rmc-page-deals #content,
	html body.rmc-page-deals .site-main { padding-top: 32px !important; }
	html body.rmc-page-deals .rmc-kit-section { margin-top: 64px; }
	html body.rmc-page-deals .rmc-kit-section::before { margin-bottom: 40px; }
	html body.rmc-page-deals .rmc-kit-section h2,
	html body.rmc-page-deals .rmc-kit-title { font-size: 30px !important; }
	html body.rmc-page-deals .rmc-kit-lede { font-size: 16px; margin-bottom: 24px; }
	html body.rmc-page-deals #rmc-kit { margin-bottom: 64px; }
}

/* 8.4.7 (2026-08-16): interior pages — content.css paints every
   .elementor-widget-text-editor strong navy (0,4,2 !important), which turned
   the header announcement marquee's highlights navy-on-navy on COA Library,
   Restock Status, etc. (homepage was fine because that rule excludes .home).
   Out-specify it for the marquee only. */
html body.page:not(.home):not(.woocommerce-page) .elementor-widget-text-editor .rmc-scroll-track strong,
html body .elementor-widget-text-editor .rmc-scroll-track strong,
html body .rmc-scroll-track strong { color: #F2A65A !important; font-weight: 600 !important; }
html body.page:not(.home):not(.woocommerce-page) .elementor-widget-text-editor .rmc-scroll-track,
html body .rmc-scroll-track { color: #FFFFFF !important; }

/* 8.4.8 — shop search bar injected above the category tabs (functions.php
   rmc_theme_shop_search_before_tabs). Same geometry as stage's widget. */
html body .rmc-shop-search { max-width: 520px; margin: 0 auto 26px; }
html body .rmc-shop-search .dgwt-wcas-search-wrapp { max-width: none; }
@media (max-width: 767px) { html body .rmc-shop-search { margin-bottom: 18px; } }

/* ==========================================================================
   8.4.9 — SCROLL HINT for the phone tab row (Shop All · Peptides · Storage
   Cases · Kits). global.js wraps .e-n-tabs-heading in .rmc-tabs-scroll and
   toggles is-scrollable / at-start / at-end. A soft white fade with a small
   navy chevron sits on the side that still has more tabs; it disappears at
   the end. Desktop (tabs wrap, nothing to scroll) shows nothing.
   ========================================================================== */
.rmc-tabs-scroll { position: relative; }
.rmc-tabs-scroll::before,
.rmc-tabs-scroll::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2;
	pointer-events: none; opacity: 0; transition: opacity .2s ease;
	background-repeat: no-repeat; background-size: 14px 14px;
}
.rmc-tabs-scroll::after {
	right: 0;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='%2317324D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
		linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 55%, #fff 100%);
	background-position: right 8px center, 0 0;
	background-size: 14px 14px, 100% 100%;
}
.rmc-tabs-scroll::before {
	left: 0;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10 3L5 8l5 5' fill='none' stroke='%2317324D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
		linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 55%, #fff 100%);
	background-position: left 8px center, 0 0;
	background-size: 14px 14px, 100% 100%;
}
.rmc-tabs-scroll.is-scrollable:not(.at-end)::after   { opacity: 1; pointer-events: auto; cursor: pointer; }
.rmc-tabs-scroll.is-scrollable:not(.at-start)::before { opacity: 1; pointer-events: auto; cursor: pointer; }
/* keep the fade off the tab row's bottom padding so pills aren't clipped */
.rmc-tabs-scroll .e-n-tabs-heading { padding-right: 40px !important; }
.rmc-tabs-scroll.at-end .e-n-tabs-heading { padding-right: 2px !important; }
@media (prefers-reduced-motion: reduce) { .rmc-tabs-scroll::before, .rmc-tabs-scroll::after { transition: none; } }

/* With FiboSearch active on the shop, hide any plain Elementor/Woo search form
   widget still sitting on the page (no suggestions; would be a second box). */
html body.rmc-has-fibosearch .elementor-widget-search-form,
html body.rmc-has-fibosearch .elementor-widget-wc-search,
html body.rmc-has-fibosearch .elementor-widget-woocommerce-product-search,
html body.rmc-has-fibosearch .elementor-widget-search,
html body.rmc-has-fibosearch .elementor-widget:has(> .elementor-widget-container > form.woocommerce-product-search),
html body.rmc-has-fibosearch .elementor-widget:has(> .elementor-widget-container > form[role="search"]:not(.dgwt-wcas-search-form)) { display: none !important; }