/* ==========================================================================
   Relive Health — WooCommerce
   ========================================================================== */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0;
}

/* --- Shop layout ---------------------------------------------------------- */

.rl-shophead {
	padding-block: var(--rl-8) var(--rl-5);
	max-width: 60ch;
}
.rl-shophead h1 {
	font-size: var(--rl-step-2);
	margin-bottom: var(--rl-2);
	letter-spacing: -0.02em;
}
.rl-shophead p {
	font-size: var(--rl-step-0);
	color: var(--rl-ink-3);
	margin: 0;
}

/* Categories and sorting share a row. The sort control is right-aligned and
   drops below the pills only when there is genuinely no room. */
.rl-shopbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-4);
	flex-wrap: wrap;
	margin-bottom: var(--rl-6);
}
.rl-shopbar .rl-pills {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
.rl-shopbar__sort {
	flex: 0 0 auto;
	margin-left: auto;
}
.rl-shopbar__sort select {
	min-height: 40px;
	width: auto;
	min-width: 180px;
	font-size: var(--rl-step--1);
	border-color: transparent;
	background-color: var(--rl-surface-2);
	border-radius: var(--rl-r-pill);
}
@media (max-width: 640px) {
	.rl-shopbar {
		gap: var(--rl-3);
	}
	.rl-shopbar .rl-pills {
		flex: 1 1 100%;
		padding-bottom: var(--rl-2);
	}
	.rl-shopbar__sort,
	.rl-shopbar__sort select {
		width: 100%;
		min-width: 0;
	}
}

/* Category pills replace the old sidebar. One row, horizontally scrollable on
   a phone rather than collapsing behind a toggle. */
.rl-pills {
	display: flex;
	gap: var(--rl-2);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: var(--rl-2);
	margin-bottom: var(--rl-5);
}
.rl-pills::-webkit-scrollbar {
	display: none;
}
.rl-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0.55em 1.1em;
	border-radius: var(--rl-r-pill);
	background: var(--rl-surface-2);
	color: var(--rl-ink-2);
	font-size: var(--rl-step--1);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}
.rl-pill:hover {
	background: var(--rl-slate-100);
	color: var(--rl-slate-900);
}
.rl-pill.is-active {
	background: var(--rl-slate-900);
	color: #fff;
}

.rl-shop {
	padding-bottom: var(--rl-9);
}

.rl-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-3);
	flex-wrap: wrap;
	margin-bottom: var(--rl-5);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-shop__toolbar select {
	min-height: 40px;
	width: auto;
	min-width: 180px;
	font-size: var(--rl-step--1);
	border-color: transparent;
	background-color: var(--rl-surface-2);
}
@media (max-width: 560px) {
	.rl-shop__toolbar .woocommerce-ordering,
	.rl-shop__toolbar select {
		width: 100%;
		min-width: 0;
	}
}

/* --- Product grid --------------------------------------------------------- */

/* One card per row on phones. These cards carry an eyebrow, title, outcome
   line, three bullets, price, supply and a button — at 2-up on a 375px screen
   each one is ~160px wide and the content becomes unreadable. */
.woocommerce ul.products,
.rl-products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rl-4);
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}
@media (min-width: 520px) {
	.woocommerce ul.products,
	.rl-products {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 700px) {
	.woocommerce ul.products,
	.rl-products {
		gap: var(--rl-5);
	}
}
@media (min-width: 900px) {
	.woocommerce ul.products,
	.rl-products {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Four across as soon as the cards can carry it — the catalogue should read as a
   full-width grid, not a three-column column of text. */
@media (min-width: 1000px) {
	.woocommerce ul.products,
	.rl-products {
		grid-template-columns: repeat(4, 1fr);
	}
	.rl-products--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Horizontal rail: four cards visible at desktop, the rest reachable by
   scrolling sideways. Overrides the responsive grid above at every width. */
.rl-products--rail {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: calc((100% - 3 * var(--rl-5)) / 4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--rl-3);
}
.rl-products--rail > li {
	scroll-snap-align: start;
}
@media (max-width: 999px) {
	.rl-products--rail {
		grid-auto-columns: calc((100% - 2 * var(--rl-5)) / 3);
	}
}
@media (max-width: 700px) {
	.rl-products--rail {
		grid-auto-columns: 74%;
		scroll-padding-inline: var(--rl-gutter);
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* --- Product card --------------------------------------------------------
   Deliberately quiet: image, name, one benefit line, price. Everything else
   (category eyebrow, feature bullets, supply cadence, merchandising badges)
   moved to the product page — a grid of 20+ therapies is unreadable when every
   card is arguing its case.
   ---------------------------------------------------------------------- */

.rl-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* The renders are square and carry their own studio backdrop, so the image
   fills the tile edge to edge. The tile colour is sampled from that backdrop
   (#404966 top, #6D7A9A base) so the placeholder matches while the image
   loads instead of flashing a pale square. */
.rl-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	background: linear-gradient(180deg, #404966, #6d7a9a);
	border-radius: var(--rl-r-lg);
	overflow: hidden;
	margin-bottom: var(--rl-4);
}
.rl-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 500ms var(--rl-ease);
}
.rl-pcard:hover .rl-pcard__media img {
	transform: scale(1.03);
}

/* One small chip, top-left. On this store the useful signal is "this needs a
   prescription", not a sale flag. */
.rl-pcard__chip {
	position: absolute;
	top: var(--rl-3);
	left: var(--rl-3);
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--rl-step--2);
	font-weight: 600;
	line-height: 1;
	padding: 0.45em 0.7em;
	border-radius: var(--rl-r-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--rl-slate-900);
	box-shadow: var(--rl-shadow-sm);
}
.rl-pcard__chip--rx {
	color: var(--rl-blue-900);
}
.rl-pcard__chip--soon {
	color: var(--rl-warn);
}
.rl-pcard__chip .rl-icon {
	width: 0.95em;
	height: 0.95em;
}

.rl-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--rl-1);
}

.rl-pcard__title {
	font-family: var(--rl-font-display);
	font-size: var(--rl-step-0);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--rl-slate-900);
	letter-spacing: -0.01em;
}
.rl-pcard__title a {
	color: inherit;
	text-decoration: none;
}
.rl-pcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The one line of copy a card gets. */
.rl-pcard__benefit {
	font-size: var(--rl-step--1);
	line-height: 1.5;
	color: var(--rl-ink-3);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Price on its own line, then a full-width button. Side-by-side made the CTA a
   small target that competed with the price for the same row. */
.rl-pcard__foot {
	margin-top: auto;
	padding-top: var(--rl-3);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--rl-3);
}
.rl-pcard__price .amount,
.rl-pcard__price .woocommerce-Price-amount {
	font-size: var(--rl-step-0);
	font-weight: 600;
	color: var(--rl-slate-900);
}
.rl-pcard__price del {
	opacity: 0.45;
	margin-right: 0.4em;
}
.rl-pcard__price del .amount {
	font-weight: 400;
}
.rl-pcard__price ins {
	text-decoration: none;
}
.rl-pcard__cta {
	position: relative;
	z-index: 2;
	width: 100%;
}
.woocommerce ul.products li.product a.rl-pcard__cta,
.woocommerce ul.products li.product .rl-pcard__cta {
	--btn-bg: var(--rl-blue-500);
	--btn-fg: var(--rl-slate-900);
	--btn-bd: var(--rl-blue-500);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: var(--rl-step--1);
	padding: 0.7em 1.1em;
	min-height: 44px;
}
.woocommerce ul.products li.product a.rl-pcard__cta:hover,
.woocommerce ul.products li.product .rl-pcard__cta:hover {
	background: var(--rl-blue-600);
	border-color: var(--rl-blue-600);
	color: var(--rl-slate-900);
	transform: none;
	box-shadow: var(--rl-shadow-sm);
}

/* Waitlist items keep the quiet treatment — nothing to add to a cart. */
.woocommerce ul.products li.product a.rl-pcard__cta.rl-pcard__cta--soon {
	--btn-bg: transparent;
	--btn-fg: var(--rl-ink-2);
	--btn-bd: var(--rl-slate-200);
}
.woocommerce ul.products li.product a.rl-pcard__cta.rl-pcard__cta--soon:hover {
	background: var(--rl-slate-050);
	border-color: var(--rl-slate-300);
	color: var(--rl-slate-900);
	box-shadow: none;
}

/* --- Single product ------------------------------------------------------- */

.rl-single {
	padding-block: var(--rl-5) var(--rl-9);
}
.rl-single__top {
	display: grid;
	gap: var(--rl-6);
	align-items: start;
}
@media (min-width: 900px) {
	.rl-single__top {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--rl-8);
	}
}
@media (min-width: 1200px) {
	.rl-single__top {
		gap: var(--rl-9);
	}
}

.rl-gallery {
	position: relative;
}
@media (min-width: 900px) {
	.rl-gallery {
		position: sticky;
		top: calc(var(--rl-header-h) + 1.5rem);
	}
}
/* Woo renders its own gallery (flexslider + photoswipe) inside .rl-gallery, so
   everything below targets Woo's markup rather than markup of our own. */
.rl-gallery .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	margin: 0;
	float: none;
}
.rl-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The main image tile. Same inset + matched gradient as the catalogue cards, so
   the render never touches the frame. */
