/**
 * Robins Range — component classes.
 *
 * These are the design system's atoms and molecules ported from inline React styles
 * to CSS classes. They are applied to Elementor widgets via each widget's
 * `_css_classes` setting, so styling is reused and versioned here in git while the
 * content stays per-instance.
 *
 * Why not Global Widgets: a Global Widget renders its template's settings and
 * discards the instance's own, so every instance is byte-identical. That is right for
 * the SafetyStrip and the WhatsApp button, and wrong for anything whose label, colour
 * or warning text varies. See CLAUDE.md.
 */

/* -------------------------------------------------------------------------
 * Button
 * ---------------------------------------------------------------------- */

.rr-btn .elementor-button,
a.rr-btn,
button.rr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	box-sizing: border-box;
	min-height: var(--tap-target-min);
	padding: 10px var(--space-4);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: var(--type-body-size);
	font-weight: var(--type-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

.rr-btn--primary .elementor-button,
a.rr-btn--primary {
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.rr-btn--primary .elementor-button:hover,
.rr-btn--primary .elementor-button:focus,
a.rr-btn--primary:hover,
a.rr-btn--primary:focus {
	background-color: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
}

.rr-btn--secondary .elementor-button,
a.rr-btn--secondary {
	background-color: transparent;
	border-color: var(--color-text-primary);
	color: var(--color-text-primary);
}

.rr-btn--secondary .elementor-button:hover,
.rr-btn--secondary .elementor-button:focus,
a.rr-btn--secondary:hover,
a.rr-btn--secondary:focus {
	background-color: var(--color-surface-alt);
	color: var(--color-text-primary);
}

/* WhatsApp green is fixed by WhatsApp's brand rules — never reskin it. */
.rr-btn--whatsapp .elementor-button,
a.rr-btn--whatsapp {
	background-color: var(--color-whatsapp);
	color: #fff;
}

.rr-btn--whatsapp .elementor-button:hover,
.rr-btn--whatsapp .elementor-button:focus,
a.rr-btn--whatsapp:hover,
a.rr-btn--whatsapp:focus {
	background-color: #1EBE5B;
	color: #fff;
}

.rr-btn--full .elementor-button,
a.rr-btn--full {
	width: 100%;
}

.rr-btn.rr-is-disabled .elementor-button,
a.rr-btn.rr-is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * CategoryTag
 * ---------------------------------------------------------------------- */

.rr-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	background-color: var(--color-category-antiseptic);
	color: var(--color-text-inverse);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--type-weight-bold);
	letter-spacing: var(--type-tag-tracking);
	line-height: 18px;
	text-transform: uppercase;
	white-space: nowrap;
}

.rr-tag--sm {
	padding: 2px 10px;
	font-size: 11px;
}

.rr-tag--vitality {
	background-color: var(--color-category-vitality);
}

.rr-tag--coldflu {
	background-color: var(--color-category-coldflu);
}

.rr-tag--multisymptom {
	background-color: var(--color-category-multisymptom);
}

/* Reserved neutral until the antiseptic product list lands — do not invent a colour. */
.rr-tag--antiseptic {
	background-color: var(--color-category-antiseptic);
}

/* -------------------------------------------------------------------------
 * SafetyBanner
 *
 * Cream background + 1px amber border + ink text (~19:1). Amber is the border and
 * the icon only: white on #F2A900 is 2.01:1 and fails WCAG. Never fill this amber.
 * ---------------------------------------------------------------------- */

.rr-safety-banner {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-feedback-caution);
	border-radius: var(--radius-md);
	background-color: var(--color-feedback-caution-bg);
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-primary);
}

.rr-safety-banner--compact {
	padding: var(--space-2) var(--space-3);
}

/* Lucide alert-triangle, inlined. Substitute icon set — flagged, pending the real one. */
.rr-safety-banner::before {
	content: '';
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E" );
}

.rr-safety-banner__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.rr-safety-banner a {
	color: var(--color-text-primary);
	font-weight: var(--type-weight-semibold);
	text-decoration: underline;
}

/* Safety and legal text has a 14px floor — never let a widget shrink it. */
.rr-safety-banner,
.rr-safety-banner p,
.rr-safety-banner a,
.rr-safety-banner span {
	font-size: var(--type-small-size);
}

/* -------------------------------------------------------------------------
 * SafetyStrip — the full-width section that wraps a SafetyBanner
 * ---------------------------------------------------------------------- */

.rr-safety-strip {
	background-color: var(--color-surface-alt);
}

/* -------------------------------------------------------------------------
 * WhatsAppChat — the Button atom, pinned. Not Elementor's contact-buttons
 * widget, which is a different, opinionated design.
 * ---------------------------------------------------------------------- */

