/*!
Theme Name: Red Light Rise
Theme URI: https://redlightrise.com/
Author: maaz-dev
Author URI: https://redlightrise.com/
Description: Custom WooCommerce theme for Red Light Rise, a direct port of the brand's Shopify storefront. Red light therapy devices, 660nm and 850nm. Built on Underscores.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: maaz-dev
Tags: e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.

Red Light Rise is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> WHAT BELONGS IN THIS FILE

This file holds exactly three things, and nothing else:

    1. HEADER   announcement bar, nav, mega menu, search, mobile drawer
    2. FOOTER   brand column, menu columns, bottom bar
    3. HOMEPAGE the front-page sections            <- added in Phase 3

Every other page has its own stylesheet in assets/css/, enqueued only on the
page that needs it: single-product.css, archive-product.css, cart.css,
blog.css, page-about.css, page-contact.css, page-faq.css, 404.css, search.css.

Loaded after tokens.css and base.css, so every value here comes from a token.

There is no inline CSS anywhere in this theme. The only exception is a dynamic
PHP value handed to a CSS custom property on the element itself
(--ann-bg, --ann-text on the announcement bar; --ft-* on the footer).

TABLE OF CONTENTS
    1. Announcement bar
    2. Skip link
    3. Header shell + sticky
    4. Logo
    5. Desktop nav
    6. Simple dropdown
    7. Mega menu
    8. Right-hand actions
    9. Hamburger
   10. Predictive search
   11. Mobile search panel
   12. Mobile menu
   13. Header responsive
   14. Footer
   15. Footer responsive
   16. Homepage                                    <- Phase 3
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 0. Site shell

base.css makes <body> a full-height flex column. #page is body's only child,
so it has to pass that through for the footer's margin-top:auto to reach the
bottom of short pages.
--------------------------------------------------------------*/

.site {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	width: 100%;
	min-width: 0;
}

/*--------------------------------------------------------------
# 1. Announcement bar
--------------------------------------------------------------*/

.announcement-bar {
	background-color: var(--ann-bg, var(--rlr-ink));
	color: var(--ann-text, var(--rlr-white));
	width: 100%;
	padding: 9px 24px;
}

.announcement-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rlr-space-24);
	width: 100%;
	flex-wrap: wrap;
}

.announcement-bar__item {
	font-size: 12.5px;
	font-weight: var(--rlr-fw-medium);
	letter-spacing: var(--rlr-ls-tight);
	white-space: nowrap;
}

.announcement-bar__divider {
	opacity: 0.4;
	font-size: var(--rlr-fs-12);
}

.announcement-bar__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 1px;
	transition: border-color var(--rlr-transition);
}

.announcement-bar__link:hover {
	border-bottom-color: rgba(255, 255, 255, 0.9);
	color: inherit;
}

/*--------------------------------------------------------------
# 2. Skip link
--------------------------------------------------------------*/

.header__skip-link {
	position: fixed;
	top: -120px;
	left: 16px;
	z-index: var(--rlr-z-top);
	background: var(--rlr-brand);
	color: var(--rlr-white);
	padding: 12px 22px;
	border-radius: var(--rlr-radius-sm);
	font-size: var(--rlr-fs-14);
	font-weight: var(--rlr-fw-semibold);
	text-decoration: none;
	transition: top var(--rlr-transition);
}

.header__skip-link:focus {
	top: 16px;
	color: var(--rlr-white);
	outline: 3px solid var(--rlr-white);
	outline-offset: 2px;
}

/*--------------------------------------------------------------
# 3. Header shell + sticky
--------------------------------------------------------------*/

/*
 * The header is dark: a logo row (logo, search, contact, icons) over a
 * separate menu bar. --hdr-accent stays the brand red for the white dropdown
 * and mega panels; --hdr-hi is the lighter red that reads on the dark bars.
 */
.header {
	--hdr-bg: #0d0d0d;
	--hdr-border: rgba(255, 255, 255, 0.1);
	--hdr-text: var(--rlr-white);
	--hdr-text-muted: rgba(255, 255, 255, 0.7);
	--hdr-hi: #ff5a5a;
	--hdr-hover-bg: rgba(255, 255, 255, 0.1);
	--hdr-accent: var(--rlr-brand);
	--hdr-accent-hover: var(--rlr-brand-hover);
	--hdr-accent-light: var(--rlr-red-100);
	--hdr-height: 92px;
	--hdr-nav-height: 54px;
	--hdr-transition: 0.16s ease;

	position: relative;
	z-index: var(--rlr-z-header);
	background: var(--hdr-bg);
	color: var(--hdr-text);
	border-bottom: 1px solid var(--hdr-border);
	width: 100%;
	font-family: var(--rlr-font);
}

/*
 * Front page: the header lies over the hero image. It stays in the flow under
 * the announcement bar, and a negative bottom margin equal to its own height
 * pulls the banner up behind it. (Absolute positioning would not work here:
 * #page is a flex column, which moves an absolute child to its very top,
 * over the announcement bar.)
 *
 * Heights: 92px logo row + 1px bar border + 54px menu bar + 1px bar border
 * + 1px header border = 149px; see Header responsive for smaller screens.
 */
.header--overlay {
	--hdr-overlay-height: 149px;

	margin-bottom: calc(-1 * var(--hdr-overlay-height));
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
	border-bottom-color: transparent;
}

/* Fixed, it is out of the flow, so the pull-up margin must go with it. */
.header--overlay.is-stuck {
	margin-bottom: 0;
}

.header--sticky.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: var(--hdr-bg);
	border-bottom-color: var(--hdr-border);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Keep the stuck header below the WordPress toolbar when logged in. */
.admin-bar .header--sticky.is-stuck {
	top: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar .header--sticky.is-stuck {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {

	/* The toolbar scrolls away at this width, so the header goes to the top. */
	.admin-bar .header--sticky.is-stuck {
		top: 0;
	}
}

/* Reserves the header's height while it is fixed, so the page does not jump.
   The height is set by header.js as a custom property. */
.header__sticky-placeholder {
	display: none;
	pointer-events: none;
}

.header__sticky-placeholder[data-active] {
	display: block;
	height: var(--hdr-placeholder-height, 0);
}

.header__inner {
	display: flex;
	align-items: center;
	max-width: var(--rlr-page-width);
	margin: 0 auto;
	padding: 0 var(--rlr-gutter);
	height: var(--hdr-height);
	gap: var(--rlr-space-32);
}

/*--------------------------------------------------------------
# 4. Logo
--------------------------------------------------------------*/

.header__logo {
	flex-shrink: 0;
}

.header__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.header__logo-link:focus-visible {
	outline: 2px solid var(--hdr-accent);
	border-radius: var(--rlr-radius-sm);
	outline-offset: 3px;
}

.header__logo-link img {
	display: block;
	height: auto;
	max-height: 80px;
	width: auto;
	object-fit: contain;
}

.header__logo-text {
	font-size: var(--rlr-fs-20);
	font-weight: var(--rlr-fw-bold);
	color: var(--hdr-text);
}

/*--------------------------------------------------------------
# 5. Desktop nav
--------------------------------------------------------------*/

/* Second row: the menu bar. It is the positioning box for the mega panels. */
.header__navbar {
	position: relative;
	display: none;
	border-top: 1px solid var(--hdr-border);
	background: rgba(255, 255, 255, 0.04);
}

.header--overlay .header__navbar {
	background: rgba(0, 0, 0, 0.3);
	border-top-color: rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.header--overlay.is-stuck .header__navbar {
	background: rgba(255, 255, 255, 0.04);
	border-bottom: none;
}

.header__nav {
	display: none;
	max-width: var(--rlr-page-width);
	margin: 0 auto;
	padding: 0 var(--rlr-gutter);
}

/* The menu is centred on the bar. */
.header__nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0 var(--rlr-space-8);
}

.header__nav-item {
	position: relative;
}

/* Mega items anchor the panel to the header itself rather than to the single
   link, so the wide panel always centres on screen and never overflows. */
@media screen and (min-width: 1024px) {

	.header__nav-item--mega {
		position: static;
	}
}

.header__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--hdr-text);
	text-decoration: none;
	font-family: var(--rlr-font);
	font-size: 16px;
	font-weight: var(--rlr-fw-semibold);
	letter-spacing: 0.02em;
	padding: 0 22px;
	height: var(--hdr-nav-height);
	border: none;
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: color var(--hdr-transition);
}

.header__nav-link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 22px;
	right: 22px;
	height: 3px;
	background: var(--hdr-hi);
	transform: scaleX(0);
	transition: transform var(--hdr-transition);
	border-radius: 2px 2px 0 0;
}

.header__nav-link:hover,
.header__nav-link[aria-current="page"],
.header__nav-link--parent[aria-expanded="true"] {
	color: var(--hdr-text);
}

.header__nav-link:hover::after,
.header__nav-link[aria-current="page"]::after,
.header__nav-link--parent[aria-expanded="true"]::after {
	transform: scaleX(1);
}

.header__nav-link:focus-visible {
	outline: 2px solid var(--hdr-hi);
	outline-offset: -3px;
	border-radius: var(--rlr-radius-sm);
}

.header__caret {
	flex-shrink: 0;
	transition: transform var(--hdr-transition);
	opacity: 0.75;
}