.rl-gallery .woocommerce-product-gallery__image,
.rl-gallery .flex-viewport {
	border-radius: var(--rl-r-lg);
	overflow: hidden;
	background: linear-gradient(180deg, #404966, #6d7a9a);
}
.rl-gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rl-gallery .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.rl-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Woo's emoji magnifier is dropped — clicking the image already opens the
   lightbox, so the glyph was decoration sitting on top of the product. */
.rl-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

/* Thumbnail strip. */
.rl-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-2);
	margin: var(--rl-3) 0 0;
	padding: 0;
	list-style: none;
}
.rl-gallery .flex-control-thumbs li {
	flex: 0 0 76px;
	width: 76px;
	margin: 0;
	list-style: none;
}
.rl-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: var(--rl-1);
	background: linear-gradient(180deg, #404966, #6d7a9a);
	border: 2px solid transparent;
	border-radius: var(--rl-r-sm);
	cursor: pointer;
	opacity: 1;
}
.rl-gallery .flex-control-thumbs img.flex-active,
.rl-gallery .flex-control-thumbs img:hover {
	border-color: var(--rl-blue);
}

.rl-summary .rl-pcard__cat {
	margin-bottom: var(--rl-2);
	display: block;
}
.rl-summary h1 {
	font-size: var(--rl-step-4);
	margin-bottom: var(--rl-3);
}
.rl-summary__short {
	font-size: var(--rl-step-1);
	line-height: 1.55;
	color: var(--rl-ink-2);
	margin-bottom: var(--rl-4);
}
.rl-summary__flags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-2);
	margin-bottom: var(--rl-4);
}

.rl-summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--rl-font-display);
	font-size: var(--rl-step-3);
	font-weight: 700;
	color: var(--rl-slate-900);
	margin: 0 0 var(--rl-1);
	line-height: 1.15;
}
.woocommerce div.product p.price del {
	opacity: 0.45;
	font-size: 0.6em;
	font-weight: 500;
}
.woocommerce div.product p.price ins {
	text-decoration: none;
}

/* Purchase panel */
.rl-buybox {
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-lg);
	padding: var(--rl-5);
	background: var(--rl-surface-2);
	margin-block: var(--rl-5);
}

/* Plan / cadence selector — the main AOV lever */
.rl-plans {
	display: grid;
	gap: var(--rl-2);
	margin-bottom: var(--rl-4);
}
.rl-plan {
	position: relative;
	display: flex;
	gap: var(--rl-3);
	align-items: flex-start;
	padding: var(--rl-4);
	background: #fff;
	border: 1.5px solid var(--rl-slate-200);
	border-radius: var(--rl-r-md);
	cursor: pointer;
	transition: border-color var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease);
}
.rl-plan:hover {
	border-color: var(--rl-slate-400);
}
.rl-plan input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.rl-plan__dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	border: 2px solid var(--rl-slate-200);
	position: relative;
	transition: border-color var(--rl-dur) var(--rl-ease);
}
.rl-plan input:checked ~ .rl-plan__dot {
	border-color: var(--rl-blue-ink);
}
.rl-plan input:checked ~ .rl-plan__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--rl-blue-ink);
}
.rl-plan:has(input:checked) {
	border-color: var(--rl-blue-ink);
	box-shadow: 0 0 0 1px var(--rl-blue-ink);
}
.rl-plan:has(input:focus-visible) {
	box-shadow: var(--rl-shadow-focus);
}
.rl-plan__main {
	flex: 1;
	min-width: 0;
}
.rl-plan__t {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: var(--rl-step-0);
	color: var(--rl-slate-900);
	flex-wrap: wrap;
}
.rl-plan__d {
	display: block;
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
	margin-top: 0.15rem;
	line-height: 1.45;
}
.rl-plan__price {
	text-align: right;
	flex: 0 0 auto;
	font-weight: 700;
	font-family: var(--rl-font-display);
	color: var(--rl-slate-900);
	line-height: 1.25;
}
.rl-plan__price small {
	display: block;
	font-family: var(--rl-font-body);
	font-weight: 400;
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}

/* Variation / quantity */
.woocommerce div.product form.cart {
	margin: 0;
}
.woocommerce div.product form.cart .variations {
	margin-bottom: var(--rl-4);
	width: 100%;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0;
	border: 0;
}
.woocommerce div.product form.cart .variations label {
	font-weight: 600;
	font-size: var(--rl-step--1);
	margin-bottom: 0.4rem;
}
.woocommerce div.product form.cart .variations .reset_variations {
	font-size: var(--rl-step--2);
	display: inline-block;
	margin-top: 0.5rem;
}
.woocommerce div.product form.cart .variations tr + tr th {
	margin-top: var(--rl-3);
}

