/**
 * Rootlab PDP Redesign
 * Values here are taken from the signed-off design file (Rootlab PDP Redesign.dc.html).
 *
 * Selector note: the Elementor global kit (post-9.css) styles bare `button`/`a`
 * elements at `.elementor-kit-9 button` specificity and loads after this file, so
 * every interactive element below is written as `.rl-pdp button.foo` / `.rl-pdp
 * a.foo` to win on specificity rather than resorting to !important.
 */

.rl-pdp {
	--rl-navy: #0F1039;
	--rl-orange: #DF3507;
	--rl-orange-hover: #c22e06;
	--rl-page: #F9FDF8;
	--rl-green: #EEF6EA;
	--rl-muted: #8a8a80;
	--rl-muted-dark: #4a4a44;
	--rl-star: #FBAB30;
	--rl-pink: #FBE4EC;
	--rl-card-border: #e2ecdd;

	font-family: 'Montserrat', system-ui, sans-serif;
	color: var(--rl-navy);
	background: var(--rl-page);
}

.rl-pdp *,
.rl-pdp *::before,
.rl-pdp *::after { box-sizing: border-box; }

.rl-pdp h1,
.rl-pdp h2,
.rl-pdp h3,
.rl-pdp h4 {
	font-family: 'Montserrat', system-ui, sans-serif;
	margin: 0;
	color: var(--rl-navy);
	letter-spacing: normal;
}