.header__nav-link--parent[aria-expanded="true"] .header__caret {
	transform: rotate(180deg);
	opacity: 1;
}

/*--------------------------------------------------------------
# 6. Simple dropdown
--------------------------------------------------------------*/

.header__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--rlr-white);
	border: 1px solid var(--rlr-border-soft);
	border-top: 2px solid var(--hdr-accent);
	border-radius: 0 0 var(--rlr-radius) var(--rlr-radius);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--hdr-transition), transform var(--hdr-transition), visibility var(--hdr-transition);
	z-index: var(--rlr-z-scrim);
		max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.header__nav-item--has-dropdown:hover .header__dropdown,
.header__nav-item--has-dropdown:focus-within .header__dropdown,
.header__nav-link--parent[aria-expanded="true"] ~ .header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header__dropdown-heading {
	padding: 4px 16px 8px;
	border-bottom: 1px solid var(--rlr-surface-300);
	margin-bottom: 4px;
}

.header__dropdown-link {
	display: block;
	color: #333333;
	text-decoration: none;
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-14);
	font-weight: var(--rlr-fw-regular);
	padding: 9px 20px;
	white-space: nowrap;
	transition: color var(--hdr-transition), background var(--hdr-transition);
}

.header__dropdown-link:hover,
.header__dropdown-link:focus-visible {
	color: var(--hdr-accent);
	background: var(--hdr-accent-light);
	outline: none;
}

.header__dropdown-link--all {
	font-size: var(--rlr-fs-13);
	font-weight: var(--rlr-fw-bold);
	color: var(--hdr-accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# 7. Mega menu
--------------------------------------------------------------*/

.header__mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	width: min(1080px, calc(100vw - 32px));
	background: var(--rlr-white);
	border: 1px solid var(--rlr-border-soft);
	border-top: 3px solid var(--hdr-accent);
	border-radius: 0 0 var(--rlr-radius-xl) var(--rlr-radius-xl);
	box-shadow: var(--rlr-shadow-xl);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--hdr-transition), transform var(--hdr-transition), visibility var(--hdr-transition);
	z-index: var(--rlr-z-scrim);
}

.header__nav-link--parent[aria-expanded="true"] ~ .header__mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.header__mega-inner {
	padding: 22px 26px 24px;
	max-height: min(74vh, 620px);
	overflow-y: auto;
}

.header__mega-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rlr-space-16);
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--rlr-surface-300);
}

.header__mega-title {
	font-size: var(--rlr-fs-12);
	font-weight: var(--rlr-fw-bold);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #9a9a9a;
	margin: 0;
}

.header__mega-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: var(--rlr-fw-bold);
	letter-spacing: var(--rlr-ls-normal);
	text-transform: uppercase;
	color: var(--hdr-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: gap var(--hdr-transition), color var(--hdr-transition);
}

.header__mega-all:hover {
	color: var(--hdr-accent-hover);
	gap: 9px;
}

.header__mega-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.header__mega-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--rlr-white);
	border: 1px solid #ededed;
	border-radius: var(--rlr-radius-lg);
	overflow: hidden;
	transition: border-color var(--hdr-transition), box-shadow var(--hdr-transition), transform var(--hdr-transition);
}

.header__mega-card:hover,
.header__mega-card:focus-visible {
	border-color: var(--hdr-accent);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
	outline: none;
}

/* The whole product must stay visible, so the image is contained, not cropped. */
.header__mega-card-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--rlr-surface-50);
	padding: 10px;
}

.header__mega-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.header__mega-card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--rlr-radius);
	background: linear-gradient(135deg, #f2f2f2, #e6e6e6);
}

.header__mega-card-text {
	display: block;
	padding: 10px 12px 13px;
	border-top: 1px solid #f2f2f2;
}

.header__mega-card-label {
	display: block;
	font-size: 13.5px;
	font-weight: var(--rlr-fw-semibold);
	color: var(--rlr-ink-soft);
	line-height: var(--rlr-lh-snug);
	transition: color var(--hdr-transition);
}

.header__mega-card:hover .header__mega-card-label {
	color: var(--hdr-accent);
}

.header__mega-card-desc {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: #9a9a9a;
	line-height: var(--rlr-lh-heading);
}

.header__mega-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: var(--rlr-z-raised);
	background: var(--hdr-accent);
	color: var(--rlr-white);
	font-size: var(--rlr-fs-10);
	font-weight: var(--rlr-fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: var(--rlr-radius-pill);
}

/*--------------------------------------------------------------
# 8. Right-hand actions
--------------------------------------------------------------*/

.header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Search sits in the middle of the logo row as a glass pill. */
.header__search-wrap {
	display: none;
	position: relative;
	flex: 1 1 auto;
	max-width: 520px;
	margin: 0 auto;
}

.header__search-form {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	transition: border-color var(--hdr-transition), background var(--hdr-transition), box-shadow var(--hdr-transition);
}

.header__search-form:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

.header__search-form:focus-within {
	border-color: var(--rlr-white);
	background: var(--rlr-white);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.header__search-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 44px;
	padding: 0 8px 0 20px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--hdr-text);
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-14);
	outline: none;
}

.header__search-input::placeholder {
	color: var(--hdr-text-muted);
	font-size: 13.5px;
}

.header__search-form:focus-within .header__search-input {
	color: var(--rlr-ink);
}

.header__search-form:focus-within .header__search-input::placeholder {
	color: var(--rlr-text-dim);
}

.header__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 44px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	color: var(--hdr-text);
	cursor: pointer;
	transition: color var(--hdr-transition);
}

.header__search-btn:hover {
	color: var(--hdr-hi);
}

.header__search-form:focus-within .header__search-btn {
	color: var(--hdr-accent);
}

.header__search-btn:focus-visible {
	outline: 2px solid var(--hdr-hi);
	outline-offset: -4px;
	border-radius: 999px;
}

/* Contact line: small label over the number, as on a phone-first storefront. */
.header__contact {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-right: 10px;
	color: var(--hdr-text);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}

.header__contact-label {
	font-size: 11.5px;
	font-weight: var(--rlr-fw-medium);
	color: var(--hdr-text-muted);
}

.header__contact-value {
	font-size: var(--rlr-fs-14);
	font-weight: var(--rlr-fw-bold);
	letter-spacing: 0.01em;
	transition: color var(--hdr-transition);
}

.header__contact:hover .header__contact-value,
.header__contact:focus-visible .header__contact-value {
	color: var(--hdr-hi);
}

.header__contact:focus-visible {
	outline: 2px solid var(--hdr-hi);
	outline-offset: 4px;
	border-radius: var(--rlr-radius-sm);
}

.header__search-toggle {
	display: none;
}

.header__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--hdr-text);
	background: transparent;
	border: none;
	border-radius: var(--rlr-radius-6);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--hdr-transition), background var(--hdr-transition);
	flex-shrink: 0;
}

.header__icon-btn:hover,
.header__icon-btn:focus-visible {
	color: var(--hdr-hi);
	background: var(--hdr-hover-bg);
	outline: none;
}

.header__icon-btn:focus-visible {
	outline: 2px solid var(--hdr-hi);
	outline-offset: 2px;
}

/* Icon with a small word under it (Sign in, Cart), desktop only. */
.header__icon-label {
	display: none;
	font-size: var(--rlr-fs-12);
	font-weight: var(--rlr-fw-semibold);
	line-height: 1;
	white-space: nowrap;
}

.header__cart-badge {
	position: absolute;
	top: 5px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hdr-accent);
	color: var(--rlr-white);
	font-size: var(--rlr-fs-10);
	font-weight: var(--rlr-fw-bold);
	border-radius: var(--rlr-radius-10);
	line-height: var(--rlr-lh-none);
	pointer-events: none;
}

/*--------------------------------------------------------------
# 9. Hamburger
--------------------------------------------------------------*/

.header__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: transparent;
	border: none;
	border-radius: var(--rlr-radius-6);
	cursor: pointer;
	color: var(--hdr-text);
	transition: background var(--hdr-transition), color var(--hdr-transition);
}

.header__hamburger:hover,
.header__hamburger:focus-visible {
	background: var(--hdr-hover-bg);
	color: var(--hdr-hi);
	outline: none;
}

.header__hamburger:focus-visible {
	outline: 2px solid var(--hdr-hi);
	outline-offset: 2px;
}

.header__hamburger-icon {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.header__hamburger-icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentcolor;
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.15s ease, top 0.22s ease;
}

.header__hamburger-icon span:nth-child(1) {
	top: 0;
}

.header__hamburger-icon span:nth-child(2) {
	top: 7px;
}

.header__hamburger-icon span:nth-child(3) {
	top: 14px;
}

.header__hamburger[aria-expanded="true"] .header__hamburger-icon span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-icon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-icon span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/*--------------------------------------------------------------
# 10. Predictive search
--------------------------------------------------------------*/

.header__predictive-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 380px;
	max-height: 420px;
	overflow-y: auto;
	background: var(--rlr-white);
	border: 1px solid var(--rlr-border-soft);
	border-radius: var(--rlr-radius-lg);
	box-shadow: var(--rlr-shadow-lg);
	z-index: var(--rlr-z-drawer);
	padding: 8px;
}