.rl-qty {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--rl-slate-200);
	border-radius: var(--rl-r-pill);
	overflow: hidden;
	background: #fff;
	height: 52px;
}
.rl-qty button {
	width: 44px;
	height: 100%;
	border: 0;
	background: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--rl-slate-900);
	cursor: pointer;
}
.rl-qty button:hover {
	background: var(--rl-slate-050);
}
.woocommerce .rl-qty input.qty,
.rl-qty input {
	width: 46px;
	min-height: auto;
	height: 100%;
	border: 0;
	text-align: center;
	padding: 0;
	font-weight: 600;
	background: none;
	-moz-appearance: textfield;
}
.rl-qty input::-webkit-outer-spin-button,
.rl-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.rl-addtocart-row {
	display: flex;
	gap: var(--rl-2);
	align-items: stretch;
	flex-wrap: wrap;
}
.rl-addtocart-row .single_add_to_cart_button,
.rl-addtocart-row .rl-btn {
	flex: 1 1 200px;
	min-height: 52px;
}

.woocommerce div.product form.cart .button {
	float: none;
}

.rl-buybox__after {
	margin-top: var(--rl-3);
	display: grid;
	gap: var(--rl-2);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-buybox__after li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	list-style: none;
	line-height: 1.45;
}
.rl-buybox__after ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.4rem;
}
.rl-buybox__after svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--rl-success);
	margin-top: 3px;
}

/* Rx explainer strip under the buy box */
.rl-rxstrip {
	display: grid;
	gap: var(--rl-3);
	padding: var(--rl-4);
	border-radius: var(--rl-r-md);
	background: var(--rl-blue-050);
	border: 1px solid var(--rl-blue-200);
	font-size: var(--rl-step--1);
	color: var(--rl-blue-900);
	line-height: 1.55;
}
.rl-rxstrip strong {
	color: var(--rl-blue-900);
}
.rl-rxstrip ol {
	margin: 0;
	padding-left: 1.15rem;
	display: grid;
	gap: 0.35rem;
}
.rl-rxstrip li {
	margin: 0;
}

/* Product detail sections */
.rl-single__detail {
	margin-top: var(--rl-9);
	display: grid;
	gap: var(--rl-7);
}
/* Everything below the fold shares one rhythm. Without this the tabs, the
   protocol block and the contraindications ran together. */
.rl-single__detail > div > section {
	margin-top: var(--rl-9);
}
.rl-single__detail > div > section > h2 {
	margin-bottom: var(--rl-4);
}
@media (min-width: 900px) {
	.rl-single__detail {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--rl-8);
	}
}
/* Single column: the spec table is what people scan on a phone, so lift it
   above the long-form description and tabs instead of burying it. */
@media (max-width: 899px) {
	.rl-single__detail > aside {
		order: -1;
	}
}
.rl-spec {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rl-line);
	font-size: var(--rl-step--1);
}
.rl-spec__row {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: var(--rl-3);
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--rl-line);
}
.rl-spec__k {
	color: var(--rl-ink-3);
}
.rl-spec__v {
	font-weight: 500;
	color: var(--rl-slate-900);
}

/* Tabs as pills, matching the shop's category row. list-style has to be reset
   explicitly — Woo's general stylesheet used to do it and we dequeue that, which
   is what left bullets next to Description / Additional information / Reviews. */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--rl-9);
	padding-top: var(--rl-8);
	border-top: 1px solid var(--rl-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--rl-6);
	display: flex;
	gap: var(--rl-2);
	flex-wrap: wrap;
	list-style: none;
	border-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::marker {
	content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	padding: 0.55em 1.1em;
	margin: 0;
	border-radius: var(--rl-r-pill);
	background: var(--rl-surface-2);
	font-weight: 500;
	font-size: var(--rl-step--1);
	color: var(--rl-ink-2);
	text-decoration: none;
	border-bottom: 0;
	transition: background-color var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	background: var(--rl-slate-100);
	color: var(--rl-slate-900);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--rl-slate-900);
	color: #fff;
}

/* The panel headings repeat the tab label, so they should not shout. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child,
.woocommerce div.product .woocommerce-tabs .panel > h3:first-child {
	font-size: var(--rl-step-1);
	margin-bottom: var(--rl-4);
}
.woocommerce div.product .woocommerce-tabs .panel {
	margin-bottom: 0;
}

/* --- Cross-sell / related ------------------------------------------------- */

.rl-related {
	padding-block: var(--rl-8);
	border-top: 1px solid var(--rl-line);
	margin-top: var(--rl-9);
}
.rl-related h2,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-size: var(--rl-step-1);
	margin-bottom: var(--rl-5);
}

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

.rl-cartpage {
	padding-block: var(--rl-6) var(--rl-9);
}

/* Woo's cart page is a form followed by .cart-collaterals. Rather than fork
   cart.php (a big template that churns between releases) we grid the two
   siblings and let notices span the full width. */
.woocommerce-cart .rl-main .woocommerce {
	display: grid;
	gap: var(--rl-6);
	align-items: start;
}
@media (min-width: 980px) {
	.woocommerce-cart .rl-main .woocommerce {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--rl-7);
	}
}
.woocommerce-cart .rl-main .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .rl-main .woocommerce > .cart-empty,
.woocommerce-cart .rl-main .woocommerce > .return-to-shop {
	grid-column: 1 / -1;
}
.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	background: var(--rl-surface-2);
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-lg);
	padding: var(--rl-5);
}
@media (min-width: 980px) {
	.woocommerce-cart .cart-collaterals .cart_totals {
		position: sticky;
		top: calc(var(--rl-header-h) + 1.5rem);
	}
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon {
	display: flex;
	gap: var(--rl-2);
	flex-wrap: wrap;
	float: none;
	padding: var(--rl-4) 0 0;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon input.input-text {
	width: auto;
	min-width: 180px;
	flex: 1 1 180px;
	margin: 0;
}
.woocommerce-cart .woocommerce-cart-form .actions > .button {
	float: right;
	margin-top: var(--rl-4);
}

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0;
	width: 100%;
}
.woocommerce table.shop_table:not(.rl-corder) th {
	font-size: var(--rl-step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rl-ink-3);
	font-weight: 600;
	padding: 0 0 0.9rem;
	border-bottom: 1px solid var(--rl-line);
}
.woocommerce table.shop_table:not(.rl-corder) td {
	padding: var(--rl-4) 0;
	border-top: 0;
	border-bottom: 1px solid var(--rl-line);
	vertical-align: middle;
}
.woocommerce table.shop_table_responsive tr td::before {
	font-weight: 600;
	color: var(--rl-ink-3);
}
.woocommerce table.cart img {
	width: 72px;
	border-radius: var(--rl-r-sm);
}
.woocommerce a.remove {
	color: var(--rl-ink-3) !important;
	font-size: 1.3rem;
	line-height: 1;
}
.woocommerce a.remove:hover {
	background: none !important;
	color: var(--rl-danger) !important;
}
.woocommerce .cart_item .product-name a {
	font-weight: 600;
	color: var(--rl-slate-900);
	text-decoration: none;
}

.rl-ordersummary {
	background: var(--rl-surface-2);
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-lg);
	padding: var(--rl-5);
	position: sticky;
	top: calc(var(--rl-header-h) + 1.5rem);
}
.rl-ordersummary h2 {
	font-size: var(--rl-step-1);
	margin-bottom: var(--rl-4);
}
.woocommerce .cart_totals table.shop_table,
.rl-ordersummary table {
	width: 100%;
	font-size: var(--rl-step--1);
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid var(--rl-line);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--rl-step--1);
	color: var(--rl-ink-2);
	font-weight: 400;
	text-align: left;
}
.woocommerce .cart_totals table.shop_table td {
	text-align: right;
	font-weight: 500;
	color: var(--rl-slate-900);
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-bottom: 0;
	font-weight: 700;
	font-size: var(--rl-step-0);
	color: var(--rl-slate-900);
	padding-top: 0.9rem;
}
.woocommerce .cart_totals h2 {
	font-size: var(--rl-step-1);
}
.woocommerce .wc-proceed-to-checkout {
	padding: var(--rl-4) 0 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	font-size: var(--rl-step-0);
	margin: 0;
}
.woocommerce .cart-collaterals .cross-sells {
	width: 100%;
	float: none;
}