.rr-whatsapp-float {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 100;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

/**
 * The logo is a 660x220 raster. Constrain it by height and let width follow, or
 * it holds its natural 660px, squeezes the nav into a wrap, and (with object-fit)
 * letterboxes itself in the middle of an oversized box.
 *
 * Flagged substitution: cropped raster on white, not transparent, no vector
 * original. Ask for the real asset.
 */
.rr-header-logo img {
	width: auto;
	height: 40px;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

/**
 * The design system's footer is a grid of auto-fit minmax(160px, 1fr) columns.
 * `.e-con` raises specificity above Elementor's own container display rule.
 */
.rr-footer-cols.e-con {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	align-items: start;
}

/**
 * tokens.css sets `a { color: var(--color-brand-primary) }` for body copy. On the
 * near-black footer that renders every link brand orange — off-design, and orange
 * on #18181B is a contrast problem. Neutral-300 on neutral-900 is ~11:1.
 */
.rr-footer-col a,
.rr-footer-legal a,
.rr-footer-copyright a {
	color: var(--color-neutral-300);
}

.rr-footer-col a:hover,
.rr-footer-col a:focus,
.rr-footer-legal a:hover,
.rr-footer-legal a:focus,
.rr-footer-copyright a:hover,
.rr-footer-copyright a:focus {
	color: var(--color-neutral-0);
}

.rr-footer-copyright a {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 18+ pill — outline, never filled. The vitality blue is the category colour;
 * as an outline + text it sits on white at 10.45:1.
 * ---------------------------------------------------------------------- */

.rr-age-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 12px;
	border: 2px solid var(--color-category-vitality);
	border-radius: var(--radius-pill);
	color: var(--color-category-vitality);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--type-weight-bold);
	letter-spacing: var(--type-tag-tracking);
}

/* -------------------------------------------------------------------------
 * D&M Pharmacy badge
 * ---------------------------------------------------------------------- */

.rr-dm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	background: var(--color-surface-default);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	text-decoration: none;
}

.rr-dm-badge:hover,
.rr-dm-badge:focus {
	border-color: var(--color-neutral-300);
	box-shadow: var(--shadow-card);
	color: var(--color-text-primary);
}

.rr-dm-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand-primary);
}

/* -------------------------------------------------------------------------
 * Product detail
 * ---------------------------------------------------------------------- */

.rr-product {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}

.rr-product__tags {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	flex-wrap: wrap;
}

.rr-product__title {
	font-family: var(--font-display);
	font-size: var(--type-display-size);
	line-height: var(--type-display-line);
	font-weight: 600;
	margin: 0;
}

/* ALL-CAPS line claim, in the product's own category colour (set inline). */
.rr-product__claim {
	margin: 0;
	font-weight: var(--type-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--type-tag-tracking);
	font-size: var(--type-small-size);
}

.rr-product__descriptor {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
}

.rr-product__block {
	width: 100%;
}

.rr-product__label {
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--type-tag-tracking);
	margin: 0 0 var(--space-2);
}

.rr-product__ingredients {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
}

.rr-product__symptoms {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.rr-product__symptom {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
}

.rr-product__directions {
	margin: 0;
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-muted);
}

/* Directions awaiting pharmacist sign-off render as a caution, not as body copy. */
.rr-product__directions-gate strong {
	font-weight: var(--type-weight-bold);
}

.rr-product__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-2);
}

.rr-product__nafdac {
	margin: var(--space-2) 0 0;
	font-size: var(--type-small-size);
	color: var(--color-text-muted);
}

.rr-product__nafdac strong {
	color: var(--color-text-primary);
}

.rr-pack-image {
	max-width: 100%;
	height: auto;
}

.rr-product-media {
	background: var(--color-neutral-50);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	display: flex;
	justify-content: center;
	align-items: center;
}

.rr-product__intro p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
}

/* Coming-soon single: the design drops the pack-shot frame entirely and centres the
 * copy in a 640px column. Without this the media container still paints its border and
 * padding around nothing, leaving an empty box beside the text.
 *
 * :empty cannot do this job — Elementor leaves a whitespace text node inside the
 * container, so it never matches. The body class is set in functions.php.
 *
 * The top "← Our range" link goes too: the design's coming-soon view navigates back
 * with its "Back to range" button instead, and shipping both is a redundant control. */
.rr-single-soon .rr-product-media,
.rr-single-soon .rr-back-link {
	display: none;
}

.rr-single-soon .rr-product--soon {
	max-width: 640px;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * ProductCard — the Range archive's loop item
 * ---------------------------------------------------------------------- */

.rr-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: box-shadow 180ms ease-out;
	text-decoration: none;
	color: var(--color-text-primary);
}

.rr-card:hover,
.rr-card:focus {
	box-shadow: var(--shadow-card-hover);
	color: var(--color-text-primary);
}