.header__predictive-results--mobile {
	position: static;
	width: 100%;
	max-height: 60vh;
	box-shadow: none;
	border: none;
	border-top: 1px solid var(--rlr-border-light);
	border-radius: 0;
	margin-top: 10px;
	padding: 10px 0 0;
}

.header__predictive-group-label {
	font-size: var(--rlr-fs-11);
	font-weight: var(--rlr-fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rlr-text-dim);
	padding: 10px 12px 6px;
}

.header__predictive-item {
	display: flex;
	align-items: center;
	gap: var(--rlr-space-12);
	padding: 8px 12px;
	border-radius: var(--rlr-radius);
	text-decoration: none;
	color: #333333;
	transition: background var(--hdr-transition);
}

.header__predictive-item:hover,
.header__predictive-item:focus-visible {
	background: var(--hdr-accent-light);
	color: #333333;
	outline: none;
}

.header__predictive-item-image {
	width: 44px;
	height: 44px;
	border-radius: var(--rlr-radius-6);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--rlr-surface-300);
}

.header__predictive-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.header__predictive-item-title {
	font-size: 13.5px;
	font-weight: var(--rlr-fw-semibold);
	color: var(--rlr-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header__predictive-item-price {
	font-size: var(--rlr-fs-13);
	font-weight: var(--rlr-fw-bold);
	color: var(--hdr-accent);
}

.header__predictive-item--collection,
.header__predictive-item--page {
	font-size: 13.5px;
	font-weight: var(--rlr-fw-medium);
	color: #333333;
}

.header__predictive-view-all {
	display: block;
	margin-top: 6px;
	padding: 12px;
	text-align: center;
	border-top: 1px solid var(--rlr-surface-300);
	font-size: var(--rlr-fs-13);
	font-weight: var(--rlr-fw-bold);
	color: var(--hdr-accent);
	text-decoration: none;
}

.header__predictive-view-all:hover {
	background: var(--hdr-accent-light);
	border-radius: 0 0 var(--rlr-radius) var(--rlr-radius);
}

.header__predictive-empty {
	padding: 20px 14px;
	text-align: center;
	font-size: 13.5px;
	color: var(--rlr-text-faint);
}

.header__predictive-loading {
	padding: 20px 14px;
	text-align: center;
	font-size: var(--rlr-fs-13);
	color: var(--rlr-text-dim);
}

/*--------------------------------------------------------------
# 11. Mobile search panel
--------------------------------------------------------------*/

.header__search-panel {
	background: var(--rlr-white);
	border-top: 1px solid var(--rlr-border-light);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.28s ease;
}

.header__search-panel[data-open] {
	max-height: 100px;
}

.header__search-panel-inner {
	padding: 14px 20px;
}

.header__search-panel-form {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid #dedede;
	border-radius: var(--rlr-radius);
	padding: 0 14px;
	background: var(--rlr-surface-200);
}

.header__search-panel-form:focus-within {
	border-color: var(--hdr-accent);
	background: var(--rlr-white);
}

.header__search-panel-icon {
	color: var(--rlr-text-dim);
	flex-shrink: 0;
}

.header__search-panel-input {
	flex: 1;
	height: 44px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--rlr-ink);
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-15);
	outline: none;
}

.header__search-panel-input::placeholder {
	color: var(--rlr-text-dim);
}

.header__search-panel-submit {
	background: var(--hdr-accent);
	border: none;
	color: var(--rlr-white);
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-13);
	font-weight: var(--rlr-fw-semibold);
	padding: 8px 16px;
	border-radius: var(--rlr-radius-6);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--hdr-transition);
}

.header__search-panel-submit:hover {
	background: var(--hdr-accent-hover);
}

/*--------------------------------------------------------------
# 12. Mobile menu
--------------------------------------------------------------*/

.header__mobile-menu {
	background: var(--rlr-white);
	border-top: 1px solid var(--rlr-border-light);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.32s ease;
	box-shadow: var(--rlr-shadow);
}

.header__mobile-menu[data-open] {
	max-height: 85vh;
	overflow-y: auto;
}

.header__mobile-list {
	list-style: none;
	margin: 0;
	padding: 4px 0 16px;
}

.header__mobile-item {
	border-bottom: 1px solid var(--rlr-surface-300);
}

.header__mobile-item:last-child {
	border-bottom: none;
}

.header__mobile-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 20px;
	background: transparent;
	border: none;
	color: var(--rlr-ink);
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-15);
	font-weight: var(--rlr-fw-medium);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
	transition: color var(--hdr-transition), background var(--hdr-transition);
}

.header__mobile-link:hover,
.header__mobile-link:focus-visible {
	color: var(--hdr-accent);
	background: var(--hdr-accent-light);
	outline: none;
}

.header__mobile-link--parent[aria-expanded="true"] {
	color: var(--hdr-accent);
}

.header__mobile-link--parent[aria-expanded="true"] .header__caret {
	transform: rotate(180deg);
}

.header__mobile-dropdown {
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	background: var(--rlr-surface-50);
}

.header__mobile-dropdown-link {
	display: block;
	padding: 11px 20px 11px 36px;
	color: #444444;
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-14);
	text-decoration: none;
	transition: color var(--hdr-transition), background var(--hdr-transition);
}

.header__mobile-dropdown-link:hover,
.header__mobile-dropdown-link:focus-visible {
	color: var(--hdr-accent);
	background: var(--hdr-accent-light);
	outline: none;
}

.header__mobile-dropdown-link--parent {
	font-weight: var(--rlr-fw-bold);
	font-size: var(--rlr-fs-12);
	color: var(--hdr-accent);
	text-transform: uppercase;
	letter-spacing: var(--rlr-ls-wide);
}

.header__mobile-dropdown-link--mega {
	display: flex;
	align-items: center;
	gap: var(--rlr-space-12);
	padding-left: 20px;
}

.header__mobile-thumb {
	width: 36px;
	height: 36px;
	border-radius: var(--rlr-radius-6);
	object-fit: cover;
	flex-shrink: 0;
	background: #efefef;
	display: inline-block;
}

/*--------------------------------------------------------------
# 13. Header responsive
--------------------------------------------------------------*/

/* Desktop: full nav + mega menu. */
@media screen and (min-width: 1024px) {

	.header__hamburger {
		display: none !important;
	}

	.header__navbar {
		display: block;
	}

	.header__nav {
		display: flex;
	}

	.header__search-wrap {
		display: flex;
	}

	/* Results drop under the pill at its full width. */
	.header__predictive-results:not(.header__predictive-results--mobile) {
		width: 100%;
		min-width: 380px;
	}

	.header__actions {
		gap: 4px;
	}

	.header__icon-btn--labelled {
		flex-direction: column;
		gap: 5px;
		width: auto;
		min-width: 54px;
		height: 56px;
		padding: 0 8px;
		border-radius: var(--rlr-radius);
	}

	.header__icon-btn--labelled .header__icon-label {
		display: block;
	}

	.header__icon-btn--labelled .header__cart-badge {
		top: 2px;
		right: 6px;
	}

	.header__search-toggle,
	.header__mobile-menu,
	.header__search-panel {
		display: none !important;
	}
}

/* Large desktop: let the mega panel use more room, and show the contact line. */
@media screen and (min-width: 1280px) {

	.header__mega {
		width: min(1160px, calc(100vw - 48px));
	}

	.header__contact {
		display: flex;
	}
}

/* Small desktop / large tablet landscape: keep the panel inside the viewport. */
@media screen and (min-width: 1024px) and (max-width: 1180px) {

	.header__mega {
		width: min(880px, calc(100vw - 24px));
	}

	.header__mega-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.header__mega-inner {
		padding: 18px 20px 20px;
	}
}