/* Free-shipping / threshold progress */
.rl-progress {
	margin-bottom: var(--rl-4);
}
.rl-progress__bar {
	height: 6px;
	border-radius: var(--rl-r-pill);
	background: var(--rl-slate-100);
	overflow: hidden;
	margin-top: var(--rl-2);
}
.rl-progress__fill {
	height: 100%;
	background: var(--rl-blue);
	border-radius: var(--rl-r-pill);
	transition: width 400ms var(--rl-ease);
}
.rl-progress__label {
	font-size: var(--rl-step--2);
	color: var(--rl-ink-2);
}

/* --- Checkout ------------------------------------------------------------- */

.rl-checkout {
	padding-block: var(--rl-6) var(--rl-9);
}
/* Two explicit columns — see woocommerce/checkout/form-checkout.php for why the
   markup is wrapped rather than auto-placed. */
.woocommerce .checkout.woocommerce-checkout {
	display: grid;
	gap: var(--rl-6);
	align-items: start;
}
@media (min-width: 980px) {
	.woocommerce .checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: var(--rl-7);
	}
	.rl-checkout__aside {
		position: sticky;
		top: calc(var(--rl-header-h) + 1.5rem);
	}
}
.rl-checkout__main,
.rl-checkout__aside {
	min-width: 0;
}

/* Cart and checkout are tasks, not reading. The full section rhythm pushed the
   first field most of a phone screen down. */
.woocommerce-cart .rl-section,
.woocommerce-checkout .rl-section {
	padding-block-start: var(--rl-6);
}
.woocommerce-cart .rl-pagehero,
.woocommerce-checkout .rl-pagehero {
	padding-block: var(--rl-6) var(--rl-5);
}
.rl-checkout__aside > h3#order_review_heading {
	margin-top: 0;
}
.woocommerce .checkout .col2-set,
.woocommerce-page .checkout .col2-set {
	width: 100%;
	display: grid;
	gap: var(--rl-5);
}
.woocommerce .checkout .col2-set .col-1,
.woocommerce .checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}
.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 var(--rl-4);
}
.woocommerce form .form-row label {
	font-weight: 500;
	font-size: var(--rl-step--1);
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}
@media (min-width: 560px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: calc(50% - 0.5rem);
		display: inline-block;
		vertical-align: top;
	}
	.woocommerce form .form-row-first {
		margin-right: 1rem;
	}
}
.woocommerce .select2-container .select2-selection--single {
	height: 48px;
	border: 1.5px solid var(--rl-slate-200);
	border-radius: var(--rl-r-sm);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 0.95rem;
	color: var(--rl-ink);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
}
.woocommerce #order_review,
.woocommerce-checkout #order_review {
	background: var(--rl-surface-2);
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-lg);
	padding: var(--rl-5);
}
@media (min-width: 980px) {
	.woocommerce-checkout #order_review {
		position: sticky;
		top: calc(var(--rl-header-h) + 1.5rem);
	}
}
.woocommerce-checkout #order_review_heading {
	font-size: var(--rl-step-1);
	margin-bottom: var(--rl-3);
}
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--rl-line);
	padding: var(--rl-4) 0;
	margin: 0;
}
.woocommerce-checkout #payment div.form-row {
	padding: var(--rl-4) 0 0;
}
.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border-radius: var(--rl-r-sm);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-2);
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #fff;
}
.woocommerce-checkout #payment #place_order {
	width: 100%;
	float: none;
	font-size: var(--rl-step-1);
	min-height: 56px;
}

.rl-checkout__promise {
	display: grid;
	gap: var(--rl-2);
	margin-top: var(--rl-4);
	padding-top: var(--rl-4);
	border-top: 1px solid var(--rl-line);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-checkout__promise li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	line-height: 1.45;
	list-style: none;
}
.rl-checkout__promise ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}
.rl-checkout__promise svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--rl-success);
	margin-top: 3px;
}

/* Checkout progress rail */
.rl-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rl-2);
	flex-wrap: wrap;
	margin-bottom: var(--rl-6);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-checkout-steps li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
}
.rl-checkout-steps ol {
	display: flex;
	gap: var(--rl-3);
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rl-checkout-steps li::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--rl-slate-100);
	color: var(--rl-ink-3);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
}
.rl-checkout-steps li.is-done::before {
	content: "✓";
	background: var(--rl-success);
	color: #fff;
}
.rl-checkout-steps li.is-current {
	color: var(--rl-slate-900);
	font-weight: 600;
}
.rl-checkout-steps li.is-current::before {
	background: var(--rl-blue);
	color: var(--rl-black);
}

/* --- Woo notices ---------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top: 0;
	border-radius: var(--rl-r-md);
	background: var(--rl-blue-050);
	color: var(--rl-blue-900);
	border: 1px solid var(--rl-blue-200);
	padding: var(--rl-4) var(--rl-4) var(--rl-4) 3rem;
	font-size: var(--rl-step--1);
	line-height: 1.55;
	margin-bottom: var(--rl-5);
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: currentColor;
	top: 1.05rem;
	left: 1.15rem;
}
.woocommerce-message {
	background: var(--rl-success-bg);
	color: var(--rl-success);
	border-color: #bfe5d6;
}
.woocommerce-error {
	background: var(--rl-danger-bg);
	color: var(--rl-danger);
	border-color: #f3c9c6;
}
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	float: none;
	margin-left: 0.75rem;
	font-size: var(--rl-step--2);
	padding: 0.55em 1.1em;
	min-height: 36px;
	vertical-align: middle;
}

/* --- Order received / thank-you page -------------------------------------- */