.rr-card__media {
	background: var(--color-neutral-50);
	padding: var(--space-4);
	display: flex;
	justify-content: center;
}

.rr-card__media img {
	height: 180px;
	width: auto;
	object-fit: contain;
}

.rr-card__placeholder {
	height: 180px;
	width: 128px;
	border-radius: var(--radius-sm);
	border: 1px dashed var(--color-neutral-300);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--type-small-size);
	color: var(--color-text-muted);
}

.rr-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-3);
}

.rr-card__name {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: var(--type-weight-bold);
	line-height: 1.3;
}

.rr-card__descriptor {
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-muted);
}

.rr-card__cta {
	margin-top: auto;
	padding-top: var(--space-1);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	color: var(--color-brand-primary);
}

.rr-card:hover .rr-card__cta {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Family cards — Home "Our range"
 * ---------------------------------------------------------------------- */

.rr-families {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var(--space-4);
}

/* border-top-color is set inline per family — the one category colour on the card. */
.rr-family {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-4);
	border: 1px solid var(--color-border-default);
	border-top: 4px solid var(--color-category-antiseptic);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: box-shadow 180ms ease-out;
}

.rr-family:hover,
.rr-family:focus {
	box-shadow: var(--shadow-card-hover);
	color: var(--color-text-primary);
}

.rr-family__title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: var(--type-weight-bold);
}

.rr-family__blurb {
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-muted);
}

.rr-family__cta {
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	color: var(--color-brand-primary);
	margin-top: auto;
	padding-top: var(--space-2);
}

/* -------------------------------------------------------------------------
 * Quality points — About
 * ---------------------------------------------------------------------- */

.rr-quality {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: var(--space-4);
}

.rr-quality__card {
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.rr-quality__title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: var(--type-weight-bold);
}

.rr-quality__body {
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Safety points — Safety & FAQ
 * ---------------------------------------------------------------------- */

.rr-safety-points {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: var(--prose-max);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-text-muted);
}

.rr-safety-points__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.rr-safety-points__title {
	font-family: var(--font-sans);
	font-weight: var(--type-weight-bold);
	color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------
 * FAQ accordion — native <details>, keyboard operable with no JavaScript
 * ---------------------------------------------------------------------- */

.rr-faqs {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.rr-faq {
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface-default);
}

.rr-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	min-height: var(--tap-target-min);
	box-sizing: border-box;
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	font-weight: var(--type-weight-semibold);
	cursor: pointer;
	list-style: none;
}

.rr-faq__q::-webkit-details-marker {
	display: none;
}

.rr-faq__sign {
	flex: none;
	font-size: 22px;
	line-height: 1;
	color: var(--color-brand-primary);
}

.rr-faq__sign::before {
	content: '+';
}

.rr-faq[open] .rr-faq__sign::before {
	content: '\2212';
}

.rr-faq__a {
	padding: 0 var(--space-4) var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	max-width: var(--prose-max);
}

/* -------------------------------------------------------------------------
 * Staff email grid — Contact
 * ---------------------------------------------------------------------- */

.rr-emails {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var(--space-2);
}

.rr-emails__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
}

.rr-emails__addr {
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	text-decoration: none;
}

.rr-emails__role {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Cards used by the static pages — Where to Buy, the About NAFDAC block
 * ---------------------------------------------------------------------- */

.rr-card-panel.e-con {
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.rr-card-dashed.e-con {
	border: 1px dashed var(--color-neutral-300);
	border-radius: var(--radius-md);
}

.rr-note-panel.e-con {
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
}

/* The side-effect report line: caution treatment, cream ground, never amber-filled. */
.rr-caution-panel.e-con {
	background: var(--color-feedback-caution-bg);
	border: 1px solid var(--color-feedback-caution);
	border-radius: var(--radius-md);
}

.rr-caution-panel p,
.rr-note-panel p {
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Header — category dots on the "Our Range" dropdown items
 * ---------------------------------------------------------------------- */

.rr-cat-dot > a::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: var(--space-2);
	border-radius: 50%;
	background-color: var(--color-category-antiseptic);
	vertical-align: middle;
}

.rr-cat-dot--vitality > a::before {
	background-color: var(--color-category-vitality);
}

.rr-cat-dot--coldflu > a::before {
	background-color: var(--color-category-coldflu);
}

.rr-cat-dot--multisymptom > a::before {
	background-color: var(--color-category-multisymptom);
}

/* -------------------------------------------------------------------------
 * Page furniture — headings, ledes, action rows, back links
 * ---------------------------------------------------------------------- */

.rr-eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-bold);
	letter-spacing: var(--type-tag-tracking);
	text-transform: uppercase;
	color: var(--color-brand-primary);
}