/* Tablet + mobile: hamburger and drawer. */
@media screen and (max-width: 1023px) {

	.header__inner {
		gap: var(--rlr-space-8);
		height: 64px;
		padding: 0 var(--rlr-space-16);
	}

	/* No menu bar here: 64px row + 1px border. */
	.header--overlay {
		--hdr-overlay-height: 65px;
	}

	.header__logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.header__logo-link img {
		max-height: 52px;
	}

	.header__actions {
		gap: 2px;
	}

	.header__hamburger,
	.header__search-toggle {
		display: inline-flex;
	}

	.header__nav,
	.header__mega {
		display: none !important;
	}

	/* Keep the drawer scrollable on short and landscape screens. */
	.header__mobile-menu {
		max-height: calc(100vh - 64px);
		max-height: calc(100dvh - 64px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Tablet portrait: give the drawer a comfortable width. */
@media screen and (min-width: 600px) and (max-width: 1023px) {

	.header__mobile-menu {
		max-width: 420px;
	}

	.header__mobile-thumb {
		width: 40px;
		height: 40px;
	}
}

/* Small phones. */
@media screen and (max-width: 480px) {

	.header__inner {
		padding: 0 var(--rlr-space-12);
	}

	.announcement-bar__inner {
		gap: var(--rlr-space-12);
	}

	.announcement-bar__divider {
		display: none;
	}

	.header__logo-link img {
		max-height: 46px;
	}

	.header__mobile-link {
		font-size: var(--rlr-fs-16);
	}
}

/* Very small phones. */
@media screen and (max-width: 360px) {

	.header__inner {
		height: 56px;
		padding: 0 10px;
	}

	.header--overlay {
		--hdr-overlay-height: 57px;
	}

	.header__actions {
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.header__hamburger-icon span,
	.header__dropdown,
	.header__mega,
	.header__mega-card,
	.header__mobile-menu,
	.header__search-panel,
	.header__caret,
	.header__nav-link::after {
		transition: none !important;
	}

	.header__mega-card:hover {
		transform: none;
	}
}

/*--------------------------------------------------------------
# 14. Footer
--------------------------------------------------------------*/

.footer {
	background: var(--ft-bg, var(--rlr-dark-bg));
	width: 100%;
	border-top: 1px solid var(--ft-border, rgba(255, 255, 255, 0.08));
	font-family: var(--rlr-font);
	margin-top: auto;
}

.footer__inner {
	max-width: var(--rlr-page-width);
	margin: 0 auto;
	padding: 0 var(--rlr-gutter);
}

.footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--rlr-space-48);
	padding: var(--rlr-space-64) 0 var(--rlr-space-48);
	border-bottom: 1px solid var(--ft-border, rgba(255, 255, 255, 0.08));
}

.footer__logo-link {
	display: inline-block;
	margin-bottom: var(--rlr-space-16);
}

.footer__logo-link img {
	display: block;
	height: auto;
	max-height: 76px;
	width: auto;
}

.footer__logo-text {
	display: inline-block;
	font-size: var(--rlr-fs-20);
	font-weight: var(--rlr-fw-bold);
	color: var(--ft-title, var(--rlr-white));
	text-decoration: none;
	margin-bottom: var(--rlr-space-16);
}

.footer__tagline {
	font-size: var(--rlr-fs-13);
	font-weight: var(--rlr-fw-semibold);
	color: var(--ft-accent, var(--rlr-brand));
	margin: 0 0 var(--rlr-space-12);
	letter-spacing: var(--rlr-ls-tight);
}

.footer__disclaimer {
	font-size: var(--rlr-fs-12);
	color: rgba(255, 255, 255, 0.35);
	margin: 0 0 var(--rlr-space-20);
	line-height: var(--rlr-lh-relaxed);
	max-width: 340px;
}

.footer__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer__contact-link {
	display: inline-flex;
	align-items: center;
	gap: var(--rlr-space-8);
	font-size: var(--rlr-fs-13);
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color var(--rlr-transition);
}

.footer__contact-link:hover {
	color: var(--rlr-white);
}

.footer__col-title {
	font-size: var(--rlr-fs-13);
	font-weight: var(--rlr-fw-bold);
	color: var(--ft-title, var(--rlr-white));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer__link,
.footer__links a {
	font-size: var(--rlr-fs-14);
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color var(--rlr-transition);
	line-height: var(--rlr-lh-heading);
}

.footer__link:hover,
.footer__links a:hover {
	color: var(--rlr-white);
}

.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rlr-space-24) 0;
	gap: var(--rlr-space-20);
	flex-wrap: wrap;
}

.footer__copyright {
	font-size: var(--rlr-fs-13);
	color: rgba(255, 255, 255, 0.35);
	margin: 0;
}

.footer__payment {
	display: flex;
	align-items: center;
	gap: var(--rlr-space-8);
	flex-wrap: wrap;
}

.footer__payment-icon {
	height: 24px;
	width: auto;
	border-radius: var(--rlr-radius-xs);
	opacity: 0.7;
}

/*--------------------------------------------------------------
# 15. Footer responsive
--------------------------------------------------------------*/

@media screen and (max-width: 1024px) {

	.footer__top {
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--rlr-space-32);
	}

	.footer__brand {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 768px) {

	.footer__inner {
		padding: 0 var(--rlr-space-20);
	}

	.footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--rlr-space-32);
		padding: var(--rlr-space-48) 0 var(--rlr-space-32);
	}

	.footer__brand {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 480px) {

	.footer__inner {
		padding: 0 var(--rlr-space-16);
	}

	.footer__top {
		grid-template-columns: 1fr;
		gap: var(--rlr-space-28);
	}

	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rlr-space-16);
	}
}

/*--------------------------------------------------------------
# 16. Homepage

Ported from the Shopify homepage sections. The CSS below is the Shopify
stylesheet blocks verbatim, with one systematic change: each section used to
receive its own colour custom properties from an inline style attribute
(--cmp-bg, --tm-title-color, --wu-text and so on). Those are all mapped onto a
single shared set -- --sec-bg, --sec-title, --sec-text, --sec-accent,
--sec-card-bg, --sec-border, --sec-highlight-bg -- which the background preset
below defines.

That is what makes the preset system work: choosing "Dark" for a section
repaints its heading, body text, cards and borders together, so a section can
never end up with dark text on a dark background.

Section padding comes from tokens rather than per-section settings.

TABLE OF CONTENTS
   16.0 Section shell + background presets
   16.1 Hero
   16.2 Featured products
   16.3 Comparison table
   16.4 Featured collections
   16.5 Before and after
   16.6 Testimonials
   16.7 RLT feature (explainer + benefits)
   16.8 Why us
   16.9 Certifications
   16.10 Blog posts
   16.11 FAQ
   16.12 CTA banner
   16.13 Newsletter
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 16.0 Section shell + background presets
--------------------------------------------------------------*/

.rlr-sec {
	--sec-pt: var(--rlr-section-py);
	--sec-pb: var(--rlr-section-py);
	--sec-bg: var(--rlr-surface);
	--sec-title: var(--rlr-ink);
	--sec-text: var(--rlr-text-muted);
	--sec-accent: var(--rlr-brand);
	--sec-card-bg: var(--rlr-surface);
	--sec-border: var(--rlr-border-soft);
	--sec-highlight-bg: var(--rlr-surface-compare);
	--sec-highlight-text: var(--rlr-brand);
	--sec-columns: 4;
}

.rlr-sec--white {
	--sec-bg: var(--rlr-surface);
}

.rlr-sec--grey {
	--sec-bg: var(--rlr-surface-100);
}

.rlr-sec--offwhite {
	--sec-bg: var(--rlr-surface-50);
}

.rlr-sec--dark {
	--sec-bg: var(--rlr-dark-bg);
	--sec-title: var(--rlr-dark-title);
	--sec-text: var(--rlr-dark-text);
	--sec-card-bg: var(--rlr-ink-2);
	--sec-border: var(--rlr-dark-border);
	--sec-highlight-bg: var(--rlr-ink-2);
	--sec-highlight-text: var(--rlr-white);
}

/* Taller rhythm, used by the two RLT feature sections. */
.rlr-sec--tall {
	--sec-pt: var(--rlr-section-py-lg);
	--sec-pb: var(--rlr-section-py-lg);
}

/* Shorter rhythm, used by the CTA banner. */
.rlr-sec--short {
	--sec-pt: var(--rlr-section-py-sm);
	--sec-pb: var(--rlr-section-py-sm);
}

/*
 * Article table and badge colours.
 *
 * The Shopify section published these from an inline <style> block because
 * Liquid cannot run inside its stylesheet block. This theme has no inline CSS,
 * so they are ordinary tokens, set to the values the store had saved.
 */
:root {
	--rlr-badge-bg: var(--rlr-green);
	--rlr-badge-fg: var(--rlr-white);
	--rlr-table-head-bg: var(--rlr-brand);
	--rlr-table-head-fg: var(--rlr-white);
	--rlr-table-border: var(--rlr-border-table);
	--rlr-table-stripe: var(--rlr-surface-150);
	--rlr-table-font-size: var(--rlr-fs-14);
	--rlr-table-link: var(--rlr-brand);
}

/*--------------------------------------------------------------
# 16.1 Hero
--------------------------------------------------------------*/


.hero {
  position: relative;
  width: 100vw;
  min-width: 100%;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
}

.hero__slider {
  position: relative;
  width: 100%;
}

.hero__slide {
  position: relative;
  display: none;
  width: 100%;
  min-height: 580px;
  overflow: hidden;
}

.hero__slide--active {
  display: flex;
  align-items: center;
}

.hero__image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__image-wrap--placeholder .hero__placeholder-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0000 0%, #4a0000 50%, #8B0000 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.35));
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 48px;
  width: 100%;
}

.hero__content--left { text-align: left; }
.hero__content--center { text-align: center; margin: 0 auto; }
.hero__content--right { text-align: right; margin-left: auto; }

.hero__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 12px;
}

.hero__heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 600px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.hero__content--center .hero__heading { margin: 0 auto 16px; }

.hero__text {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 28px;
  max-width: 480px;
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.hero__content--center .hero__text { margin: 0 auto 28px; }

.hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__content--center .hero__btns { justify-content: center; }
.hero__content--right .hero__btns { justify-content: flex-end; }

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.hero__btn--primary {
  background: #FFFFFF;
  color: #111111;
  border: 2px solid #FFFFFF;
}

.hero__btn--primary:hover {
  background: transparent;
  color: #FFFFFF;
}

.hero__btn--secondary {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.7);
}

.hero__btn--secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: #FFFFFF;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}

.hero__arrow:hover { background: rgba(255,255,255,0.3); }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }

.hero__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.hero__dot--active {
  background: #FFFFFF;
  width: 24px;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .hero__slide { min-height: 460px; }
  .hero__content { padding: 60px 24px; }
  .hero__heading { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .hero__btn { padding: 12px 24px; font-size: 14px; }
  .hero__arrow { width: 38px; height: 38px; }
}

@media screen and (max-width: 480px) {
  .hero__slide { min-height: 400px; }
  .hero__content { padding: 40px 20px; }
}

/*--------------------------------------------------------------
# 16.1a Hero under the overlay header

When the header lies over the hero, the banner fills the screen below the
announcement bar, and the content is pushed down clear of the two header
rows (149px on desktop, 65px on mobile; see .header--overlay).
--------------------------------------------------------------*/

.has-overlay-header {
  --hero-top-offset: 37px; /* the announcement bar */
  --hero-header-space: 149px;
}

.has-overlay-header.admin-bar {
  --hero-top-offset: 69px;
}

.has-overlay-header .hero__slide {
  min-height: max(620px, calc(100vh - var(--hero-top-offset)));
  min-height: max(620px, calc(100svh - var(--hero-top-offset)));
}

.has-overlay-header .hero__content {
  padding: calc(var(--hero-header-space) + 56px) var(--rlr-gutter) 96px;
}

/* Darker on the text side, lighter where the photo is. */
.has-overlay-header .hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, calc(var(--overlay-opacity, 0.35) + 0.25)) 0%,
    rgba(0, 0, 0, var(--overlay-opacity, 0.35)) 50%,
    rgba(0, 0, 0, calc(var(--overlay-opacity, 0.35) * 0.4)) 100%
  );
}

.has-overlay-header .hero__subheading {
  color: var(--hdr-hi, #ff5a5a);
  font-size: 14px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.has-overlay-header .hero__heading {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin-bottom: 20px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.has-overlay-header .hero__text {
  font-size: 1.15rem;
  max-width: 560px;
  margin-bottom: 34px;
}

.has-overlay-header .hero__btn {
  padding: 15px 34px;
}

@media screen and (max-width: 1023px) {

  .has-overlay-header {
    --hero-header-space: 65px;
  }

  .has-overlay-header .hero__slide {
    min-height: max(520px, calc(100svh - var(--hero-top-offset)));
  }

  .has-overlay-header .hero__content {
    padding: calc(var(--hero-header-space) + 48px) 24px 72px;
  }
}

@media screen and (max-width: 782px) {

  .has-overlay-header.admin-bar {
    --hero-top-offset: 83px;
  }
}

@media screen and (max-width: 480px) {

  .has-overlay-header .hero__slide {
    min-height: max(480px, calc(100svh - var(--hero-top-offset)));
  }

  .has-overlay-header .hero__content {
    padding: calc(var(--hero-header-space) + 36px) 20px 64px;
  }

  .has-overlay-header .hero__text {
    font-size: 1rem;
  }
}


/*--------------------------------------------------------------
# 16.2 Featured products
--------------------------------------------------------------*/


.featured-products {
  padding: 80px 0;
  background: #FFFFFF;
}

.featured-products__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== HEADER ===== */
.featured-products__header {
  text-align: center;
  margin-bottom: 48px;
}

.featured-products__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B0000;
  margin: 0 0 10px;
}

.featured-products__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #111111;
  margin: 0 0 12px;
  line-height: 1.2;
}

.featured-products__desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #666666;
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.6;
}

/* ===== GRID ===== */
.featured-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ===== PRODUCT CARD ===== */
.product-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* ===== IMAGE ===== */
.product-card__image-link {
  display: block;
  text-decoration: none;
}

.product-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F8F8F8;
  overflow: hidden;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image {
  transform: scale(1.04);
}

.product-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CCCCCC;
}

.product-card__placeholder svg {
  width: 60px;
  height: 60px;
}

/* Badge */
.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #8B0000;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ===== INFO ===== */
.product-card__info {
  padding: 18px 20px 20px;
}

.product-card__vendor {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999999;
  margin: 0 0 6px;
}

.product-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 10px;
  line-height: 1.4;
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.product-card__title a:hover {
  color: #8B0000;
}

/* Price */
.product-card__price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.product-card__price--regular {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
}

.product-card__price--sale {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #8B0000;
}

.product-card__price--compare {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #AAAAAA;
  text-decoration: line-through;
}

/* Button */
.product-card__btn {
  display: block;
  width: 100%;
  padding: 11px 20px;
  background: #111111;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.18s ease;
  cursor: pointer;
}

.product-card__btn:hover {
  background: #8B0000;
}

.product-card__btn--disabled {
  background: #EEEEEE;
  color: #AAAAAA;
  cursor: default;
}

/* Placeholder lines */
.product-card__placeholder-text {
  margin-bottom: 16px;
}

.product-card__placeholder-line {
  background: #F0F0F0;
  border-radius: 4px;
  margin-bottom: 8px;
}

.product-card__placeholder-line--title {
  height: 16px;
  width: 80%;
}

.product-card__placeholder-line--price {
  height: 14px;
  width: 40%;
}

/* ===== VIEW ALL ===== */
.featured-products__footer {
  text-align: center;
  margin-top: 48px;
}

.featured-products__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111111;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #111111;
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.featured-products__view-all:hover {
  color: #8B0000;
  border-color: #8B0000;
}

.featured-products {
   border-top: 4px solid #8B0000;
   border-bottom: 4px solid #8B0000;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .featured-products__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .featured-products {
    padding: 60px 0;
  }
  .featured-products__inner {
    padding: 0 20px;
  }
  .featured-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .featured-products__header {
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 480px) {
  .featured-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .product-card__info {
    padding: 14px 14px 16px;
  }
}


/*--------------------------------------------------------------
# 16.3 Comparison table
--------------------------------------------------------------*/


.comparison {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #FFFFFF);
  width: 100%;
  border-top: 1px solid #EBEBEB;
  border-bottom: 4px solid var(--sec-accent, #8B0000);
}

.comparison__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== LAYOUT ===== */
.comparison__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}

/* ===== MEDIA ===== */
.comparison__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 16px;
}

.comparison__image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: #F5F5F5;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #CCCCCC;
}

.comparison__image-placeholder svg {
  width: 56px;
  height: 56px;
}

.comparison__image-placeholder p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

/* ===== HEADER ===== */
.comparison__header {
  margin-bottom: 28px;
}

.comparison__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 10px;
}

.comparison__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
  line-height: 1.2;
}

/* ===== TABLE ===== */
.comparison__table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #EBEBEB;
}

/* Header row */
.comparison__th {
  padding: 14px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  background: #F8F8F8;
  border-bottom: 2px solid #EBEBEB;
  color: #888888;
}

.comparison__th--feature {
  text-align: left;
  width: 55%;
  color: #666666;
}

.comparison__th--us {
  background: var(--sec-highlight-bg, #FFF5F5);
  color: var(--sec-accent, #8B0000);
  width: 22.5%;
}

.comparison__th--them {
  width: 22.5%;
}

/* Our brand label */
.comparison__our-brand {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--sec-accent, #8B0000);
  letter-spacing: 0.03em;
}

/* Data rows */
.comparison__row {
  border-bottom: 1px solid #F0F0F0;
  transition: background 0.15s ease;
}

.comparison__row:last-child {
  border-bottom: none;
}

.comparison__row:hover {
  background: #FAFAFA;
}

.comparison__td {
  padding: 16px 20px;
  vertical-align: middle;
  text-align: center;
}

.comparison__td--feature {
  text-align: left;
}

.comparison__td--us {
  background: var(--sec-highlight-bg, #FFF5F5);
}

/* Feature text */
.comparison__feature-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sec-title, #111111);
  margin-bottom: 3px;
  line-height: 1.4;
}

.comparison__feature-desc {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #999999;
  line-height: 1.4;
}

/* Icons */
.comparison__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.comparison__custom-value {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sec-title, #111111);
}

/* ===== CTA ===== */
.comparison__cta {
  margin-top: 24px;
}

.comparison__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: var(--sec-accent, #8B0000);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.18s ease;
}

.comparison__btn:hover {
  background: #6B0000;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .comparison__layout {
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .comparison {
    padding: 60px 0;
  }
  .comparison__inner {
    padding: 0 20px;
  }
  .comparison__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .comparison__image {
    max-width: 320px;
    margin: 0 auto;
  }
  .comparison__th,
  .comparison__td {
    padding: 12px 14px;
  }
  .comparison__feature-title {
    font-size: 13px;
  }
}

@media screen and (max-width: 480px) {
  .comparison__inner {
    padding: 0 16px;
  }
  .comparison__th--feature,
  .comparison__td--feature {
    width: 50%;
  }
}


/*--------------------------------------------------------------
# 16.4 Featured collections
--------------------------------------------------------------*/


.feat-col {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #F8F8F8);
  width: 100%;
  border-bottom: 4px solid #8B0000;
}

.feat-col__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== HEADER ===== */
.feat-col__header {
  margin-bottom: 32px;
}

.feat-col__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 8px;
}

.feat-col__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feat-col__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
  line-height: 1.2;
}