.rl-thankyou {
	padding-block: var(--rl-7) var(--rl-9);
}
.rl-thankyou__hero {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--rl-7);
}
.rl-thankyou__check {
	width: 68px;
	height: 68px;
	margin: 0 auto var(--rl-4);
	border-radius: 50%;
	background: var(--rl-success-bg);
	color: var(--rl-success);
	display: grid;
	place-items: center;
}
.rl-thankyou__check svg {
	width: 32px;
	height: 32px;
}
.rl-nextstep {
	background: var(--rl-slate-900);
	color: #fff;
	border-radius: var(--rl-r-lg);
	padding: var(--rl-6);
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--rl-7);
}
.rl-nextstep h2 {
	color: #fff;
	font-size: var(--rl-step-2);
	margin-bottom: var(--rl-3);
}
.rl-nextstep p {
	color: rgba(255, 255, 255, 0.8);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--rl-5);
	/* Keeps the lines even instead of leaving one orphaned word on the last
	   row, which is what made the old single-line note read as broken. */
	text-wrap: balance;
}
.rl-nextstep h2 {
	text-wrap: balance;
}

/* The intake is not optional — this block has to read as a blocker, not a
   suggestion, so it carries a flag and a warm accent rather than the quiet
   grey fineprint it used to end with. */
.rl-nextstep--required {
	border: 1px solid rgba(57, 188, 221, 0.35);
}
.rl-nextstep__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-bottom: var(--rl-3);
	padding: 0.4em 0.9em;
	border-radius: var(--rl-r-pill);
	background: var(--rl-blue);
	color: var(--rl-black);
	font-size: var(--rl-step--2);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.rl-nextstep__notes {
	list-style: none;
	margin: var(--rl-5) 0 0;
	padding: var(--rl-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 0.45rem;
	text-align: left;
	max-width: 44ch;
	margin-inline: auto;
	font-size: var(--rl-step--1);
	color: rgba(255, 255, 255, 0.72);
}
.rl-nextstep__notes li {
	margin: 0;
	padding-left: 1.35em;
	position: relative;
	line-height: 1.5;
}
.rl-nextstep__notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rl-blue);
}
.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--rl-4);
	margin: 0 0 var(--rl-6);
	padding: var(--rl-5);
	background: var(--rl-surface-2);
	border-radius: var(--rl-r-lg);
	list-style: none;
}
.woocommerce ul.order_details li {
	border: 0;
	padding: 0;
	margin: 0;
	float: none;
	font-size: var(--rl-step--2);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--rl-ink-3);
}
.woocommerce ul.order_details li strong {
	display: block;
	font-size: var(--rl-step-0);
	text-transform: none;
	letter-spacing: 0;
	color: var(--rl-slate-900);
	margin-top: 0.25rem;
}

/* --- My account ----------------------------------------------------------- */

.rl-account {
	padding-block: var(--rl-6) var(--rl-9);
}

/* Grid, not floats. Core lays the account page out as two floated siblings and
   relies on woocommerce-layout.css to clear them; that stylesheet is dequeued,
   so the container collapsed to zero height and the footer rode up underneath
   the nav. */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--rl-5);
	align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	min-width: 0;
}
@media (min-width: 900px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--rl-7);
	}
}
/* :has() fallback — body.logged-in is only present on the dashboard views. */
@supports not selector(:has(*)) {
	@media (min-width: 900px) {
		.woocommerce-account.logged-in .woocommerce {
			grid-template-columns: 240px minmax(0, 1fr);
			gap: var(--rl-7);
		}
	}
}

/* Logged-out: login (and register, when enabled) as centred cards rather than
   inputs stretched across the full page width. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-lg);
	padding: var(--rl-6);
	margin: 0;
	background: #fff;
}
.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-columns h2 {
	font-size: var(--rl-step-1);
	margin-bottom: var(--rl-4);
}
.woocommerce-account .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)) {
	max-width: 460px;
	margin-inline: auto;
}
.woocommerce-account .u-columns.col2-set {
	display: grid;
	gap: var(--rl-5);
	max-width: none;
}
@media (min-width: 800px) {
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--rl-6);
	}
	/* Widen only the logged-out login/register pair. The Addresses screen is
	   also a .col2-set, and capping it squeezed the whole dashboard. */
	.woocommerce-account .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)):has(.u-columns.col2-set) {
		max-width: 900px;
	}
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
	width: auto;
	float: none;
}
.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--rl-4);
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
	width: 100%;
	justify-content: center;
}
.woocommerce-account .woocommerce-LostPassword {
	margin: var(--rl-3) 0 0;
	font-size: var(--rl-step--1);
}

/* Woo's password reveal is an empty <span> that its general stylesheet turns
   into an eye. That sheet is dequeued, so it rendered as a stray grey box. */
.woocommerce form .password-input {
	display: block;
	position: relative;
}
.woocommerce form .password-input input {
	padding-right: 3rem;
}
.woocommerce form .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.9rem;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	cursor: pointer;
	opacity: 0.55;
	background-color: currentColor;
	-webkit-mask: var(--rl-eye) center / contain no-repeat;
	mask: var(--rl-eye) center / contain no-repeat;
}
.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input.display-password {
	opacity: 1;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-md);
	overflow: hidden;
}
.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--rl-line);
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.85rem 1rem;
	font-size: var(--rl-step--1);
	font-weight: 500;
	color: var(--rl-slate-900);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
	background: var(--rl-slate-050);
	color: var(--rl-blue-ink);
}

/* --- Reviews -------------------------------------------------------------- */

.woocommerce #reviews #comments ol.commentlist {
	padding: 0;
}
.woocommerce #reviews #comments ol.commentlist li {
	margin-bottom: var(--rl-5);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-md);
	padding: var(--rl-4);
	margin-left: 68px;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
	width: 48px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: none;
}
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--rl-blue-600);
}

/* --- Woo housekeeping ----------------------------------------------------- */

.woocommerce .woocommerce-ordering select {
	max-width: 260px;
}
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: var(--rl-2);
	justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rl-r-sm);
	border: 1px solid var(--rl-line);
	padding: 0 0.75rem;
	font-size: var(--rl-step--1);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--rl-slate-900);
	color: #fff;
	border-color: var(--rl-slate-900);
}
.woocommerce .quantity .qty {
	width: 4.5em;
}

/* --- List resets ----------------------------------------------------------
   WooCommerce builds a lot of its chrome out of <ul> — pagination, notices,
   shipping methods, payment methods, the order-review lines, tab navigation.
   Woo's general stylesheet is what normally strips the markers, and this theme
   dequeues it, which left literal bullet points next to "no available payment
   methods", the shipping row, and the shop pagination.
   ------------------------------------------------------------------------ */