.rr-page-title .elementor-heading-title,
.rr-hero-title .elementor-heading-title {
	font-family: var(--font-display);
	color: var(--color-text-primary);
	margin: 0;
}

.rr-section-title .elementor-heading-title {
	font-family: var(--font-display);
	color: var(--color-text-primary);
	margin: 0;
}

/* The design's uppercase section label — used where an h2 is a label, not a title. */
.rr-eyebrow-title .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-bold);
	letter-spacing: var(--type-tag-tracking);
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin: 0;
}

.rr-lede,
.rr-lede p {
	color: var(--color-text-muted);
	margin: 0;
}

.rr-lede p + p {
	margin-top: var(--space-3);
}

.rr-centered {
	text-align: center;
}

.rr-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.rr-centered .rr-actions {
	justify-content: center;
}

.rr-back-link {
	align-self: flex-start;
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	color: var(--color-text-primary);
	text-decoration: none;
}

.rr-back-link:hover,
.rr-back-link:focus {
	color: var(--color-brand-primary);
	text-decoration: underline;
}

.rr-legal-line {
	font-size: var(--type-small-size);
	color: var(--color-text-muted);
	margin: 0;
}

.rr-legal-line strong {
	color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------
 * Home hero
 * ---------------------------------------------------------------------- */

.rr-hero-media.e-con {
	background-color: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.rr-hero-pack {
	display: block;
	line-height: 0;
}

.rr-hero-pack img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Range archive — category filter
 *
 * Links rather than client-side state: each filtered view is a real taxonomy
 * archive URL, so it is linkable, indexable and works without JavaScript.
 * ---------------------------------------------------------------------- */

.rr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.rr-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	box-sizing: border-box;
	min-height: var(--tap-target-min);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-default);
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	color: var(--color-text-primary);
	text-decoration: none;
	transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

.rr-filter:hover {
	border-color: var(--color-text-primary);
	color: var(--color-text-primary);
}

.rr-filter--on {
	border: 2px solid var(--color-text-primary);
	background-color: var(--color-text-primary);
	color: var(--color-text-inverse);
}

.rr-filter--on:hover {
	color: var(--color-text-inverse);
}

.rr-filter__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * 18+ gate popup
 * ---------------------------------------------------------------------- */

.rr-gate-confirm,
.rr-gate-confirm p {
	color: var(--color-text-primary);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 404
 * ---------------------------------------------------------------------- */

.rr-404-mark {
	display: block;
	font-family: var(--font-display);
	font-size: 64px;
	line-height: 1;
	font-weight: var(--type-weight-bold);
	color: var(--color-brand-primary);
}

/* -------------------------------------------------------------------------
 * Where to Buy — panels
 * ---------------------------------------------------------------------- */

.rr-panel-title {
	display: block;
	font-family: var(--font-sans);
	font-size: 20px;
	font-weight: var(--type-weight-bold);
	color: var(--color-text-primary);
}

.rr-panel-title--sm {
	font-size: var(--type-body-size);
}

.rr-panel-body,
.rr-panel-body p {
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-primary);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Safety — adverse-event reporting line
 *
 * Amber is legitimate here: this is a genuine medical caution, which is the one
 * thing the token is reserved for. It is still ink-on-cream, never white-on-amber.
 * ---------------------------------------------------------------------- */

.rr-caution-line {
	font-size: var(--type-small-size);
	line-height: var(--type-small-line);
	color: var(--color-text-primary);
	margin: 0;
}

.rr-caution-line a {
	color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------
 * Contact form
 * ---------------------------------------------------------------------- */

.rr-form {
	max-width: 520px;
}

.rr-form .elementor-field-group > label {
	font-family: var(--font-sans);
	font-size: var(--type-small-size);
	font-weight: var(--type-weight-semibold);
	color: var(--color-text-primary);
	margin-bottom: var(--space-1);
}

.rr-form .elementor-field-textual {
	box-sizing: border-box;
	min-height: var(--tap-target-min);
	padding: 10px var(--space-3);
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-default);
	font-family: var(--font-sans);
	font-size: var(--type-body-size);
	color: var(--color-text-primary);
}

.rr-form textarea.elementor-field-textual {
	min-height: 120px;
}

.rr-form .elementor-field-textual:focus {
	border-color: var(--color-text-primary);
}

.rr-form .elementor-button[type='submit'] {
	min-height: var(--tap-target-min);
	padding: 10px var(--space-4);
	border-radius: var(--radius-pill);
	background-color: var(--color-brand-primary);
	font-family: var(--font-sans);
	font-weight: var(--type-weight-semibold);
	color: var(--color-text-inverse);
}

.rr-form .elementor-button[type='submit']:hover {
	background-color: var(--color-brand-primary-hover);
}