/* ===== ARROWS ===== */
.feat-col__arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.feat-col__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid #E0E0E0;
  border-radius: 50%;
  color: #111111;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.feat-col__arrow:hover {
  background: var(--sec-accent, #8B0000);
  border-color: var(--sec-accent, #8B0000);
  color: #FFFFFF;
}

.feat-col__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ===== SLIDER ===== */
.feat-col__slider-wrap {
  overflow: hidden;
}

.feat-col__track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ===== CARD ===== */
.feat-col__card {
  flex: 0 0 calc(25% - 12px);
  min-width: 220px;
  text-decoration: none;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #EEEEEE;
}

.feat-col__card-img-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 16px;
  background: #E0E0E0;
}

.feat-col__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.feat-col__card:hover .feat-col__card-img {
  transform: scale(1.07);
}

.feat-col__card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #BBBBBB;
  background: #E8E8E8;
}

.feat-col__card-placeholder svg {
  width: 56px;
  height: 56px;
}

.feat-col__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,calc(var(--fc-overlay, 0.55))) 100%
  );
  z-index: 1;
}

.feat-col__card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 20px 18px 18px;
}

.feat-col__card-title {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 4px;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.feat-col__card-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  margin: 0 0 10px;
  line-height: 1.4;
}

.feat-col__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.4);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.feat-col__card:hover .feat-col__card-btn {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #111111;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .feat-col__card {
    flex: 0 0 calc(33.333% - 11px);
  }
}

@media screen and (max-width: 768px) {
  .feat-col {
    padding: 60px 0;
  }
  .feat-col__inner {
    padding: 0 20px;
  }
  .feat-col__card {
    flex: 0 0 calc(50% - 8px);
  }
}

@media screen and (max-width: 480px) {
  .feat-col__inner {
    padding: 0 16px;
  }
  .feat-col__card {
    flex: 0 0 72%;
  }
  .feat-col__track {
    gap: 12px;
  }
}


/*--------------------------------------------------------------
# 16.5 Before and after
--------------------------------------------------------------*/


.before-after {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #FFFFFF);
  width: 100%;
  border-top: 1px solid #EBEBEB;
  border-bottom: 4px solid var(--sec-accent, #8B0000);
}

.before-after__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.before-after__header {
  margin-bottom: 32px;
}

.before-after__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 10px;
}

.before-after__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.before-after__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
  line-height: 1.2;
}

.before-after__header-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border: 1.5px solid #111111;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.before-after__header-btn:hover {
  background: #111111;
  color: #FFFFFF;
}

/* Slider */
.before-after__slider-wrap {
  position: relative;
  overflow: hidden;
}

.before-after__track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Pair */
.before-after__pair {
  flex: 0 0 calc(50% - 8px);
  min-width: 0;
}

.before-after__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.before-after__img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #F0F0F0;
}

.before-after__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.before-after__pair:hover .before-after__img {
  transform: scale(1.04);
}

.before-after__img-placeholder {
  width: 100%;
  height: 100%;
  background: #E8E8E8;
}

.before-after__label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(0,0,0,0.55);
  padding: 4px 10px;
  border-radius: 4px;
}

.before-after__label--after {
  background: var(--sec-accent, #8B0000);
}

.before-after__caption {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #888888;
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* Arrows */
.before-after__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid #E0E0E0;
  border-radius: 50%;
  color: #111111;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: all 0.18s ease;
}

.before-after__arrow:hover {
  background: var(--sec-accent, #8B0000);
  border-color: var(--sec-accent, #8B0000);
  color: #FFFFFF;
}

.before-after__arrow--prev { left: -20px; }
.before-after__arrow--next { right: -20px; }
.before-after__arrow:disabled { opacity: 0.3; pointer-events: none; }

.before-after__disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #AAAAAA;
  text-align: center;
  margin: 20px 0 0;
  font-style: italic;
}

@media screen and (max-width: 768px) {
  .before-after { padding: 60px 0; }
  .before-after__inner { padding: 0 20px; }
  .before-after__pair { flex: 0 0 calc(100% - 0px); }
  .before-after__arrow--prev { left: -10px; }
  .before-after__arrow--next { right: -10px; }
}

@media screen and (max-width: 480px) {
  .before-after__inner { padding: 0 16px; }
}


/*--------------------------------------------------------------
# 16.6 Testimonials
--------------------------------------------------------------*/


.testimonials {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #FAFAFA);
  width: 100%;
  border-top: 1px solid #EBEBEB;
  border-bottom: 4px solid var(--sec-accent, #8B0000);
}

.testimonials__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.testimonials__header {
  margin-bottom: 36px;
}

.testimonials__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 10px;
}

.testimonials__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.testimonials__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
}

.testimonials__arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.testimonials__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid #E0E0E0;
  border-radius: 50%;
  color: #111111;
  cursor: pointer;
  transition: all 0.18s ease;
}

.testimonials__arrow:hover {
  background: var(--sec-accent, #8B0000);
  border-color: var(--sec-accent, #8B0000);
  color: #FFFFFF;
}

.testimonials__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.testimonials__overall {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.testimonials__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.testimonials__overall-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #444444;
  margin: 0;
}

/* Slider */
.testimonials__slider-wrap { overflow: hidden; }

.testimonials__track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card */
.testimonials__card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  background: var(--sec-card-bg, #FFFFFF);
  border: 1px solid #EBEBEB;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonials__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.testimonials__stars--card { gap: 2px; }

.testimonials__verified {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4CAF50;
  background: #F0FFF0;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.testimonials__card-heading {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
  line-height: 1.4;
}

.testimonials__card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--sec-text, #555555);
  margin: 0;
  line-height: 1.7;
  flex: 1;
}

.testimonials__card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #F0F0F0;
  margin-top: auto;
}

.testimonials__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonials__avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sec-accent, #8B0000);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonials__author-name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--sec-title, #111111);
}

.testimonials__author-location {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #999999;
}

@media screen and (max-width: 1024px) {
  .testimonials__card { flex: 0 0 calc(50% - 10px); }
}

@media screen and (max-width: 768px) {
  .testimonials { padding: 60px 0; }
  .testimonials__inner { padding: 0 20px; }
  .testimonials__card { flex: 0 0 calc(100%); }
}

@media screen and (max-width: 480px) {
  .testimonials__inner { padding: 0 16px; }
}


/*--------------------------------------------------------------
# 16.7 RLT feature (explainer + benefits)
--------------------------------------------------------------*/


.rlt-explainer {
  padding: var(--sec-pt, 100px) 0 var(--sec-pb, 100px);
  background: var(--sec-bg, #FFFFFF);
  width: 100%;
  border-top: 1px solid #EBEBEB;
  border-bottom: 4px solid #8B0000;
}
.rlt-explainer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== GRID ===== */
.rlt-explainer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ===== MEDIA ===== */
.rlt-explainer__media {
  position: relative;
  order: 1;
}

.rlt-explainer__media--right {
  order: 2;
}

.rlt-explainer__content {
  order: 2;
}

.rlt-explainer__media--right ~ .rlt-explainer__content {
  order: 1;
}

.rlt-explainer__img-wrap {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #F0F0F0;
}

.rlt-explainer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.rlt-explainer__img-wrap:hover .rlt-explainer__img {
  transform: scale(1.03);
}

.rlt-explainer__img-wrap--placeholder {
  border: 2px dashed #E0E0E0;
}

.rlt-explainer__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #BBBBBB;
}

.rlt-explainer__placeholder svg {
  width: 56px;
  height: 56px;
}

.rlt-explainer__placeholder p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

/* Badge */
.rlt-explainer__badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  max-width: 220px;
}

.rlt-explainer__badge-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.rlt-explainer__badge-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 2px;
}

.rlt-explainer__badge-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #888888;
  margin: 0;
}

/* ===== CONTENT ===== */
.rlt-explainer__label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 16px;
}

.rlt-explainer__heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0 0 20px;
  line-height: 1.2;
}

.rlt-explainer__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #444444;
  margin: 0 0 20px;
  line-height: 1.6;
}

.rlt-explainer__text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--sec-text, #555555);
  line-height: 1.8;
  margin-bottom: 32px;
}

.rlt-explainer__text p {
  margin: 0 0 14px;
}

.rlt-explainer__text p:last-child {
  margin-bottom: 0;
}

/* ===== BULLET POINTS ===== */
.rlt-explainer__points {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rlt-explainer__point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.rlt-explainer__point-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.rlt-explainer__point-body {
  flex: 1;
}

.rlt-explainer__point-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 4px;
}

.rlt-explainer__point-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #666666;
  margin: 0;
  line-height: 1.6;
}

/* ===== BUTTONS ===== */
.rlt-explainer__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.rlt-explainer__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}