.woocommerce ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul,
.rl-pagination ul,
.woocommerce ul.woocommerce-error,
.woocommerce ul.woocommerce-info,
.woocommerce ul.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce ul#shipping_method,
.woocommerce ul.wc_payment_methods,
.woocommerce ul.payment_methods,
.woocommerce ul.order_details,
.woocommerce ul.woocommerce-order-overview,
.woocommerce ul.products,
.woocommerce-checkout ul,
.woocommerce-cart ul.shop_table_responsive,
.rl-summary ul.rl-checklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.woocommerce ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul li,
.rl-pagination ul li,
.woocommerce ul.woocommerce-error li,
.woocommerce ul.woocommerce-info li,
.woocommerce ul.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li,
.woocommerce ul#shipping_method li,
.woocommerce ul.wc_payment_methods li,
.woocommerce ul.payment_methods li,
.woocommerce ul.order_details li,
.woocommerce ul.woocommerce-order-overview li {
	list-style: none;
	margin-left: 0;
}

.woocommerce ul.page-numbers li::marker,
.woocommerce nav.woocommerce-pagination ul li::marker,
.rl-pagination ul li::marker,
.woocommerce-error li::marker,
.woocommerce-info li::marker,
.woocommerce-message li::marker,
.woocommerce ul#shipping_method li::marker,
.woocommerce ul.wc_payment_methods li::marker,
.woocommerce ul.payment_methods li::marker,
.woocommerce ul.order_details li::marker,
.woocommerce ul.woocommerce-order-overview li::marker {
	content: none;
}

/* Pagination sits a long way from the footer edge rather than butting into it. */
.woocommerce nav.woocommerce-pagination,
.rl-pagination {
	margin-top: var(--rl-7);
	padding-bottom: var(--rl-4);
}
.rl-shop {
	padding-bottom: var(--rl-10, 6rem);
}

/* --- Shipping method choice ----------------------------------------------
   Shipping and local pickup are a real decision at checkout, so the radios get
   proper hit areas instead of Woo's bare list. Order comes from the zone's
   method_order — the plugin sorts pickup below shipping.
   ------------------------------------------------------------------------ */

.woocommerce ul#shipping_method {
	display: grid;
	gap: var(--rl-2);
	margin: 0 0 var(--rl-2);
}
.woocommerce ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--rl-2);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-r-md);
	transition: border-color var(--rl-dur) var(--rl-ease), background-color var(--rl-dur) var(--rl-ease);
}
.woocommerce ul#shipping_method li:has(input:checked) {
	border-color: var(--rl-blue);
	background: var(--rl-blue-050, #f2fbfe);
}
.woocommerce ul#shipping_method li input[type="radio"] {
	margin: 0;
	flex: 0 0 auto;
}
.woocommerce ul#shipping_method li label {
	margin: 0;
	font-size: var(--rl-step--1);
	font-weight: 500;
	color: var(--rl-slate-900);
	cursor: pointer;
	flex: 1;
}
.woocommerce ul#shipping_method .amount {
	font-weight: 600;
}

/* Pickup location, printed once pickup is chosen. */
.rl-pickup {
	margin-top: var(--rl-3);
	padding: var(--rl-4);
	border-radius: var(--rl-r-md);
	background: var(--rl-surface-2);
	font-size: var(--rl-step--1);
}
.rl-pickup strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--rl-slate-900);
}
.rl-pickup address {
	font-style: normal;
	line-height: 1.55;
	color: var(--rl-slate-900);
	margin: 0 0 0.5rem;
}
.rl-pickup p {
	margin: 0;
	color: var(--rl-ink-3);
	line-height: 1.5;
}

/* The pickup block sits in its own row inside the order-review table. */
.woocommerce-checkout-review-order-table .rl-pickup-row td {
	padding: 0 0 var(--rl-3);
	border: 0;
}
.woocommerce-checkout-review-order-table .rl-pickup-row .rl-pickup {
	margin-top: 0;
}

/* --- Variable products ---------------------------------------------------- */

/* One price on the page. Woo's variation price block duplicates the buy box
   price directly above it; product.js keeps the buy box in sync instead. */
.rl-buybox[data-rl-variable] .woocommerce-variation-price,
.rl-buybox[data-rl-variable] .woocommerce-variation-availability {
	display: none;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--rl-4);
	border: 0;
}
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	border: 0;
	padding: 0;
	text-align: left;
}
.woocommerce div.product form.cart .variations .label {
	margin-bottom: 0.35rem;
}
.woocommerce div.product form.cart .variations .label label {
	font-size: var(--rl-step--1);
	font-weight: 600;
	color: var(--rl-slate-900);
	margin: 0;
}
.woocommerce div.product form.cart .variations .value select {
	width: 100%;
	min-height: 48px;
	font-size: var(--rl-step-0);
}
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.woocommerce div.product form.cart .single_variation_wrap {
	margin-top: var(--rl-3);
}
/* Woo hides this until a variation is chosen; keep the layout from jumping. */
.woocommerce div.product form.cart .woocommerce-variation.single_variation {
	margin-bottom: var(--rl-3);
}

/* --- Distraction-free checkout -------------------------------------------
   The Shopify-style split: form on the left, order summary on a tinted panel
   that runs to the right edge of the viewport.

   The tint is painted as a gradient on .rl-co rather than as a background on
   the aside itself. An aside background has to be bled out to the viewport
   edge somehow, and every way of doing that (negative margin, 100vw pseudo-
   element) needs an overflow clip on an ancestor — which silently kills the
   `position: sticky` on that same aside. Splitting the page background at the
   exact column boundary has neither problem.

   The geometry is driven by two custom properties so the paint and the grid
   cannot drift apart:

     --rl-co-pad   the page gutter; collapses to the normal gutter once the
                   viewport is narrower than the container
     --rl-co-line  the x position of the boundary between the columns, which is
                   the gutter plus 53.49% of the container (1.15fr of 2.15fr)

   Change the column ratio and --rl-co-line has to change with it.
   -------------------------------------------------------------------------- */

.rl-co-page {
	--rl-co-ratio: 0.5349;
	--rl-co-tint: var(--rl-slate-050);
	background: var(--rl-surface);
}

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

.rl-cohead {
	border-bottom: 1px solid var(--rl-line);
	background: var(--rl-surface);
}
.rl-cohead__inner {
	max-width: var(--rl-wrap-wide);
	margin-inline: auto;
	padding: var(--rl-5) var(--rl-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-4);
}
.rl-cohead__logo img {
	display: block;
	width: auto;
	height: 34px;
}
.rl-cohead__secure {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-2);
	margin: 0;
	font-size: var(--rl-step--2);
	font-weight: 500;
	color: var(--rl-ink-3);
}
.rl-cohead__secure svg {
	width: 1em;
	height: 1em;
	flex: none;
}

/* Page -------------------------------------------------------------------- */

.rl-co {
	--rl-co-pad: max(var(--rl-gutter), calc(50% - var(--rl-wrap-wide) / 2));
	--rl-co-line: calc(var(--rl-co-pad) + (100% - var(--rl-co-pad) * 2) * var(--rl-co-ratio));
	min-height: 60vh;
	padding-block-end: var(--rl-9);
}
/* Woo wraps the shortcode in a bare div. It must not become a containing block
   or the columns stop filling the page width and the gradient no longer lines
   up with them. */