.rl-pdp button { font-family: 'Montserrat', system-ui, sans-serif; cursor: pointer; }
.rl-pdp a { color: var(--rl-orange); text-decoration: none; }
.rl-pdp a:hover { color: #a5280a; text-decoration: underline; }

/* The Elementor section wrapping the shortcode shouldn't add its own gutters. */
.rl-pdp .rl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.rl-pdp .rl-section { padding-top: 56px; padding-bottom: 64px; }
.rl-pdp .rl-section h2 { font-size: 22px; margin-bottom: 20px; }

.rl-hide-scrollbar { scrollbar-width: none; }
.rl-hide-scrollbar::-webkit-scrollbar { display: none; }

/* The theme prints its own breadcrumb above the content; the design carries one
   inside the page, so hide the global one here (this file only loads on PDPs). */
body.single-product .rank-math-breadcrumb { display: none; }

/* ---------------------------------------------------------------- Breadcrumb */

.rl-pdp .rl-breadcrumb { padding-top: 14px; font-size: 13px; color: #6b6b63; }
.rl-pdp .rl-breadcrumb a { color: #6b6b63; }
.rl-pdp .rl-breadcrumb a:hover { color: var(--rl-navy); }

/* ------------------------------------------------------------- Hero / buybox */

.rl-pdp .rl-hero {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 52px;
	padding-top: 20px;
	padding-bottom: 40px;
}

.rl-pdp .rl-hero__col { min-width: 0; }

/* Gallery carousel */

.rl-pdp .rl-gallery {
	position: relative;
	width: 100%;
	height: 460px;
	border-radius: 22px;
	overflow: hidden;
	background: #f0efe9;
}

.rl-pdp .rl-gallery__badges {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.rl-pdp .rl-badge {
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	line-height: 1.4;
}

.rl-pdp .rl-badge--bestseller { background: #fff; color: var(--rl-navy); }
.rl-pdp .rl-badge--sale { background: var(--rl-orange); color: #fff; }

.rl-pdp .rl-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease;
}

.rl-pdp .rl-gallery__slide.is-active {
	opacity: 1;
	visibility: visible;
	animation: rlMediaCarousel .35s ease;
}

@keyframes rlMediaCarousel {
	from { opacity: 0; transform: scale(0.98); }
	to { opacity: 1; transform: scale(1); }
}

.rl-pdp .rl-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rl-pdp button.rl-gallery__zoom {
	position: absolute;
	inset: 0;
	z-index: 1;
	border: none;
	background: rgba(15, 16, 57, 0);
	cursor: zoom-in;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all .2s;
	padding: 0;
	border-radius: 0;
	width: 100%;
	height: 100%;
}

.rl-pdp button.rl-gallery__zoom:hover { opacity: 1; background: rgba(15, 16, 57, 0.22); }
.rl-pdp button.rl-gallery__zoom svg { width: 30px; height: 30px; color: #fff; }

.rl-pdp .rl-gallery__nav {
	position: absolute;
	bottom: 18px; left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	padding: 6px 10px;
}

.rl-pdp button.rl-gallery__arrow {
	width: 20px; height: 20px;
	min-width: 0;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 0;
}

.rl-pdp button.rl-gallery__arrow svg { width: 16px; height: 16px; color: var(--rl-navy); }

.rl-pdp button.rl-gallery__dot {
	width: 7px; height: 7px;
	min-width: 0;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(15, 16, 57, 0.25);
	transition: all .2s;
}

.rl-pdp button.rl-gallery__dot.is-active { background: var(--rl-navy); width: 18px; border-radius: 999px; }

/* Hero video + lifestyle images */

.rl-pdp .rl-hero-video {
	width: 100%;
	height: 360px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--rl-navy);
	margin-top: 14px;
}

.rl-pdp .rl-hero-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.2);
}

.rl-pdp .rl-hero-extras {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;
	margin-top: 14px;
}

.rl-pdp .rl-hero-extras img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 22px;
	display: block;
	min-width: 0;
}

/* Trust icon strip (desktop row / mobile marquee) */

.rl-pdp .rl-icons { margin-top: 28px; width: 100%; position: relative; overflow: hidden; }

/* Left-aligned rather than spread: products often show only two or three of
   these, which looks sparse stretched across the full width. */
.rl-pdp .rl-icons__strip {
	display: flex;
	align-items: flex-start;
	width: 100%;
	justify-content: flex-start;
	gap: 40px;
}

.rl-pdp .rl-icons__track { display: none; align-items: flex-start; gap: 36px; width: max-content; }

.rl-pdp .rl-icon {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--rl-muted-dark);
	width: 80px;
	line-height: 1.3;
}

.rl-pdp .rl-icon__badge {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--rl-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
}

.rl-pdp .rl-icon__badge--plain {
	height: 44px;
	width: auto;
	border-radius: 0;
	background: none;
}

.rl-pdp .rl-icon__badge svg { width: 22px; height: 22px; color: #3f7a3a; }
.rl-pdp .rl-icon__badge img { width: 44px; height: 44px; object-fit: contain; display: block; }

@keyframes rlIconsMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Buybox */

/* min-height reserves space for the Reviews.io snippet, which is injected by
   JS after load. Sized to the 16px star icons so nothing shifts when it
   arrives and the gap to the title matches the design exactly. */
.rl-pdp .rl-rating-row { display: flex; align-items: center; gap: 10px; min-height: 16px; }
.rl-pdp .rl-stars { color: var(--rl-star); font-size: 15px; letter-spacing: 1px; }

/* The site carries a global `.ruk_rating_snippet { position: relative; bottom:
   50px }` nudge for the old layout, which floats the stars up next to the
   breadcrumb here. Reset it so they sit above the title as designed. */
.rl-pdp .ruk_rating_snippet {
	position: static;
	bottom: auto;
	top: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rl-pdp .rl-rating-row .ruk_rating_snippet i { color: var(--rl-star) !important; }

/* The plugin inline-styles the review count with `position:relative; bottom:2px`,
   a nudge tuned for its own font that overshoots in Montserrat and leaves the
   text sitting off-centre against the stars. Neutralise it and let the flex
   container centre both boxes on their own content. */
.rl-pdp .ruk_rating_snippet .ruk-rating-snippet-count {
	position: static !important;
	bottom: auto !important;
	top: auto !important;
	line-height: 1 !important;
}

.rl-pdp .ruk_rating_snippet i { line-height: 1 !important; }

.rl-pdp h1.rl-title {
	font-size: 27px;
	line-height: 1.25;
	font-weight: 600;
	overflow-wrap: anywhere;
	margin: 12px 0 0;
	padding: 0;
}

/* WooCommerce ships `.woocommerce div.product .product_title { margin-top: 0 }`,
   which outranks the rule above and collapses the design's 12px gap under the
   rating row. Restated here at a higher specificity than that selector. */
.rl-pdp .rl-hero h1.rl-title.product_title { margin-top: 12px; }

.rl-pdp .rl-price { font-size: 26px; font-weight: 600; margin-top: 16px; color: var(--rl-navy); }

/* WooCommerce's tax suffix ("inc. GST"), styled as the design's muted note. */
.rl-pdp .rl-price .woocommerce-price-suffix,
.rl-pdp .rl-price small {
	color: var(--rl-muted);
	font-weight: 400;
	font-size: 12px;
}

.rl-pdp .rl-price .price,
.rl-pdp .rl-price .woocommerce-Price-amount {
	font-size: 26px;
	font-weight: 600;
	color: var(--rl-navy);
	margin: 0;
	display: inline;
}

/* Sale prices. The original is context, not the headline — without this it
   inherits the 26px/600 amount styling above and competes with the real price.
   Selectors reach the nested amount/bdi because WooCommerce nests those inside
   <del>/<ins>, and <ins> carries a browser-default underline. */
.rl-pdp .rl-price del,
.rl-pdp .rl-price del *,
.rl-pdp .rl-price del .woocommerce-Price-amount {
	font-size: 17px;
	font-weight: 400;
	color: var(--rl-muted);
	opacity: 1;
	text-decoration: line-through;
	background: none;
}

.rl-pdp .rl-price ins,
.rl-pdp .rl-price ins *,
.rl-pdp .rl-price ins .woocommerce-Price-amount {
	font-size: 26px;
	font-weight: 600;
	color: var(--rl-navy);
	text-decoration: none;
	background: none;
}

/* A little air between the struck original and the current price. */
.rl-pdp .rl-price ins { margin-left: 4px; }

.rl-pdp .rl-short-desc {
	font-size: 13.5px;
	color: var(--rl-muted-dark);
	margin-top: 10px;
	line-height: 1.5;
}

.rl-pdp .rl-short-desc p { margin: 0 0 8px; }
.rl-pdp .rl-short-desc p:last-child { margin-bottom: 0; }

/* Variation pills */

.rl-pdp .rl-variations { margin-top: 26px; display: flex; flex-direction: column; gap: 20px; }

.rl-pdp .rl-variation__label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--rl-navy);
	margin-bottom: 10px;
}

.rl-pdp .rl-variation__options { display: flex; gap: 12px; flex-wrap: wrap; }

.rl-pdp button.rl-pill {
	border: 2px solid #dfe4da;
	background: #fff;
	background-color: #fff;
	color: var(--rl-navy);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 700;
	min-width: 48px;
	width: auto;
	box-shadow: 0 1px 2px rgba(15, 16, 57, 0.04);
	transition: all .15s;
	line-height: 1.4;
}

.rl-pdp button.rl-pill:hover { border-color: var(--rl-navy); background-color: #f4f5fb; color: var(--rl-navy); }

.rl-pdp button.rl-pill.is-active {
	border-color: var(--rl-navy);
	background-color: var(--rl-navy);
	color: #fff;
	box-shadow: 0 3px 10px rgba(15, 16, 57, 0.25);
	transform: translateY(-1px);
}

.rl-pdp button.rl-pill.is-unavailable { opacity: .35; cursor: not-allowed; }

/* Native WooCommerce cart form, restyled in place */

.rl-pdp .rl-cart-area { margin-top: 26px; }

.rl-pdp .rl-cart-area table.variations,
.rl-pdp .rl-cart-area .woocommerce-variation-price,
.rl-pdp .rl-cart-area .reset_variations { display: none !important; }

.rl-pdp .rl-cart-area form.cart { margin: 0; }

/* Simple products: the form itself is the quantity/heart/button row. */
.rl-pdp .rl-cart-area form.cart:not(.variations_form) {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

/* WooCommerce clearfixes form.cart with `content:" "; display:table` on its
   ::before/::after. In a flex container those generated boxes become flex items
   with the default order:0, so they sit ahead of the ordered controls below and
   contribute two 12px gaps — indenting the quantity box by 24px. Variable
   products flex .woocommerce-variation-add-to-cart instead, which is why only
   simple products showed it. Selector is deliberately specific enough to beat
   `.woocommerce div.product form.cart::before`. */
.rl-pdp .rl-hero .rl-cart-area form.cart::before,
.rl-pdp .rl-hero .rl-cart-area form.cart::after { content: none; }

/* Variable products: the row lives inside .single_variation_wrap. Flexing the
   form instead would size that wrapper to its content, leaving the row narrower
   than the column and indented by the flex gap. */
.rl-pdp .rl-cart-area form.variations_form { display: block; }
.rl-pdp .rl-cart-area .single_variation_wrap { width: 100%; }

.rl-pdp .rl-cart-area .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

/* Row order per the design: quantity, heart, then Add to Cart. The wishlist
   plugin injects its button after the cart button, so flex order re-sorts it. */
.rl-pdp .rl-cart-area .quantity { order: 1; }
.rl-pdp .rl-cart-area .stw-wishlist-button-container { order: 2; }
.rl-pdp .rl-cart-area button.single_add_to_cart_button { order: 3; }

/* Sized to its contents (36px stepper + narrow field + 36px stepper) so it
   matches the reference rather than stretching. The margin reset keeps the gap
   to the heart equal to the gap between heart and button. */
.rl-pdp .rl-cart-area .quantity {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
	height: 44px;
	background: var(--rl-green);
	margin: 0 !important;
	float: none;
}

.rl-pdp .rl-cart-area .quantity label { display: none; }

/* Save To Wishlist button, skinned to the design's circular heart. Its colours
   are set inline on the element, hence the !important. */
.rl-pdp .rl-cart-area .stw-wishlist-button-container {
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
}

.rl-pdp .rl-cart-area button.save-to-wishlist-button {
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	padding: 0 !important;
	/* The plugin adds `margin: 5px 0`, which drops it below the other controls. */
	margin: 0 !important;
	border: 1px solid #ddd !important;
	border-radius: 180px !important;
	background-color: #fff !important;
	color: var(--rl-orange) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0 !important;
	gap: 0;
}

.rl-pdp .rl-cart-area button.save-to-wishlist-button:hover {
	background-color: #fff !important;
	border-color: var(--rl-orange) !important;
}

/* Keep the heart icon, drop the "Save" label. It sits inside .stw-icon-wrapper
   and carries its own font-size, so it needs hiding explicitly — otherwise it
   also pushes the icon out of the 44px circle. */
.rl-pdp .rl-cart-area button.save-to-wishlist-button .stw-text-label,
.rl-pdp .rl-card__media button.save-to-wishlist-button .stw-text-label {
	/* Clipped rather than display:none — the label ("Save"/"Saved") is the
	   button's accessible name, and hiding it outright leaves a nameless button. */
	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;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	font-size: 12px !important;
}

.rl-pdp .rl-cart-area button.save-to-wishlist-button .stw-icon-wrapper,
.rl-pdp .rl-cart-area button.save-to-wishlist-button .stw-icon-holder {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	gap: 0 !important;
}
.rl-pdp .rl-cart-area button.save-to-wishlist-button .stw-icon-wrapper { display: flex; align-items: center; justify-content: center; }

/* The plugin's icon is a heavy filled heart that can't be thinned with CSS, so
   it's replaced with a stroked heart matching the page's other icons. Masking
   keeps it tintable via background-color. */
.rl-pdp .rl-cart-area button.save-to-wishlist-button .stw-icon-holder { display: none !important; }

.rl-pdp .rl-cart-area button.save-to-wishlist-button::before {
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	background-color: var(--rl-orange);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rl-pdp button.rl-qty-btn {
	border: none;
	background: var(--rl-green);
	background-color: var(--rl-green);
	width: 36px; height: 44px;
	min-width: 0;
	font-size: 16px;
	flex: none;
	color: var(--rl-navy);
	line-height: 1;
	padding: 0;
	border-radius: 0;
}

.rl-pdp button.rl-qty-btn:hover { background-color: #e2eddc; color: var(--rl-navy); }

.rl-pdp .rl-cart-area .quantity input.qty {
	flex: 0 0 auto;
	text-align: center;
	font-weight: 600;
	background: var(--rl-green);
	height: 44px;
	border: none;
	width: 32px;
	min-width: 32px;
	color: var(--rl-navy);
	font-size: 14px;
	-moz-appearance: textfield;
	box-shadow: none;
	padding: 0;
}

.rl-pdp .rl-cart-area .quantity input.qty::-webkit-outer-spin-button,
.rl-pdp .rl-cart-area .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Wishlist plugin output, skinned to the design's heart button. */
.rl-pdp .rl-wishlist { flex: none; display: inline-flex; }

.rl-pdp button.rl-wishlist-btn,
.rl-pdp .rl-wishlist a,
.rl-pdp .rl-wishlist button {
	border: 1px solid #ddd;
	background: #fff;
	background-color: #fff;
	width: 44px; height: 44px;
	min-width: 0;
	border-radius: 180px;
	font-size: 16px;
	flex: none;
	color: var(--rl-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	line-height: 1;
}

.rl-pdp .rl-wishlist a:hover,
.rl-pdp .rl-wishlist button:hover,
.rl-pdp button.rl-wishlist-btn:hover { text-decoration: none; border-color: var(--rl-orange); color: var(--rl-orange); }

/* The site's atc-custom-btn snippet sets colour, radius and an injected cart
   icon with !important, so the design values have to match that weight. */
.rl-pdp .rl-cart-area button.single_add_to_cart_button {
	flex: 1 1 auto;
	background-color: var(--rl-orange) !important;
	color: #fff !important;
	border: none;
	border-radius: 180px !important;
	min-height: 44px;
	height: 44px;
	padding: 14px 24px !important;
	font-weight: 600;
	font-size: 15px !important;
	letter-spacing: 0.2px;
	text-transform: none !important;
	transition: background .15s;
	width: auto;
}

.rl-pdp .rl-cart-area button.single_add_to_cart_button::before,
.rl-pdp .rl-cart-area button.single_add_to_cart_button::after { display: none !important; content: none !important; }

.rl-pdp .rl-cart-area button.single_add_to_cart_button:hover { background-color: var(--rl-orange-hover) !important; color: #fff !important; }
.rl-pdp .rl-cart-area button.single_add_to_cart_button.disabled,
.rl-pdp .rl-cart-area button.single_add_to_cart_button.wc-variation-selection-needed { opacity: .5; }

/* Out of stock: the waitlist plugin prints its "Notify me!" button just after the
   cart form, and WooCommerce hides the quantity/Add to Cart row, so this button
   stands in for Add to Cart — and is styled to match it. The plugin's own inline
   CSS sets a black background, 20px padding and max-width:150px. */

.rl-pdp .rl-cart-area .xoo-wl-btn-container,
.rl-pdp .rl-waitlist-row .xoo-wl-btn-container {
	margin: 0;
	width: 100%;
}

/* The save button is paired with "Notify me!" here (see pdp-redesign.js), so an
   out-of-stock listing keeps the same quantity-row shape: heart, then primary
   button filling the rest. */
.rl-pdp .rl-waitlist-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.rl-pdp .rl-waitlist-row .stw-wishlist-button-container { order: 1; flex: none; }
.rl-pdp .rl-waitlist-row button.xoo-wl-action-btn { order: 2; flex: 1 1 auto; width: auto; }

.rl-pdp .rl-cart-area .xoo-wl-btn-container button.xoo-wl-action-btn,
.rl-pdp .rl-waitlist-row button.xoo-wl-action-btn,
.rl-pdp .rl-cart-area button.xoo-wl-open-form-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	min-height: 44px;
	height: 44px;
	padding: 14px 24px;
	background-color: var(--rl-orange);
	color: #fff;
	border: none;
	border-radius: 180px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-transform: none;
	transition: background .15s;
}

.rl-pdp .rl-cart-area .xoo-wl-btn-container button.xoo-wl-action-btn:hover,
.rl-pdp .rl-waitlist-row button.xoo-wl-action-btn:hover,
.rl-pdp .rl-cart-area button.xoo-wl-open-form-btn:hover {
	background-color: var(--rl-orange-hover);
	color: #fff;
}

/* Buy in Bulk — a secondary action under the cart, so it doesn't compete with
   Add to Cart. The link markup comes from the bulk-order snippet. */

.rl-pdp .rl-bulk { margin-top: 14px; }

.rl-pdp .rl-bulk a.bulk-order-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--rl-navy) !important;
	border: 1.5px solid var(--rl-navy) !important;
	border-radius: 999px !important;
	padding: 10px 22px !important;
	font-size: 13.5px !important;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s;
}

.rl-pdp .rl-bulk a.bulk-order-btn:hover {
	background-color: var(--rl-navy) !important;
	color: #fff !important;
	text-decoration: none;
}

/* The snippet absolutely-positions an icon sized for its own 52px left padding,
   which overlaps the label here. The design's other secondary buttons are
   text-only, so drop it. */
.rl-pdp .rl-bulk a.bulk-order-btn::before,
.rl-pdp .rl-bulk a.bulk-order-btn::after { display: none !important; content: none !important; }

/* Frequently bought together */

.rl-pdp .rl-fbt {
	margin-top: 28px;
	border: 1px solid var(--rl-card-border);
	border-radius: 12px;
	padding: 18px;
	background: #fff;
}

.rl-pdp .rl-fbt__heading { font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.rl-pdp .rl-fbt__list { display: flex; flex-direction: column; gap: 14px; }

.rl-pdp .rl-fbt__row,
.rl-pdp button.rl-fbt__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	font-size: 13px;
	margin: 0;
	padding: 0;
	width: 100%;
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	text-align: left;
	color: var(--rl-navy);
	cursor: pointer;
}

.rl-pdp .rl-fbt__row--self { cursor: default; }

.rl-pdp .rl-fbt__box {
	width: 20px; height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--rl-navy);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 0;
}

.rl-pdp .rl-fbt__box svg { width: 12px; height: 12px; opacity: 0; }
.rl-pdp .rl-fbt__box.is-checked { background: var(--rl-navy); }
.rl-pdp .rl-fbt__box.is-checked svg { opacity: 1; }

.rl-pdp .rl-fbt__row img {
	width: 56px; height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex: none;
}

/* min-width:0 lets the name shrink and wrap — a flex child defaults to
   min-width:auto, which refuses to go below its content width and pushes the
   price outside the box. */
.rl-pdp .rl-fbt__name {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
}
.rl-pdp .rl-fbt__row--self .rl-fbt__name { font-weight: 600; }
.rl-pdp .rl-fbt__price { font-weight: 600; white-space: nowrap; }

.rl-pdp .rl-fbt__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	gap: 10px;
	flex-wrap: wrap;
}

.rl-pdp .rl-fbt__total { font-size: 13px; color: var(--rl-muted-dark); }

.rl-pdp button.rl-fbt__submit {
	background: var(--rl-navy);
	background-color: var(--rl-navy);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 12.5px;
	font-weight: 700;
	width: auto;
}

.rl-pdp button.rl-fbt__submit:hover { background-color: #1a1c5c; color: #fff; }
.rl-pdp button.rl-fbt__submit[disabled] { opacity: .45; cursor: not-allowed; }

/* Review teaser + payment icons + meta */

/* Reviews.io mounts the nuggets widget even when a product has no nuggets to
   show, leaving an empty container. The card chrome is therefore only applied
   once the JS confirms it actually rendered something — otherwise the wrapper
   collapses to nothing instead of drawing an empty white box. */
.rl-pdp .rl-review-teaser {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.rl-pdp .rl-review-teaser.is-populated {
	margin-top: 20px;
	border: 1px solid var(--rl-card-border);
	border-radius: 12px;
	padding: 20px 22px;
	background: #fff;
}

.rl-pdp .rl-secure { margin-top: 20px; }

.rl-pdp .rl-secure__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--rl-navy);
	margin-bottom: 10px;
}

.rl-pdp .rl-secure__heading svg { width: 16px; height: 16px; }
/* Brand marks come from the site's own icon fonts (same set as the footer), so
   they keep their brand colours. */
.rl-pdp .rl-secure__icons {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.rl-pdp .rl-secure__icons i {
	font-size: 28px;
	line-height: 1;
	display: inline-block;
}

.rl-pdp .rl-meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e5e5df;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rl-pdp .rl-meta__row { display: flex; justify-content: space-between; font-size: 12.5px; gap: 16px; }
.rl-pdp .rl-meta__label { color: var(--rl-muted); }
.rl-pdp .rl-meta__value { color: var(--rl-navy); font-weight: 600; text-align: right; }
.rl-pdp .rl-meta__value a { color: var(--rl-navy); }
.rl-pdp .rl-meta__value a:hover { color: var(--rl-orange); }

/* --------------------------------------------------- Product details accordion */

.rl-pdp .rl-accordion {
	background: #fff;
	border: 1px solid var(--rl-card-border);
	border-radius: 12px;
	padding: 6px 18px;
}

.rl-pdp .rl-accordion__item + .rl-accordion__item { border-top: 1px solid #eef0ec; }

.rl-pdp button.rl-accordion__trigger {
	width: 100%;
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 4px;
	text-align: left;
	font-size: 16px;
	font-weight: 600;
	color: var(--rl-navy);
	gap: 16px;
	line-height: 1.4;
}

.rl-pdp button.rl-accordion__trigger:hover { background-color: transparent; color: var(--rl-orange); }

.rl-pdp .rl-accordion__icon { font-size: 18px; font-weight: 400; flex: none; line-height: 1; }

.rl-pdp .rl-accordion__panel {
	padding: 0 4px 22px;
	font-size: 14.5px;
	line-height: 1.65;
	color: #333;
}

.rl-pdp .rl-accordion__panel[hidden] { display: none; }
.rl-pdp .rl-accordion__panel p { margin: 0 0 14px; }
.rl-pdp .rl-accordion__panel ul { padding-left: 18px; margin: 0 0 14px; }
.rl-pdp .rl-accordion__panel li { margin-bottom: 6px; }
.rl-pdp .rl-accordion__panel h2,
.rl-pdp .rl-accordion__panel h3 { font-size: 16px; margin: 0 0 10px; }
.rl-pdp .rl-accordion__panel img { max-width: 100%; height: auto; }
.rl-pdp .rl-accordion__panel table { max-width: 100%; }

/* Download row (product manual / datasheet / steriliser files) */

.rl-pdp .rl-download {
	border: 1px solid var(--rl-card-border);
	border-radius: 12px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	flex-wrap: wrap;
	gap: 12px;
	background: #fff;
}

.rl-pdp .rl-download__title { font-weight: 600; font-size: 15px; }
.rl-pdp .rl-download__sub { font-size: 13px; color: #6b6b63; }

.rl-pdp a.rl-download__btn {
	background: var(--rl-orange);
	background-color: var(--rl-orange);
	color: #fff;
	border: none;
	border-radius: 180px;
	padding: 10px 18px;
	font-weight: 600;
	font-size: 13px;
	display: inline-block;
	transition: background .15s;
	text-decoration: none;
}

.rl-pdp a.rl-download__btn:hover { background-color: var(--rl-orange-hover); color: #fff; text-decoration: none; }

/* ------------------------------------------------------------------ Timelapse */

.rl-pdp .rl-timelapse { padding-top: 8px; padding-bottom: 64px; }
.rl-pdp .rl-timelapse h2 { font-size: 22px; margin-bottom: 20px; text-align: center; }

.rl-pdp .rl-timelapse video {
	width: 100%;
	border-radius: 16px;
	display: block;
	background: var(--rl-navy);
}

/* -------------------------------------------------------- Species information */

.rl-pdp .rl-species { padding-top: 16px; padding-bottom: 64px; position: relative; }
.rl-pdp .rl-species h2 { font-size: 22px; margin-bottom: 20px; text-align: center; }

.rl-pdp .rl-species__sticker {
	position: absolute;
	top: -14px; right: -22px;
	width: 76px;
	opacity: .9;
	transform: rotate(8deg);
	z-index: 1;
	pointer-events: none;
}

.rl-pdp .rl-species__box {
	background: var(--rl-navy);
	border-radius: 20px;
	padding: 28px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.rl-pdp .rl-species__cell { background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 16px; }

.rl-pdp .rl-species__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #8f92c2;
}

.rl-pdp .rl-species__value { font-size: 15px; font-weight: 600; margin-top: 4px; color: #fff; }
.rl-pdp .rl-species__notes { grid-column: 1 / -1; padding-top: 4px; }
.rl-pdp .rl-species__notes-text { font-size: 14px; line-height: 1.6; color: #d6d7ec; }

.rl-pdp .rl-log-varieties {
	grid-column: 1 / -1;
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.rl-pdp .rl-log-variety { border-top: 1px solid rgba(255, 255, 255, 0.12); }

.rl-pdp button.rl-log-variety__trigger {
	width: 100%;
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 2px;
	text-align: left;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	gap: 12px;
}

.rl-pdp button.rl-log-variety__trigger:hover { background-color: transparent; color: #fff; opacity: .85; }

.rl-pdp .rl-log-variety__icon { transition: transform .2s; display: inline-block; font-size: 16px; }
.rl-pdp button.rl-log-variety__trigger[aria-expanded="true"] .rl-log-variety__icon { transform: rotate(45deg); }

.rl-pdp .rl-log-variety__panel {
	font-size: 13.5px;
	line-height: 1.65;
	color: #d6d7ec;
	padding: 0 2px 16px;
}

.rl-pdp .rl-log-variety__panel[hidden] { display: none; }

/* ----------------------------------------------------------------- Quick tips */

.rl-pdp .rl-wave { position: relative; line-height: 0; }
.rl-pdp .rl-wave svg { display: block; width: 100%; height: 32px; margin-bottom: -1px; }
.rl-pdp .rl-wave--green { background: var(--rl-green); }

.rl-pdp .rl-tips { background: var(--rl-green); padding: 48px 0 64px; position: relative; }
.rl-pdp .rl-tips h2 { font-size: 22px; margin-bottom: 18px; }
.rl-pdp .rl-tips__inner { position: relative; }

.rl-pdp .rl-tips__sticker {
	position: absolute;
	bottom: -24px; left: 16px;
	width: 60px;
	opacity: 0.9;
	transform: rotate(6deg);
	z-index: 1;
	pointer-events: none;
}

.rl-pdp .rl-tips__strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 6px;
	cursor: grab;
}

.rl-pdp a.rl-tip-card {
	flex: none;
	width: calc((100% - 4 * 16px) / 4.5);
	cursor: pointer;
	text-decoration: none;
	color: var(--rl-navy);
	display: block;
}

.rl-pdp a.rl-tip-card:hover { text-decoration: none; color: var(--rl-navy); }

.rl-pdp .rl-tip-card__media {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	overflow: hidden;
	background: #f0efe9;
}

.rl-pdp .rl-tip-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rl-pdp .rl-tip-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: rgba(15, 16, 57, 0.1);
}

.rl-pdp .rl-tip-card__play span {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(15, 16, 57, 0.65);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rl-pdp .rl-tip-card__play svg { width: 18px; height: 18px; }
.rl-pdp .rl-tip-card__label { font-size: 13px; font-weight: 600; margin-top: 8px; }

.rl-pdp .rl-tips__fade {
	position: absolute;
	top: 0; bottom: 6px;
	width: 90px;
	pointer-events: none;
	transition: opacity .2s;
}

.rl-pdp .rl-tips__fade--right { right: 0; background: linear-gradient(to right, rgba(238, 246, 234, 0), #EEF6EA); }
.rl-pdp .rl-tips__fade--left { left: 0; background: linear-gradient(to left, rgba(238, 246, 234, 0), #EEF6EA); opacity: 0; }
.rl-pdp .rl-tips__strip.is-scrolled ~ .rl-tips__fade--left { opacity: 1; }

.rl-pdp button.rl-tips__arrow {
	position: absolute;
	top: 140px;
	width: 34px; height: 34px;
	min-width: 0;
	border-radius: 50%;
	border: 1px solid #e5e5df;
	background: #fff;
	background-color: #fff;
	color: var(--rl-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	z-index: 2;
	padding: 0;
}

.rl-pdp button.rl-tips__arrow:hover { background-color: #fff; color: var(--rl-orange); }
.rl-pdp button.rl-tips__arrow svg { width: 16px; height: 16px; }
.rl-pdp button.rl-tips__arrow--left { left: -6px; }
.rl-pdp button.rl-tips__arrow--right { right: -6px; }

/* ------------------------------------------------------------- Product videos */

.rl-pdp .rl-videos h2 { text-align: center; }

.rl-pdp .rl-videos__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rl-pdp .rl-videos__grid--single { grid-template-columns: minmax(0, 720px); justify-content: center; }

.rl-pdp .rl-video-card,
.rl-pdp a.rl-video-card,
.rl-pdp button.rl-video-card {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	background: var(--rl-navy);
	padding: 0;
	border: none;
	cursor: pointer;
}

.rl-pdp .rl-video-card iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rl-pdp .rl-video-card img,
.rl-pdp .rl-video-card video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.rl-pdp .rl-video-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	pointer-events: none;
}

.rl-pdp .rl-video-card__play {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--rl-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rl-pdp .rl-video-card__play svg { width: 20px; height: 20px; margin-left: 2px; }

.rl-pdp .rl-video-card__title {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	background: rgba(15, 16, 57, 0.55);
	padding: 4px 10px;
	border-radius: 999px;
}

.rl-pdp .rl-videos__cta { display: flex; justify-content: center; margin-top: 24px; }

.rl-pdp a.rl-btn-navy {
	background: var(--rl-navy);
	background-color: var(--rl-navy);
	color: #fff;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	display: inline-block;
	border: none;
	transition: background .15s;
}

.rl-pdp a.rl-btn-navy:hover { color: #fff; text-decoration: none; background-color: #1a1c5c; }

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

.rl-pdp .rl-reviews { background: var(--rl-green); padding: 48px 0 72px; position: relative; }
.rl-pdp .rl-reviews h2 { font-size: 26px; text-align: center; margin-bottom: 24px; }

/* Anchored to the card, not the full-bleed section, so it sits on the white
   box's top-right corner rather than drifting out to the viewport edge. */
.rl-pdp .rl-reviews__sticker {
	position: absolute;
	top: -30px; right: -20px;
	width: 64px;
	opacity: 0.9;
	transform: rotate(-6deg);
	z-index: 2;
	pointer-events: none;
}

.rl-pdp .rl-reviews__card {
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 2px 18px rgba(15, 16, 57, 0.06);
}

/* ---------------------------------------------- Shop / archive furniture */

/* The Elementor archive template centres its heading while the breadcrumb,
   filters, toolbar and grid all start at the left margin. Note this overrides
   the alignment set on the heading widget in Elementor. */
.elementor-location-archive h1.elementor-heading-title { text-align: left; }

/* Result count and sort control share one row (see rl_pdp_toolbar_open). */
.rl-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

/* WooCommerce's default here is 16px system-font #333 — the only stray system
   font on the page. */
.rl-shop-toolbar .woocommerce-result-count {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	color: #6b6b63;
	margin: 0;
	float: none;
}

/* The theme hides the sort control; a 473-product shop needs it. */
.rl-shop-toolbar .woocommerce-ordering {
	display: block !important;
	margin: 0;
	float: none;
}

.rl-shop-toolbar .woocommerce-ordering select {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #0F1039;
	background: #fff;
	border: 1px solid #e2ecdd;
	border-radius: 999px;
	padding: 9px 38px 9px 16px;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1039' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}

.rl-shop-toolbar .woocommerce-ordering select:hover { border-color: #0F1039; }

/* Filter bar: the plugin renders each filter as a bare <h3> heading with a
   chevron, which reads as a section title rather than a control. These make the
   toggles pill-shaped, matching the variant selectors on the product page. */

/* Columns are 20% each, so the pills were spread edge to edge with big gaps.
   Sizing them to their labels puts them in a tidy row instead. */
.elementor-location-archive .elementor-column:has(.berocket_single_filter_widget) {
	width: auto;
}

.bapf_sfilter .bapf_head { cursor: pointer; }

/* Set by the script on columns whose filter resolves to a single option. */
.elementor-location-archive .elementor-column.rl-filter-thin { display: none !important; }

.bapf_sfilter .bapf_head h3 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--rl-card-border, #e2ecdd);
	border-radius: 999px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--rl-navy, #0F1039);
	white-space: nowrap;
	transition: border-color .15s, background .15s;
}

.bapf_sfilter .bapf_head:hover h3 {
	border-color: var(--rl-navy, #0F1039);
	background: #f4f5fb;
}

/* The plugin's Font Awesome chevron is a wide, thin V that sits low against a
   600-weight label. A masked SVG matches the label's stroke weight and stays
   crisp at any device pixel ratio — a CSS-border caret gets its stroke snapped
   down to a single device pixel on fractional-DPR displays. The plugin swaps
   the glyph class on toggle, which is what the flip hangs on. */
.bapf_sfilter .bapf_head h3 .bapf_colaps_smb {
	flex: none;
	width: 11px;
	height: 11px;
	margin: 0;
	border: 0;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .15s;
}

.bapf_sfilter .bapf_head h3 .bapf_colaps_smb::before { content: none; }

.bapf_sfilter .bapf_head h3 .bapf_colaps_smb.fa-chevron-up { transform: rotate(180deg); }

/* Open state: solid pill, so it's obvious which filter is expanded. The plugin
   marks the open filter with .bapf_ccolaps (closed ones carry .bapf_ocolaps). */
.bapf_sfilter.bapf_ccolaps .bapf_head h3 {
	background: var(--rl-navy, #0F1039);
	border-color: var(--rl-navy, #0F1039);
	color: #fff;
}

.bapf_sfilter.bapf_ccolaps .bapf_head:hover h3 {
	background: var(--rl-navy, #0F1039);
	border-color: var(--rl-navy, #0F1039);
}


/* The panel that drops open reads as a card rather than loose text. It floats
   above the page: in flow it widened its own column and shoved the pills to its
   right across the row every time a filter was opened. Long lists (Brands has
   ~25 entries) scroll inside the panel instead of running down the page. The
   Apply/Reset widgets wrap their button in a .bapf_body too, so they are
   excluded — they belong in the flow, not floating over the results row. */
.bapf_sfilter { position: relative; }

/* The plugin's 20px bottom margin was reserving room for an in-flow panel
   that no longer exists; on mobile it padded out each of the three wrapped
   pill rows. */
.bapf_sfilter:not(.bapf_button_berocket) { margin-bottom: 0; }

.bapf_sfilter:not(.bapf_button_berocket) .bapf_body {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--rl-card-border, #e2ecdd);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(15, 16, 57, .12);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
}

/* The price slider needs room for its handles and value labels. */
.bapf_sfilter.bapf_slidr:not(.bapf_button_berocket) .bapf_body {
	min-width: 280px;
	padding: 22px 20px 16px;
	overflow: visible;
}

/* Apply/Clear live in their own Elementor section below the filters, which left
   the button stranded on a line of its own. Shrink-wrapping both sections to
   inline-block puts the button at the end of the pill row instead. */
.elementor-location-archive .elementor-widget-wrap > .elementor-section:has(.berocket_single_filter_widget) {
	display: inline-block;
	width: auto;
	vertical-align: top;
}

/* The filters' Apply button was full-strength orange — the same colour as every
   Add to Cart on the page — sitting alone on its own line. Secondary styling and
   a tighter row keep the emphasis on the products. */
.bapf_sfilter.bapf_button_berocket { margin: 0; }

.bapf_sfilter.bapf_button_berocket button.bapf_button {
	background: transparent !important;
	background-color: transparent !important;
	color: #0F1039 !important;
	border: 1.5px solid #0F1039 !important;
	border-radius: 999px !important;
	min-height: 35px !important;
	padding: 8px 22px !important;
	font-family: 'Montserrat', system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	transition: all .15s;
}

.bapf_sfilter.bapf_button_berocket button.bapf_button:hover {
	background-color: #0F1039 !important;
	color: #fff !important;
}

/* ---------------------------------------- Cards in the WooCommerce loop */

/* On archives the card sits inside WooCommerce's own li.product, which brings
   its own border, padding and background — strip those so the card isn't drawn
   twice, and let it fill the grid cell so rows stay even. */
.woocommerce ul.products li.product.rl-loop-item,
ul.products li.product.rl-loop-item {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	box-shadow: none !important;
	list-style: none !important;
	display: flex !important;
	overflow: visible !important;
}

.rl-loop-item::before,
.rl-loop-item::after { display: none !important; }

.rl-loop-item > .rl-pdp {
	display: flex;
	width: 100%;
	background: none;
}

.rl-loop-item .rl-card { width: 100%; }

/* Two archive-only rules make the loop image differ from the product page:
   WooCommerce core gives it `margin: 0 0 1em` (so it stops short of the card
   edges) and the Elementor Products widget gives it `border-radius: 20px` (so
   its corners round instead of being clipped by the card). Reset both — the
   card's own overflow:hidden supplies the rounded top corners. */
.rl-loop-item .rl-card__media img {
	border-radius: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
}

/* WooCommerce's own loop furniture has no place inside the card. */
.rl-loop-item .woocommerce-loop-product__link,
.rl-loop-item > .onsale,
.rl-loop-item > .button,
.rl-loop-item > .added_to_cart { display: none !important; }

/* ------------------------------------------------- Product card grids (shared) */

/* Shared by the product page sections and the WooCommerce loop (the archive's
   ul.products gets the .rl-cards class), so both grids stay identical. The
   !important beats Elementor's own .elementor-grid columns and gap. */
.rl-cards {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.rl-pdp .rl-card {
	border: 1px solid var(--rl-card-border);
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
}

/* A fixed image height made the crop depend on card width — landscape (1.38)
   on desktop but portrait (0.74) in the two-column mobile grid. An aspect-ratio
   keeps the same crop at every screen size; 7/5 matches the previous desktop
   proportions to within a few pixels. */
.rl-pdp .rl-card__media { position: relative; display: block; line-height: 0; }
.rl-pdp .rl-card__media > a { display: block; line-height: 0; }

/* 3:2 to match Rootlab's standard product photography, so a correctly sized
   image fills the card with nothing cropped away.
   The ratio lives on the image rather than the wrapper because the wrapper is a
   flex item, whose min-height:auto would otherwise let the source image dictate
   its own height and override the ratio. */
.rl-pdp .rl-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Species difficulty, bottom-left — same badge shape as the discount, using the
   brand palette rather than generic traffic-light colours:
   Light Moss Green / Bright Yellow / Orioles Orange. */
.rl-pdp .rl-card__difficulty {
	position: absolute;
	bottom: 10px; left: 10px;
	z-index: 2;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 6px;
	letter-spacing: .2px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.rl-pdp .rl-card__difficulty--easy { background: #c3e2b3; color: var(--rl-navy); }
.rl-pdp .rl-card__difficulty--intermediate { background: #f8ac1a; color: var(--rl-navy); }
.rl-pdp .rl-card__difficulty--hard { background: #f84d1f; color: #fff; }

/* Discount badge, top-left so it sits opposite the heart. */
.rl-pdp .rl-card__save {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	background: var(--rl-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 6px;
	letter-spacing: .2px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Save To Wishlist's own button, skinned to the design's circular heart in the
   image corner. Its colours are inline on the element, hence the !important. */
.rl-pdp .rl-card__media .stw-wishlist-button-container {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	margin: 0;
	padding: 0;
	width: 28px; height: 28px;
}

.rl-pdp .rl-card__media button.save-to-wishlist-button {
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.9) !important;
	color: var(--rl-orange) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0 !important;
}

.rl-pdp .rl-card__media button.save-to-wishlist-button .stw-icon-holder { display: none !important; }

.rl-pdp .rl-card__media button.save-to-wishlist-button .stw-icon-wrapper {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.rl-pdp .rl-card__media button.save-to-wishlist-button::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: var(--rl-orange);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rl-pdp .rl-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Fixed two-line block (per the design) rather than min-height: the price, rating
   and CTA below must sit at the same offset regardless of title length. */
.rl-pdp a.rl-card__title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	height: 37px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rl-navy);
	text-decoration: none;
}

.rl-pdp a.rl-card__title:hover { color: var(--rl-navy); text-decoration: underline; }
.rl-pdp .rl-card__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--rl-navy);
	height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rl-pdp .rl-card__price del { opacity: .55; font-weight: 400; }
.rl-pdp .rl-card__price ins { text-decoration: none; background: none; }

.rl-pdp .rl-card__price .woocommerce-price-suffix,
.rl-pdp .rl-card__price small { font-weight: 400; color: var(--rl-muted); font-size: 12px; }

/* Reviews.io fills .ruk_rating_snippet client-side; keep it compact in cards. */
/* Fixed height like the title: the row is always present (empty for products
   with no SKU / no reviews yet) so the CTA below never shifts. */
.rl-pdp .rl-card__rating { display: flex; align-items: center; font-size: 11px; color: var(--rl-muted); gap: 6px; height: 18px; overflow: hidden; }
.rl-pdp .rl-card__rating .ruk_rating_snippet { position: static; bottom: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.rl-pdp .rl-card__rating .ruk_rating_snippet i { color: var(--rl-star) !important; font-size: 12px; }

/* Pass-through wrapper: the button inside carries the CTA's own top margin, so
   adding one here too would double the gap. */
.rl-pdp .rl-card__waitlist { margin: 0; }
.rl-pdp .rl-card__waitlist .xoo-wl-btn-container { margin: 0 !important; padding: 0 !important; width: 100%; }

.rl-pdp a.rl-card__cta,
.rl-pdp button.rl-card__cta {
	margin: 8px 0 0 !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	background: var(--rl-orange) !important;
	background-color: var(--rl-orange) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 14px !important;
	font-family: 'Montserrat', system-ui, sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-transform: none !important;
	display: block !important;
	box-shadow: none !important;
	transition: background .15s;
	text-decoration: none !important;
}

.rl-pdp a.rl-card__cta:hover,
.rl-pdp button.rl-card__cta:hover { background-color: var(--rl-orange-hover) !important; color: #fff !important; text-decoration: none !important; }

.rl-pdp .rl-related { padding-top: 56px; padding-bottom: 32px; }
.rl-pdp .rl-related h2,
.rl-pdp .rl-recent h2 { font-size: 22px; margin-bottom: 18px; }
.rl-pdp .rl-recent { padding-top: 32px; padding-bottom: 64px; }
/* ---------------------------------------------------------------- Help banner */

.rl-pdp .rl-help { background: var(--rl-page); padding: 56px 0; }

.rl-pdp .rl-help__inner {
	position: relative;
	background: var(--rl-pink);
	border-radius: 28px;
	padding: 56px 40px;
	text-align: center;
	overflow: visible;
}

.rl-pdp .rl-help__sticker { position: absolute; z-index: 1; pointer-events: none; }
.rl-pdp .rl-help__sticker--tl { top: -26px; left: -24px; width: 76px; transform: rotate(-8deg); }
.rl-pdp .rl-help__sticker--br { bottom: -30px; right: -20px; width: 80px; transform: rotate(10deg); }

.rl-pdp .rl-help__content { max-width: 520px; margin: 0 auto; position: relative; z-index: 2; }
.rl-pdp .rl-help__content h2 { font-size: 28px; color: var(--rl-navy); margin-bottom: 14px; line-height: 1.3; }

.rl-pdp .rl-help__content p {
	font-size: 15px;
	color: #33402f;
	line-height: 1.6;
	margin-bottom: 28px;
}

.rl-pdp .rl-help__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.rl-pdp a.rl-btn-orange {
	background: var(--rl-orange);
	background-color: var(--rl-orange);
	color: #fff;
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	display: inline-block;
	border: none;
	transition: background .15s;
}

.rl-pdp a.rl-btn-orange:hover { color: #fff; text-decoration: none; background-color: var(--rl-orange-hover); }

.rl-pdp a.rl-btn-outline {
	background: transparent;
	background-color: transparent;
	color: var(--rl-navy);
	border: 1.5px solid var(--rl-navy);
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	display: inline-block;
	transition: all .15s;
}

.rl-pdp a.rl-btn-outline:hover { color: #fff; text-decoration: none; background-color: var(--rl-navy); }

/* ----------------------------------------------------------------- Zoom modal */

.rl-pdp .rl-zoom {
	position: fixed;
	inset: 0;
	background: rgba(15, 16, 57, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 32px;
}

.rl-pdp .rl-zoom[hidden] { display: none; }
.rl-pdp .rl-zoom__inner { position: relative; max-width: 90vw; max-height: 90vh; }

.rl-pdp .rl-zoom__inner img {
	width: auto;
	max-width: min(90vw, 700px);
	max-height: min(90vh, 700px);
	display: block;
	border-radius: 8px;
}

.rl-pdp button.rl-zoom__close {
	position: absolute;
	top: -14px; right: -14px;
	width: 32px; height: 32px;
	min-width: 0;
	border-radius: 50%;
	background: #fff;
	background-color: #fff;
	border: none;
	font-size: 16px;
	color: var(--rl-navy);
	padding: 0;
}

/* ---------------------------------------------------------------- Breakpoints */

@media (max-width: 1100px) {
	.rl-pdp .rl-hero { grid-template-columns: 1fr; }
	.rl-cards { grid-template-columns: repeat(2, 1fr) !important; }
	.rl-pdp .rl-species__box { grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 900px) {
	.rl-pdp a.rl-tip-card { width: calc((100% - 2 * 16px) / 3.5); }
}

@media (max-width: 860px) {
	.rl-pdp .rl-wrap { padding: 0 18px; }
}

@media (max-width: 680px) {
	.rl-pdp .rl-section { padding-top: 32px; padding-bottom: 40px; }
	.rl-pdp a.rl-tip-card { width: calc((100% - 1 * 16px) / 2.5); }
	.rl-pdp .rl-videos__grid { grid-template-columns: 1fr; }
	.rl-pdp .rl-species__box { grid-template-columns: 1fr; padding: 20px; }
	.rl-pdp .rl-hero { gap: 32px; }

	/* Quantity + heart share a row, Add to Cart goes full width beneath. */
	.rl-pdp .rl-cart-area .quantity { flex: 1 1 auto; }
	.rl-pdp .rl-cart-area button.single_add_to_cart_button { flex: 0 0 100%; width: 100%; }

	/* Trust strip becomes an infinite marquee */
	.rl-pdp .rl-icons__strip { display: none !important; }

	.rl-pdp .rl-icons {
		-webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
	}

	.rl-pdp .rl-icons__track {
		display: flex !important;
		animation: rlIconsMarquee 16s linear infinite;
		gap: 56px !important;
	}

	.rl-pdp .rl-icons__track .rl-icon {
		width: calc((100vw - 36px - 4 * 56px) / 4.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		flex: none;
	}

	.rl-pdp .rl-icons__track .rl-icon__label {
		min-height: 30px;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		line-height: 1.3;
	}

	.rl-pdp .rl-icons__track .rl-icon__badge { margin-bottom: 12px; }

	.rl-pdp .rl-tips__sticker { bottom: -56px; }
	.rl-pdp .rl-gallery { height: 320px; }
	.rl-pdp .rl-hero-video { height: 240px; }
	.rl-pdp .rl-hero-extras img { height: 160px; }
	.rl-pdp .rl-help__inner { padding: 40px 22px; }
	.rl-pdp .rl-help__content h2 { font-size: 22px; }
	.rl-pdp .rl-reviews__card { padding: 20px; }
	.rl-pdp h1.rl-title { font-size: 22px; }
}

@media (max-width: 520px) {
	/* One card per row on phones — two columns leaves ~170px per card, which
	   crams the title and wraps the button onto two lines. */
	.rl-cards { grid-template-columns: 1fr !important; }

	.rl-pdp .rl-help__sticker--tl { left: 6px; width: 56px; }
	.rl-pdp .rl-help__sticker--br { right: 6px; width: 60px; }
	.rl-pdp .rl-species__sticker { right: 0; width: 58px; }
	.rl-pdp .rl-reviews__sticker { width: 52px; }
}

@media (max-width: 420px) {
	.rl-pdp .rl-tips__sticker { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.rl-pdp .rl-icons__track { animation: none; }
	.rl-pdp .rl-gallery__slide.is-active { animation: none; }
}

/* ---------------------------------------------------- Wishlisted state

   The plugin toggles .stw-active on the button when the product is saved.
   This block lives at the end of the file deliberately: the buybox and card
   heart rules above match at the same specificity, so a tie is resolved by
   source order — placing it earlier let the card's outline mask and its
   !important background win and the filled state never showed. */

.rl-pdp button.save-to-wishlist-button.stw-active::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}