.rlt-explainer__btn--primary {
  background: var(--sec-accent, #8B0000);
  color: #FFFFFF;
  border: 2px solid var(--sec-accent, #8B0000);
}

.rlt-explainer__btn--primary:hover {
  background: #6B0000;
  border-color: #6B0000;
}

.rlt-explainer__btn--secondary {
  background: transparent;
  color: #111111;
  border: 2px solid #DEDEDE;
}

.rlt-explainer__btn--secondary:hover {
  border-color: #111111;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .rlt-explainer__grid {
    gap: 48px;
  }
  .rlt-explainer__badge {
    bottom: -16px;
    right: -8px;
  }
}

@media screen and (max-width: 768px) {
  .rlt-explainer {
    padding: 60px 0;
  }
  .rlt-explainer__inner {
    padding: 0 20px;
  }
  .rlt-explainer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .rlt-explainer__media {
    order: 1 !important;
  }
  .rlt-explainer__content {
    order: 2 !important;
  }
  .rlt-explainer__badge {
    bottom: -14px;
    right: 12px;
  }
  .rlt-explainer__heading {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 480px) {
  .rlt-explainer__inner {
    padding: 0 16px;
  }
  .rlt-explainer__badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 16px;
    max-width: 100%;
  }
  .rlt-explainer__ctas {
    flex-direction: column;
  }
  .rlt-explainer__btn {
    width: 100%;
    justify-content: center;
  }
}


/*--------------------------------------------------------------
# 16.8 Why us
--------------------------------------------------------------*/


.why-us {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #FAFAFA);
  width: 100%;
  border-top: 1px solid #EBEBEB;
}

.why-us__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== HEADER ===== */
.why-us__header {
  text-align: center;
  margin-bottom: 48px;
}

.why-us__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 10px;
}

.why-us__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0 0 14px;
  line-height: 1.2;
}

.why-us__desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--sec-text, #666666);
  margin: 0 auto;
  max-width: 600px;
  line-height: 1.7;
}

/* ===== GRID ===== */
.why-us__grid {
  display: grid;
  grid-template-columns: repeat(var(--sec-columns, 4), 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

/* ===== CARD ===== */
.why-us__card {
  background: var(--sec-card-bg, #FFFFFF);
  border: 1px solid #EBEBEB;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.why-us__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.why-us__icon {
  font-size: 44px;
  margin-bottom: 18px;
  line-height: 1;
  display: block;
}

.why-us__card-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0 0 12px;
  line-height: 1.3;
}

.why-us__card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--sec-text, #666666);
  margin: 0;
  line-height: 1.7;
}

/* ===== BADGES BAR ===== */
.why-us__badges {
  border-top: 1px solid #EBEBEB;
  padding-top: 28px;
  text-align: center;
}

.why-us__badges-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #888888;
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .why-us {
    padding: 60px 0;
  }
  .why-us__inner {
    padding: 0 20px;
  }
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .why-us__header {
    margin-bottom: 32px;
  }
  .why-us__card {
    padding: 28px 20px;
  }
}

@media screen and (max-width: 480px) {
  .why-us__inner {
    padding: 0 16px;
  }
  .why-us__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/*--------------------------------------------------------------
# 16.9 Certifications
--------------------------------------------------------------*/


.certifications {
  padding: 70px 0;
  background: #FAFAFA;
  width: 100%;
  border-top: 1px solid #EBEBEB;
}

.certifications__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.certifications__header {
  text-align: center;
  margin-bottom: 40px;
}

.certifications__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B0000;
  margin: 0 0 10px;
}

.certifications__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: #111111;
  margin: 0 0 14px;
}

.certifications__desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #555555;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* One card per mark, in an even grid: 6 across, 3 on tablets, 2 on phones. */
.certifications__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  max-width: 1136px;
  margin: 0 auto 32px;
}

.certifications__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 14px 20px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  border-radius: 18px;
  text-align: center;
}

/* Every logo sits in the same frame, centred, whatever its own shape. */
.certifications__badge-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 92px;
  padding: 14px;
  border-radius: 12px;
  background: #FAFAFA;
}

.certifications__badge-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  mix-blend-mode: multiply; /* a white box behind a logo melts into the frame */
  filter: grayscale(100%) opacity(0.8);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.certifications__badge:hover .certifications__badge-image {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.06);
}

.certifications__badge-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #555555;
  text-align: center;
}

.certifications__disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #AAAAAA;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
  line-height: 1.6;
}

@media screen and (max-width: 1024px) {
  .certifications__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
}

@media screen and (max-width: 768px) {
  .certifications { padding: 50px 0; }
  .certifications__inner { padding: 0 20px; }
  .certifications__grid { gap: 14px; }
}

@media screen and (max-width: 520px) {
  .certifications__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .certifications__badge { padding: 14px 10px 16px; gap: 12px; }
  .certifications__badge-logo { height: 76px; padding: 10px; }
  .certifications__badge-image { max-height: 52px; }
  .certifications__badge-label { font-size: 12px; }
}


/*--------------------------------------------------------------
# 16.10 Blog posts
--------------------------------------------------------------*/


.blog-posts {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #FFFFFF);
  width: 100%;
  border-top: 1px solid #EBEBEB;
}

.blog-posts__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.blog-posts__header {
  margin-bottom: 40px;
}

.blog-posts__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 10px;
}

.blog-posts__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.blog-posts__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
}

.blog-posts__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sec-title, #111111);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.blog-posts__view-all:hover {
  color: var(--sec-accent, #8B0000);
}

/* Grid */
.blog-posts__grid {
  display: grid;
  grid-template-columns: repeat(var(--sec-columns, 3), 1fr);
  gap: 28px;
}

/* Card */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0; /* stops a long word or wide image from widening the column */
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.blog-card__image-link { display: block; text-decoration: none; }

.blog-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #F0F0F0;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__image { transform: scale(1.05); }

.blog-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CCCCCC;
}

.blog-card__image-placeholder svg { width: 48px; height: 48px; }

.blog-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--sec-accent, #8B0000);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   FREE SHIPPING BADGE
   --card   : top-right of a blog card (the left corner holds the tag)
   --corner : top-left of an article-sidebar product card
   --inline : sits in the normal flow
   --------------------------------------------------------------- */