.rl-co .woocommerce {
	display: contents;
}

/* Notices and the coupon toggle are siblings of the form, not part of its
   grid, so they are aligned to the left column by hand. They cannot be moved
   inside it: the coupon toggle opens a <form>, and nesting that in the
   checkout form is invalid. */
.rl-co .woocommerce-notices-wrapper,
.rl-co .woocommerce-form-coupon-toggle,
.rl-co form.checkout_coupon {
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--rl-co-pad);
	margin-block: 0 var(--rl-4);
}
.rl-co .woocommerce-notices-wrapper:empty {
	display: none;
}
.rl-co .woocommerce-form-coupon-toggle,
.rl-co form.checkout_coupon {
	padding-block-start: var(--rl-5);
}

@media (min-width: 1000px) {
	.rl-co {
		background: linear-gradient(
			90deg,
			var(--rl-surface) 0 var(--rl-co-line),
			var(--rl-co-tint) var(--rl-co-line) 100%
		);
	}
	.rl-co .woocommerce-notices-wrapper,
	.rl-co .woocommerce-form-coupon-toggle,
	.rl-co form.checkout_coupon {
		width: var(--rl-co-line);
		padding-inline: var(--rl-co-pad) var(--rl-7);
	}
	.woocommerce-checkout .rl-co .checkout.woocommerce-checkout {
		grid-template-columns: 1.15fr 1fr;
		gap: 0;
		padding-inline: var(--rl-co-pad);
	}
	.rl-co .rl-checkout__main {
		padding: var(--rl-6) var(--rl-7) var(--rl-7) 0;
	}
	.rl-co .rl-checkout__aside {
		padding: var(--rl-6) 0 var(--rl-7) var(--rl-7);
		position: sticky;
		top: var(--rl-4);
	}
}

/* Below the split the panel becomes a card and leads, so the first thing on a
   phone is what is being bought and for how much. */
@media (max-width: 999px) {
	.rl-co .checkout.woocommerce-checkout {
		padding-inline: var(--rl-gutter);
		padding-block-start: var(--rl-5);
	}
	.rl-co .rl-checkout__aside {
		order: -1;
		background: var(--rl-co-tint);
		border-radius: var(--rl-r-lg);
		padding: var(--rl-5);
		margin-bottom: var(--rl-5);
	}
}

/* The summary is the tinted panel itself now, so the bordered card Woo's
   #order_review carries elsewhere would draw a box inside a box. */
.rl-co #order_review {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	position: static;
}

/* Form side --------------------------------------------------------------- */

.rl-co .rl-checkout__main h3,
.rl-co .rl-checkout__aside > h3#order_review_heading {
	font-family: var(--rl-font-body);
	font-size: var(--rl-step--2);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rl-ink-3);
	margin: var(--rl-6) 0 var(--rl-4);
	padding-bottom: var(--rl-3);
	border-bottom: 1px solid var(--rl-line);
}
.rl-co .rl-checkout__main > *:first-child h3,
.rl-co .rl-checkout__aside > h3#order_review_heading {
	margin-top: 0;
}
.rl-co #customer_details .col-1 h3 {
	margin-top: 0;
}

/* Order summary ----------------------------------------------------------- */

/* The totals rule below right-aligns every <td>; a line item is a <td> too,
   so it has to opt back out. */
.rl-corder__cell {
	padding: 0 0 var(--rl-4) !important;
	text-align: left !important;
	font-weight: 400;
}
.rl-corder__row:last-of-type .rl-corder__cell {
	padding-bottom: 0 !important;
}
.rl-corder__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--rl-4);
	align-items: center;
}
.rl-corder__thumb {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: var(--rl-r-md);
	border: 1px solid var(--rl-line);
	background: var(--rl-surface);
}
.rl-corder__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: calc(var(--rl-r-md) - 1px);
}
/* The badge overhangs the thumb corner, so the wrapper deliberately has no
   overflow clip — the image carries its own radius instead. */
.rl-corder__qty {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--rl-r-pill);
	background: var(--rl-slate-700);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}
.rl-corder__detail {
	min-width: 0;
	display: grid;
	gap: 2px;
	font-size: var(--rl-step--1);
}
.rl-corder__name {
	font-weight: 500;
	color: var(--rl-ink);
	line-height: var(--rl-lh-snug);
}
.rl-corder__detail dl,
.rl-corder__detail p {
	margin: 0;
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-corder__price {
	font-weight: 600;
	white-space: nowrap;
	font-size: var(--rl-step--1);
}

/* Totals keep Woo's table so shipping, fees, tax, coupon and the pickup row
   all stay valid rows — only the chrome changes. */
/* The markup stays a real table so Woo can keep injecting <tr> for shipping,
   fees, tax and coupons (and so our pickup row stays valid), but the layout is
   taken out of table formatting completely.

   Half-measures do not work here: giving one <tr> display:block or flex while
   the <tfoot> is still a table-footer-group makes the browser wrap it in an
   anonymous cell, which is then sized by the table's column algorithm — the
   shipping options ended up filling 200px of a 295px panel. Once nothing in
   the chain is display:table-*, no anonymous boxes are generated and every row
   is free to lay itself out. */
table.rl-corder,
.rl-corder thead,
.rl-corder tbody,
.rl-corder tfoot {
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
}
.rl-corder tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rl-4);
}
.rl-corder th,
.rl-corder td {
	display: block;
	border: 0;
	padding: var(--rl-2) 0;
	font-size: var(--rl-step--1);
	background: none;
}
.rl-corder th {
	font-weight: 400;
	color: var(--rl-ink-3);
	text-align: left;
}
.rl-corder td {
	text-align: right;
	font-weight: 500;
}
.rl-corder tfoot tr:first-child {
	margin-top: var(--rl-3);
	padding-top: var(--rl-4);
	border-top: 1px solid var(--rl-line);
}
.rl-corder .order-total {
	margin-top: var(--rl-3);
	padding-top: var(--rl-4);
	border-top: 1px solid var(--rl-line);
}
.rl-corder .order-total th,
.rl-corder .order-total td {
	font-size: var(--rl-step-1);
	font-weight: 700;
	color: var(--rl-ink);
}
.rl-corder .order-total th {
	font-weight: 600;
}

/* Trust panel ------------------------------------------------------------- */

.rl-cotrust {
	margin-top: var(--rl-5);
	padding-top: var(--rl-5);
	border-top: 1px solid var(--rl-line);
}
.rl-cotrust__head {
	font-family: var(--rl-font-body);
	font-size: var(--rl-step--2);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rl-ink-3);
	margin: 0 0 var(--rl-4);
}
.rl-cotrust ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rl-4);
}
.rl-cotrust li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--rl-3);
	align-items: start;
	margin: 0;
}
.rl-cotrust__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--rl-r-pill);
	background: var(--rl-blue-100);
	color: var(--rl-blue-ink);
}
.rl-cotrust__icon svg {
	width: 15px;
	height: 15px;
}
.rl-cotrust__text {
	display: grid;
	gap: 2px;
}
.rl-cotrust__text strong {
	font-size: var(--rl-step--1);
	font-weight: 600;
	color: var(--rl-ink);
	line-height: var(--rl-lh-snug);
}
.rl-cotrust__text span {
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
	line-height: var(--rl-lh-body);
}

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

.rl-cofoot {
	border-top: 1px solid var(--rl-line);
	background: var(--rl-surface);
}
.rl-cofoot__inner {
	max-width: var(--rl-wrap-wide);
	margin-inline: auto;
	padding: var(--rl-5) var(--rl-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-3) var(--rl-5);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-cofoot__copy {
	margin: 0;
}
.rl-cofoot__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-4);
	margin: 0;
	padding: 0;
}
.rl-cofoot__links a {
	color: inherit;
	text-decoration: none;
}
.rl-cofoot__links a:hover {
	color: var(--rl-blue-ink);
	text-decoration: underline;
}

/* The shipping row carries a radio list, not a figure, so the label sits above
   the options instead of beside them — at summary width a two-cell row squeezed
   the choices into about half the panel. */
.rl-corder tr.rl-corder__row,
.rl-corder tr.woocommerce-shipping-totals,
.rl-corder tr.rl-pickup-row {
	flex-direction: column;
	align-items: stretch;
}
.rl-corder tr.woocommerce-shipping-totals th,
.rl-corder tr.woocommerce-shipping-totals td,
.rl-corder tr.rl-pickup-row td {
	display: block;
	width: 100%;
	text-align: left;
}
.rl-corder tr.woocommerce-shipping-totals th {
	padding-bottom: var(--rl-2);
}
.rl-corder ul#shipping_method {
	margin-bottom: 0;
}
.rl-corder ul#shipping_method li {
	background: var(--rl-surface);
}

/* The notice is the first thing in the form column, so it owns the gap below
   itself rather than relying on the heading's top margin, which is collapsed
   away by the section rule above it. */
.rl-co-notice {
	margin: 0 0 var(--rl-6);
}

/* "Ship to a different address?" is an <h3>, but core renders a checkbox label
   inside it — it toggles the shipping fields, it does not title a section. The
   uppercase rule above would dress a control up as a heading. */
.rl-co .rl-checkout__main h3#ship-to-different-address {
	font-size: var(--rl-step--1);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rl-ink);
	border-bottom: 0;
	padding-bottom: 0;
	margin: var(--rl-5) 0 var(--rl-4);
}
.rl-co #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-2);
	margin: 0;
	cursor: pointer;
}

.rl-co-paynote {
	margin: calc(var(--rl-4) * -1) 0 var(--rl-4);
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}

/* --- Plan pricing --------------------------------------------------------
   Catalogue prices cover three months; the monthly figure is what people
   compare on, so it leads and the charged amount sits under it.

   Named .rl-pprice, not .rl-plan: that class is already the bordered plan-radio
   card further up this file, and reusing it wrapped every price on the
   collection grid in a white box.
   -------------------------------------------------------------------------- */

.rl-pprice {
	display: grid;
	gap: 2px;
}
.rl-pprice__mo {
	font-weight: 700;
	font-size: var(--rl-step-1);
	color: var(--rl-ink);
	line-height: 1.1;
}
.rl-pprice__from {
	font-weight: 500;
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
}
.rl-pprice__per {
	font-weight: 600;
	font-size: var(--rl-step--1);
	color: var(--rl-ink-3);
}
.rl-pprice__bill {
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
	line-height: var(--rl-lh-snug);
}

/* Product page price */
.rl-price--plan {
	display: flex;
	align-items: baseline;
	gap: var(--rl-2);
	flex-wrap: wrap;
	margin-bottom: var(--rl-3);
	font-size: var(--rl-step-4);
	font-weight: 700;
	line-height: 1;
	color: var(--rl-ink);
}
.rl-price--plan .rl-price__from {
	font-size: var(--rl-step-0);
	font-weight: 500;
	color: var(--rl-ink-3);
}
.rl-price--plan .rl-price__per {
	font-size: var(--rl-step-1);
	font-weight: 600;
	color: var(--rl-ink-3);
}

/* Plan box ---------------------------------------------------------------- */

.rl-planbox {
	border: 2px solid var(--rl-blue);
	background: var(--rl-blue-050, #f2fbfe);
	border-radius: var(--rl-r-lg);
	padding: var(--rl-4);
	margin-bottom: var(--rl-4);
}
.rl-planbox__label {
	display: block;
	font-size: var(--rl-step--2);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rl-blue-ink);
	margin-bottom: var(--rl-3);
}
.rl-planbox__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rl-4);
}
.rl-planbox__left {
	display: flex;
	align-items: flex-start;
	gap: var(--rl-3);
	min-width: 0;
}
.rl-planbox__left svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	color: var(--rl-blue-ink);
}
.rl-planbox__left strong {
	display: block;
	font-size: var(--rl-step-0);
	color: var(--rl-ink);
}
.rl-planbox__terms {
	display: block;
	font-size: var(--rl-step--2);
	color: var(--rl-ink-3);
	line-height: var(--rl-lh-snug);
	margin-top: 2px;
}
.rl-planbox__total {
	font-size: var(--rl-step-2);
	font-weight: 700;
	white-space: nowrap;
	color: var(--rl-ink);
}

/* Rx strip ---------------------------------------------------------------- */

.rl-rxstrip__line {
	margin: 0 0 var(--rl-4);
	font-size: var(--rl-step--1);
	color: inherit;
	line-height: var(--rl-lh-body);
}
.rl-rxchips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rl-3);
}
@media (min-width: 560px) {
	.rl-rxchips {
		grid-template-columns: repeat(3, 1fr);
	}
}
.rl-rxchips li {
	display: flex;
	align-items: center;
	gap: var(--rl-2);
	margin: 0;
	font-size: var(--rl-step--2);
	line-height: var(--rl-lh-snug);
}
.rl-rxchips svg {
	width: 16px;
	height: 16px;
	flex: none;
	opacity: .8;
}

/* Google reviews ---------------------------------------------------------- */

.rl-greviews {
	padding-block: var(--rl-8);
}
/* Between the buy box and the detail tabs the surrounding wrap already supplies
   the gutters, and the section sits mid-page rather than between two bands, so
   it needs a rule above it and less air than the standalone version. */
.rl-greviews--inline {
	padding-block: var(--rl-7) var(--rl-6);
	margin-top: var(--rl-7);
	border-top: 1px solid var(--rl-line);
}
.rl-greviews__head {
	text-align: center;
	margin: 0 0 var(--rl-6);
	font-size: var(--rl-step-2);
}
/* Elfsight injects its own sizing; this just stops a tall widget pushing the
   page around before its script has measured itself. */
.rl-greviews__embed {
	min-height: 120px;
}