.rlr-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--rlr-badge-bg, #0F7B3C);
  color: var(--rlr-badge-fg, #FFFFFF);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
}
.rlr-free-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.rlr-free-badge--card { position: absolute; top: 12px; right: 12px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.rlr-free-badge--corner { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 9px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.rlr-free-badge--inline { margin: 0 0 6px; }

.blog-card__content {
  padding: 22px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.blog-card__date,
.blog-card__read-time,
.blog-card__sep {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #AAAAAA;
}

.blog-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.blog-card__title a:hover { color: var(--sec-accent, #8B0000); }

.blog-card__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--sec-text, #666666);
  margin: 0;
  line-height: 1.6;
  flex: 1;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sec-accent, #8B0000);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.15s ease;
}

.blog-card__link:hover { gap: 10px; }

/* Keyboard focus visibility */
.blog-posts a:focus-visible {
  outline: 2px solid var(--sec-accent, #8B0000);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Placeholder */
.blog-card__placeholder-line {
  background: #F0F0F0;
  border-radius: 4px;
  height: 14px;
}
.blog-card__placeholder-line--meta { width: 60%; height: 12px; }
.blog-card__placeholder-line--title { width: 90%; height: 18px; }
.blog-card__placeholder-line--excerpt { width: 100%; height: 12px; }

/* ---------------------------------------------------------------
   ARTICLE / RICH-TEXT TABLES
   Solid header bar, zebra rows, visible cell borders, and a
   horizontal scroller so a wide table never breaks a phone layout.
   The wrapper is added by the script at the bottom of this file.
   --------------------------------------------------------------- */
.rlr-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border: 1px solid var(--rlr-table-border, #D9D9D9);
  border-radius: 8px;
}

.rte table,
.article__content table,
.article-content table,
.rlr-table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--rlr-table-font-size, 14px);
  color: #222222;
  background: #FFFFFF;
}

/* The first row is treated as the header even when the editor omits <thead> */
.rte table thead th,
.rte table thead td,
.rte table tr:first-child th,
.article__content table thead th,
.article__content table tr:first-child th,
.article-content table thead th,
.article-content table tr:first-child th,
.rlr-table-wrap table thead th,
.rlr-table-wrap table thead td,
.rlr-table-wrap table tr:first-child th {
  background: var(--rlr-table-head-bg, #8B0000);
  color: var(--rlr-table-head-fg, #FFFFFF);
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
  padding: 12px 14px;
  border: 1px solid var(--rlr-table-head-bg, #8B0000);
  line-height: 1.35;
}

.rte table td,
.rte table tbody th,
.article__content table td,
.article-content table td,
.rlr-table-wrap table td,
.rlr-table-wrap table tbody th {
  padding: 11px 14px;
  border: 1px solid var(--rlr-table-border, #D9D9D9);
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
}

.rte table tbody tr:nth-child(even),
.article__content table tbody tr:nth-child(even),
.article-content table tbody tr:nth-child(even),
.rlr-table-wrap table tbody tr:nth-child(even) {
  background: var(--rlr-table-stripe, #F6F6F6);
}

.rlr-table-wrap table a { color: var(--rlr-table-link, #8B0000); }

/* Long article content must never push the page sideways */
.rte img, .article__content img, .article-content img { max-width: 100%; height: auto; }
.rte pre, .article__content pre, .article-content pre { overflow-x: auto; }

/* Responsive */
@media screen and (max-width: 1280px) {
  /* keeps a 4-column setting from squeezing the cards on smaller laptops */
  .blog-posts__grid { grid-template-columns: repeat(min(var(--sec-columns, 3), 3), 1fr); }
}

@media screen and (max-width: 1024px) {
  .blog-posts__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media screen and (max-width: 768px) {
  .blog-posts { padding: 60px 0; }
  .blog-posts__inner { padding: 0 20px; }
  .blog-posts__grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-posts__header { margin-bottom: 28px; }
  .rlr-table-wrap { margin: 18px 0; border-radius: 6px; }
  .rte table,
  .article__content table,
  .article-content table,
  .rlr-table-wrap table { min-width: 480px; font-size: 13px; }
  .rlr-table-wrap table th,
  .rlr-table-wrap table td { padding: 9px 11px; }
}

@media screen and (max-width: 480px) {
  .blog-posts__inner { padding: 0 16px; }
  .blog-card__content { padding: 18px 16px 16px; }
  .rlr-free-badge { font-size: 9px; padding: 4px 8px; }
  .rlr-free-badge svg { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__image,
  .blog-card__link { transition: none; }
  .blog-card:hover { transform: none; }
  .blog-card:hover .blog-card__image { transform: none; }
}


/*--------------------------------------------------------------
# 16.11 FAQ
--------------------------------------------------------------*/

.faq {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #FAFAFA);
  width: 100%;
  border-top: 1px solid #EBEBEB;
  border-bottom: 4px solid var(--sec-accent, #8B0000);
}
.faq__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.faq__header {
  text-align: center;
  margin-bottom: 40px;
}
.faq__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec-accent, #8B0000);
  margin: 0 0 10px;
}
.faq__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--sec-title, #111111);
  margin: 0 0 14px;
}
.faq__support {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #888888;
  margin: 0 0 10px;
  line-height: 1.6;
}
.faq__all-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sec-accent, #8B0000);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}
.faq__all-link:hover { opacity: 0.75; }

/* Page content block — renders Pages editor rich text + internal links */
.faq__page-content {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #555555;
  line-height: 1.8;
  margin-bottom: 36px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 12px;
}
.faq__page-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin: 20px 0 10px;
}
.faq__page-content h2:first-child { margin-top: 0; }
.faq__page-content p { margin: 0 0 12px; }
.faq__page-content p:last-child { margin-bottom: 0; }
.faq__page-content a {
  color: var(--sec-accent, #8B0000);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq__page-content a:hover { opacity: 0.8; }
.faq__page-content ul, .faq__page-content ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.faq__page-content li { margin-bottom: 6px; }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sec-border, #E8E8E8);
}
.faq__item {
  border-bottom: 1px solid var(--sec-border, #E8E8E8);
  background: #FFFFFF;
}
.faq__item:last-child { border-bottom: none; }
.faq__item.is-open { background: #FFFFFF; }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sec-title, #111111);
  transition: color 0.15s ease, background 0.15s ease;
  line-height: 1.4;
}
.faq__question:hover {
  color: var(--sec-accent, #8B0000);
  background: #FFF8F8;
}
.faq__question[aria-expanded="true"] {
  color: var(--sec-accent, #8B0000);
}
.faq__question:focus-visible {
  outline: 2px solid var(--sec-accent, #8B0000);
  outline-offset: -2px;
}
.faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5F5F5;
  flex-shrink: 0;
  color: var(--sec-title, #111111);
  transition: background 0.15s ease, color 0.15s ease;
}
.faq__question[aria-expanded="true"] .faq__icon {
  background: var(--sec-accent, #8B0000);
  color: #FFFFFF;
}
.faq__icon-plus { display: block; }
.faq__icon-minus { display: none; }
.faq__question[aria-expanded="true"] .faq__icon-plus { display: none; }
.faq__question[aria-expanded="true"] .faq__icon-minus { display: block; }
.faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.faq__answer[data-open] {
  max-height: 1000px;
}
.faq__answer-inner {
  padding: 0 24px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--sec-text, #555555);
  line-height: 1.8;
}
.faq__answer-inner p {
  margin: 0 0 12px;
}
.faq__answer-inner p:last-child { margin-bottom: 0; }
@media screen and (max-width: 768px) {
  .faq { padding: 60px 0; }
  .faq__inner { padding: 0 20px; }
  .faq__question { padding: 16px 18px; font-size: 14px; }
  .faq__answer-inner { padding: 0 18px 16px; }
  .faq__page-content { padding: 18px 20px; }
}
@media screen and (max-width: 480px) {
  .faq__inner { padding: 0 16px; }
  .faq__page-content { padding: 16px; }
}

/*--------------------------------------------------------------
# 16.12 CTA banner
--------------------------------------------------------------*/


.cta-banner {
  padding: var(--sec-pt, 56px) 0 var(--sec-pb, 56px);
  background: var(--sec-bg, #8B0000);
  width: 100%;
}

.cta-banner__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.cta-banner__content {
  flex: 1;
  min-width: 260px;
}

.cta-banner__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--sec-title, #FFFFFF);
  margin: 0;
  line-height: 1.2;
}

.cta-banner__right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cta-banner__desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--sec-text, rgba(255,255,255,0.85));
  margin: 0;
  line-height: 1.6;
  max-width: 400px;
}

.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: #FFFFFF;
  color: var(--sec-bg, #8B0000);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 40px;
  white-space: nowrap;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.cta-banner__btn:hover {
  background: var(--sec-accent, #6B0000);
  color: #FFFFFF;
}

@media screen and (max-width: 768px) {
  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 20px;
  }
  .cta-banner__right {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }
  .cta-banner__btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  .cta-banner__inner { padding: 0 16px; }
}


/*--------------------------------------------------------------
# 16.13 Newsletter
--------------------------------------------------------------*/


.newsletter {
  padding: var(--sec-pt, 80px) 0 var(--sec-pb, 80px);
  background: var(--sec-bg, #111111);
  width: 100%;
  border-top: 4px solid #8B0000;
  border-bottom: 4px solid #8B0000;
}

.newsletter__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

/* ===== ICON ===== */
.newsletter__icon {
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

/* ===== TITLE ===== */
.newsletter__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--sec-title, #FFFFFF);
  margin: 0 0 14px;
  line-height: 1.2;
}

/* ===== DESC ===== */
.newsletter__desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--sec-text, rgba(255,255,255,0.7));
  margin: 0 0 32px;
  line-height: 1.7;
}

/* ===== FORM ===== */
.newsletter__form {
  margin-bottom: 12px;
}

.newsletter__input-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.18s ease;
}

.newsletter__input-wrap:focus-within {
  border-color: var(--sec-accent, #8B0000);
}

.newsletter__input {
  flex: 1;
  height: 52px;
  padding: 0 20px;
  border: none;
  background: transparent;
  color: #111111;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  min-width: 0;
}

.newsletter__input::placeholder {
  color: #AAAAAA;
}

.newsletter__btn {
  height: 52px;
  padding: 0 28px;
  background: var(--sec-accent, #8B0000);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.newsletter__btn:hover {
  background: #6B0000;
}

.newsletter__btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ===== MESSAGES ===== */
.newsletter__success {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4CAF50;
  margin: 12px 0 0;
  font-weight: 500;
}

.newsletter__error {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #FF5252;
  margin: 12px 0 0;
}

/* ===== PRIVACY ===== */
.newsletter__privacy {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin: 0 0 32px;
  line-height: 1.6;
}

/* ===== SOCIAL ===== */
.newsletter__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.newsletter__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.newsletter__social-link:hover {
  color: #FFFFFF;
  background: var(--sec-accent, #8B0000);
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 768px) {
  .newsletter {
    padding: 60px 0;
  }
  .newsletter__inner {
    padding: 0 20px;
  }
  .newsletter__input-wrap {
    flex-direction: column;
    border-radius: 8px;
    overflow: visible;
    background: transparent;
    gap: 10px;
    border: none;
  }
  .newsletter__input {
    width: 100%;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
    height: 50px;
  }
  .newsletter__input::placeholder {
    color: rgba(255,255,255,0.5);
  }
  .newsletter__btn {
    width: 100%;
    border-radius: 8px;
    height: 50px;
  }
}

@media screen and (max-width: 480px) {
  .newsletter__inner {
    padding: 0 16px;
  }
}


/*--------------------------------------------------------------
# 16.14 Homepage adjustments

Three small departures from the verbatim Shopify CSS, each with a reason.
--------------------------------------------------------------*/

/*
 * The carousels are moved by assets/js/homepage.js. The Shopify script wrote
 * an inline transform; this theme keeps declarations in CSS and lets the
 * script publish only the value.
 */
.feat-col__track,
.before-after__track,
.testimonials__track {
	transform: translateX(var(--track-offset, 0));
}

/*
 * rlt-explainer and rlt-benefits shared one stylesheet in Shopify apart from a
 * single rule: only the first of the pair carried the red rule along its
 * bottom edge. One template part serves both, so the second opts out.
 */
.rlt-explainer--flat {
	border-bottom: 0;
}

/*
 * The CTA banner has no background preset -- the red banner is the component.
 * Its colours come straight from the brand tokens.
 */
.cta-banner {
	--sec-bg: var(--rlr-brand);
	--sec-accent: var(--rlr-brand-hover);
	--sec-title: var(--rlr-white);
	--sec-text: var(--rlr-red-300);
}