/*
Theme Name:   RD Souq
Theme URI:    https://rdsouq.com
Description:  RD Souq premium marketplace child theme - Blocksy based
Author:       RD Souq
Template:     blocksy
Version: 1.25.2
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  rd-souq
Tags:         marketplace, e-commerce, woocommerce, responsive
*/

/* ============================================================
   RD SOUQ DESIGN TOKENS
   ============================================================ */
:root {
	--rd-primary: #B45B07;
	--rd-primary-hover: #8F4A06;
	--rd-deep: #192A3D;
	--rd-muted: #5A6B7E;
	--rd-sale: #C62828;
	--rd-new: #0F6B4E;
	--rd-trust: #0F9B6E;
	--rd-border: #E1E8ED;
	--rd-surface-light: #F2F5F7;
	--rd-surface: #FAFBFC;
	--rd-card: #FFFFFF;

	--rd-radius: 6px;
	--rd-radius-pill: 999px;
	--rd-shadow: 0 12px 18px -6px rgba(34, 56, 101, .04);
	--rd-shadow-hover: 0 18px 28px -8px rgba(34, 56, 101, .10);
	--rd-transition: 200ms ease;

	--rd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rd-body: 15px;
	--rd-body-lh: 1.6;
	--rd-h2: 30px;
	--rd-h3: 24px;
	--rd-title: 15px;
	--rd-price: 16px;
	--rd-btn-min: 44px;
	--rd-container: 1290px;
	--rd-space-d: 64px;
	--rd-space-t: 48px;
	--rd-space-m: 40px;
}

/* ============================================================
   FOUNDATION
   ============================================================ */
body {
	font-family: var(--rd-font);
	font-size: var(--rd-body);
	line-height: var(--rd-body-lh);
	color: var(--rd-deep);
	background: var(--rd-surface);
	overflow-x: hidden;
}

a { color: var(--rd-primary); transition: color var(--rd-transition); }
a:hover { color: var(--rd-primary-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--rd-deep); }

/* Prevent fixed bottom nav from covering content on mobile */
@media (max-width: 767.98px) {
	body { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.rd-announcement {
	background: var(--rd-deep);
	color: #fff;
	font-size: 13px;
	padding: 9px 16px;
	text-align: center;
}
.rd-announcebar-inner {
	max-width: var(--rd-container);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
}
.rd-announcebar-item { display: inline-flex; align-items: center; gap: 6px; }
.rd-announcebar-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.rd-announcebar-item + .rd-announcebar-item { position: relative; }
.rd-announcebar-item + .rd-announcebar-item::before {
	content: '';
	position: absolute;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px; height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
}
@media (max-width: 689.98px) {
	.rd-announcebar-item:nth-child(n+3) { display: none; }
	.rd-announcement { font-size: 12px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.ct-header { background: var(--rd-card) !important; border-bottom: 1px solid var(--rd-border); }
.ct-header .site-title a { color: var(--rd-deep); text-decoration: none; font-weight: 700 !important; letter-spacing: -.4px; }

/* Prominent header search */
.rd-header-search .ct-search-form { max-width: 520px; }
.rd-header-search input[type="search"] {
	border-radius: var(--rd-radius-pill) !important;
	border: 1px solid var(--rd-border) !important;
	background: var(--rd-surface-light) !important;
	min-height: 42px !important;
	padding: 8px 18px !important;
	transition: background var(--rd-transition), border-color var(--rd-transition);
}
.rd-header-search input[type="search"]:focus {
	background: var(--rd-card) !important;
	border-color: var(--rd-primary) !important;
}

/* ============================================================
   HERO CAROUSEL + PROMO BANNERS

   Desktop composes the hero beside a 2x2 banner grid; tablet and
   mobile stack hero first, then the banners in a 2-column grid.
   ============================================================ */
.rd-promo {
	max-width: var(--rd-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

/* --- Hero --- */
.rd-hero {
	position: relative;
	border-radius: var(--rd-radius);
	overflow: hidden;
	background: #16222E;
	aspect-ratio: 21 / 9;
	min-height: 260px;
	max-height: 400px;
}
.rd-hero__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.rd-hero__track::-webkit-scrollbar { display: none; }

.rd-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
}
.rd-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.rd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(15, 23, 32, .88) 0%, rgba(15, 23, 32, .62) 42%, rgba(15, 23, 32, .12) 70%, rgba(15, 23, 32, 0) 100%);
}
.rd-hero__content {
	position: relative;
	z-index: 2;
	padding: 32px 72px;
	max-width: 620px;
	color: #fff;
}
.rd-hero__title {
	color: #fff;
	font-size: clamp(24px, 3.1vw, 40px);
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 10px;
	letter-spacing: -.4px;
}
.rd-hero__text {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.55;
	margin: 0 0 20px;
	max-width: 44ch;
}
.rd-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rd-primary);
	color: #fff;
	border-radius: var(--rd-radius);
	padding: 12px 28px;
	min-height: var(--rd-btn-min);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background var(--rd-transition);
}
.rd-hero__btn:hover { background: var(--rd-primary-hover); color: #fff; }

/* --- Hero controls --- */
.rd-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--rd-deep);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	cursor: pointer;
	padding: 0;
	transition: background var(--rd-transition), color var(--rd-transition);
}
.rd-hero__nav:hover { background: #fff; color: var(--rd-primary); }
.rd-hero__nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rd-hero__nav--prev { left: 14px; }
.rd-hero__nav--next { right: 14px; }
@media (min-width: 1024px) {
	.rd-hero__nav { display: flex; }
}

.rd-hero__dots {
	position: absolute;
	z-index: 5;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
	align-items: center;
}
.rd-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: background var(--rd-transition), width var(--rd-transition);
}
.rd-hero__dot:hover { background: rgba(255, 255, 255, .8); }
.rd-hero__dot.is-active { background: #fff; width: 22px; border-radius: var(--rd-radius-pill); }

/* --- Promo banners --- */
.rd-banners {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.rd-banner {
	position: relative;
	display: block;
	min-height: 118px;
	border-radius: var(--rd-radius);
	overflow: hidden;
	text-decoration: none;
	background: #22303E;
	transition: box-shadow var(--rd-transition), transform var(--rd-transition);
}
.rd-banner:hover {
	box-shadow: var(--rd-shadow-hover);
	transform: translateY(-2px);
	color: #fff;
}
.rd-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.rd-banner:hover .rd-banner__img { transform: scale(1.04); }
.rd-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(15, 23, 32, .84) 0%, rgba(15, 23, 32, .5) 55%, rgba(15, 23, 32, .2) 100%);
}
.rd-banner__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	height: 100%;
	padding: 16px 18px;
	color: #fff;
}
.rd-banner__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.rd-banner__text {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .82);
	line-height: 1.4;
}

/* Desktop: hero largest, banners 2x2 beside it */
@media (min-width: 1024px) {
	.rd-promo {
		grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
		align-items: stretch;
	}
	.rd-hero { aspect-ratio: auto; height: 100%; min-height: 400px; max-height: 400px; }
	.rd-banners { align-content: stretch; }
	.rd-banner { min-height: 0; }
}

/* Tablet: hero first, banners 2x2 below */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.rd-hero { aspect-ratio: 21 / 8; min-height: 280px; max-height: 340px; }
	.rd-banner { min-height: 130px; }
}

/* ============================================================
   CATEGORY RAIL
   ============================================================ */
.rd-section { padding: var(--rd-space-d) 24px; max-width: var(--rd-container); margin: 0 auto; position: relative; }
.rd-section--tight { padding-top: 0; }
.rd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.rd-section-title { font-size: var(--rd-h3); font-weight: 700; color: var(--rd-deep); margin: 0; }
.rd-section-link { font-size: 14px; font-weight: 600; color: var(--rd-primary); text-decoration: none; white-space: nowrap; }
.rd-section-link:hover { color: var(--rd-primary-hover); }

.rd-categories {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 14px;
	margin: -4px -4px -14px;
	scrollbar-width: none;
}
.rd-categories::-webkit-scrollbar { display: none; }
.rd-cat-item { flex: 0 0 auto; width: 116px; scroll-snap-align: start; text-align: center; text-decoration: none; }
.rd-cat-circle {
	display: block;
	width: 92px;
	height: 92px;
	min-width: 92px;
	min-height: 92px;
	max-width: 92px;
	max-height: 92px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 12px;
	border: 2px solid var(--rd-border);
	background: var(--rd-surface-light);
	transition: border-color var(--rd-transition), box-shadow var(--rd-transition);
}
.rd-cat-item:hover .rd-cat-circle { border-color: var(--rd-primary); box-shadow: 0 0 0 4px rgba(180, 91, 7, .10); }
.rd-cat-circle img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}
.rd-cat-label {
	font-size: 13px; font-weight: 500; color: var(--rd-deep);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; line-height: 1.35;
}

/* Desktop arrows */
.rd-cat-nav { display: none; }
@media (min-width: 1024px) {
	.rd-cat-nav {
		display: flex;
		gap: 8px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 3;
	}
	.rd-cat-nav button {
		width: 38px; height: 38px;
		border-radius: 50%;
		border: 1px solid var(--rd-border);
		background: var(--rd-card);
		color: var(--rd-deep);
		cursor: pointer;
		display: flex; align-items: center; justify-content: center;
		transition: background var(--rd-transition), color var(--rd-transition), border-color var(--rd-transition), opacity var(--rd-transition);
	}
	.rd-cat-nav button:hover:not(:disabled) { background: var(--rd-primary); color: #fff; border-color: var(--rd-primary); }
	.rd-cat-nav button:disabled { opacity: .35; cursor: default; }
	.rd-cat-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.rd-products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0; padding: 0;
	list-style: none;
}
.rd-products ul.products li.product {
	background: var(--rd-card);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	box-shadow: var(--rd-shadow);
	transition: box-shadow var(--rd-transition), transform var(--rd-transition);
}
.rd-products ul.products li.product:hover { box-shadow: var(--rd-shadow-hover); transform: translateY(-3px); }
.rd-products ul.products li.product a { text-decoration: none; }

.rd-products .product-image { position: relative; display: block; background: var(--rd-surface-light); }
.rd-products .product-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	margin: 0 !important;
}
.rd-products .product-image a { display: block; }

.rd-products .onsale,
.rd-products .rd-badge-new {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 3;
	margin: 0 !important;
	background: var(--rd-sale);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	padding: 4px 10px;
	border-radius: var(--rd-radius-pill);
	min-height: 0;
	min-width: 0;
}
.rd-products .rd-badge-new { background: var(--rd-new); left: auto; right: 10px; }

.rd-products .woocommerce-loop-product__title {
	font-size: var(--rd-title);
	font-weight: 600;
	color: var(--rd-deep);
	margin: 12px 12px 4px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	padding: 0;
	text-transform: none;
}
.rd-products .star-rating { margin: 0 12px 6px; font-size: 12px; color: #D4A017; }
.rd-products .price {
	font-size: var(--rd-price);
	font-weight: 700;
	color: var(--rd-deep);
	margin: auto 12px 12px !important;
}
.rd-products .price del { color: var(--rd-muted); font-weight: 400; font-size: 13px; margin-right: 6px; opacity: .8; }
.rd-products .price ins { text-decoration: none; color: var(--rd-sale); }

.rd-products .button {
	background: var(--rd-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--rd-radius);
	padding: 10px 16px !important;
	min-height: var(--rd-btn-min);
	width: calc(100% - 24px);
	margin: 0 12px 12px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	text-transform: none;
	transition: background var(--rd-transition);
}
.rd-products .button:hover { background: var(--rd-primary-hover) !important; color: #fff !important; }
.rd-products li.product .added_to_cart { display: none; }

.rd-products .out-of-stock-label {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}
.rd-products .out-of-stock-label span {
	background: #24292E;
	color: #fff;
	padding: 6px 16px;
	border-radius: var(--rd-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.rd-bottom-nav { display: none; }
@media (max-width: 767.98px) {
	.rd-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 9999;
		background: var(--rd-card);
		border-top: 1px solid var(--rd-border);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.rd-bottom-nav a {
		flex: 1 1 0;
		min-width: 0;
		height: 56px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: var(--rd-muted);
		text-decoration: none;
		font-size: 10px;
		font-weight: 500;
		position: relative;
	}
	.rd-bottom-nav a.is-active, .rd-bottom-nav a:hover { color: var(--rd-primary); }
	.rd-bottom-nav svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.rd-bottom-nav .rd-bn-count {
		position: absolute;
		top: 6px;
		left: 50%;
		margin-left: 4px;
		background: var(--rd-sale);
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		line-height: 1;
		min-width: 15px;
		height: 15px;
		padding: 0 3px;
		border-radius: var(--rd-radius-pill);
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Search trigger inside bottom nav */
.rd-bn-search-btn {
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	flex: 1 1 0;
	min-width: 0;
	height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--rd-muted);
	font-size: 10px;
	font-weight: 500;
}
.rd-bn-search-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rd-bn-search-btn:hover { color: var(--rd-primary); }

/* ============================================================
   MOBILE SEARCH SHEET
   ============================================================ */
.rd-search-sheet { position: fixed; inset: 0; z-index: 10000; }
.rd-search-sheet[hidden] { display: none; }
.rd-search-sheet::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(25, 42, 61, .5);
	opacity: 0;
	transition: opacity var(--rd-transition);
}
.rd-search-sheet.is-open::before { opacity: 1; }
.rd-search-sheet__panel {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: var(--rd-card);
	padding: 16px;
	padding-top: calc(16px + env(safe-area-inset-top, 0px));
	box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
	transform: translateY(-100%);
	transition: transform var(--rd-transition);
}
.rd-search-sheet.is-open .rd-search-sheet__panel { transform: translateY(0); }
.rd-search-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rd-search-sheet__title { font-size: 16px; font-weight: 700; color: var(--rd-deep); }
.rd-search-sheet__close {
	background: var(--rd-surface-light);
	border: 0;
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--rd-deep);
	cursor: pointer;
}
.rd-search-sheet__form { display: flex; gap: 8px; }
.rd-search-sheet__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: var(--rd-surface-light);
	font-size: 15px;
	color: var(--rd-deep);
}
.rd-search-sheet__form input[type="search"]:focus { background: var(--rd-card); border-color: var(--rd-primary); }
.rd-search-sheet__submit {
	flex: 0 0 auto;
	background: var(--rd-primary);
	color: #fff;
	border: 0;
	border-radius: var(--rd-radius);
	padding: 0 20px;
	min-height: 46px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.rd-search-sheet__submit:hover { background: var(--rd-primary-hover); }
body.rd-search-open { overflow: hidden; }

/* ============================================================
   HEADER SEARCH FIELD

   Rendered through Blocksy's native `search` header item with a
   child-theme view override, so it inherits the theme's
   responsive and sticky behaviour.
   ============================================================ */
.ct-header-search-rd { width: 100%; }
.rd-header-search { position: relative; display: flex; align-items: center; width: 100%; }
.rd-header-search input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 48px 10px 18px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface-light);
	color: var(--rd-deep);
	font-size: 14px;
	font-family: var(--rd-font);
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--rd-transition), border-color var(--rd-transition), box-shadow var(--rd-transition);
}
.rd-header-search input[type="search"]::placeholder { color: var(--rd-muted); opacity: .75; }
.rd-header-search input[type="search"]:focus {
	background: var(--rd-card);
	border-color: var(--rd-primary);
	box-shadow: 0 0 0 3px rgba(180, 91, 7, .12);
	outline: none;
}
.rd-header-search__submit {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rd-muted);
	cursor: pointer;
	padding: 0;
	transition: color var(--rd-transition), background var(--rd-transition);
}
.rd-header-search__submit:hover { color: var(--rd-primary); background: var(--rd-surface-light); }

/* Mobile: the field sits beside the logo, so keep it compact. */
@media (max-width: 767.98px) {
	.rd-header-search input[type="search"] { min-height: 40px; font-size: 13px; padding: 8px 42px 8px 14px; }
	.rd-header-search__submit { width: 30px; height: 30px; }
}

/* ============================================================
   TABLET SEARCH BAR

   Blocksy only renders the desktop header at >=1024px, so tablet
   widths get no inline search field. This slim bar fills that gap
   and is hidden at every other breakpoint.
   ============================================================ */
.rd-tablet-search { display: none; }
@media (min-width: 768px) and (max-width: 1023.98px) {
	.rd-tablet-search {
		display: block;
		background: var(--rd-card);
		border-bottom: 1px solid var(--rd-border);
		padding: 12px 24px;
	}
	.rd-tablet-search__inner { max-width: var(--rd-container); margin: 0 auto; }
	.rd-tablet-search form { position: relative; display: flex; align-items: center; }
	.rd-tablet-search input[type="search"] {
		width: 100%;
		min-height: 44px;
		padding: 10px 48px 10px 18px;
		border: 1px solid var(--rd-border);
		border-radius: var(--rd-radius-pill);
		background: var(--rd-surface-light);
		color: var(--rd-deep);
		font-size: 14px;
		font-family: var(--rd-font);
		-webkit-appearance: none;
		appearance: none;
		transition: background var(--rd-transition), border-color var(--rd-transition), box-shadow var(--rd-transition);
	}
	.rd-tablet-search input[type="search"]::placeholder { color: var(--rd-muted); opacity: .75; }
	.rd-tablet-search input[type="search"]:focus {
		background: var(--rd-card);
		border-color: var(--rd-primary);
		box-shadow: 0 0 0 3px rgba(180, 91, 7, .12);
		outline: none;
	}
	.rd-tablet-search__submit {
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		width: 34px;
		height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--rd-muted);
		cursor: pointer;
		padding: 0;
	}
	.rd-tablet-search__submit:hover { color: var(--rd-primary); background: var(--rd-surface-light); }
}

/* ============================================================
   RESPONSIVE - 2 column mobile grid (default 360-430px)
   ============================================================ */
@media (max-width: 767.98px) {
	.rd-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.rd-products .product-image img { aspect-ratio: 1 / 1; }
	.rd-products .woocommerce-loop-product__title { font-size: 13px; margin: 10px 10px 4px !important; min-height: 2.7em; }
	.rd-products .star-rating { margin: 0 10px 4px; font-size: 11px; }
	.rd-products .price { font-size: 14px; margin: auto 10px 8px !important; }
	.rd-products .price del { font-size: 12px; }
	.rd-products .button { min-height: 36px; padding: 6px 10px !important; font-size: 12px; width: calc(100% - 20px); margin: 0 10px 10px; }
	.rd-products .onsale, .rd-products .rd-badge-new { font-size: 10px; padding: 3px 7px; top: 7px; }
	.rd-products .onsale { left: 7px; }
	.rd-products .rd-badge-new { right: 7px; }
	.rd-section { padding: var(--rd-space-m) 16px; }
	.rd-section-head { margin-bottom: 18px; }
	.rd-section-title { font-size: 20px; }
	.rd-categories { gap: 14px; }
	.rd-cat-item { width: 88px; }
	.rd-cat-circle {
		width: 74px;
		height: 74px;
		min-width: 74px;
		min-height: 74px;
		max-width: 74px;
		max-height: 74px;
		margin-bottom: 8px;
	}
	.rd-cat-label { font-size: 12px; }
	.rd-promo { padding: 0 16px; gap: 14px; }
	.rd-hero { aspect-ratio: 4 / 3; min-height: 210px; max-height: 260px; }
	.rd-hero__content { padding: 22px 20px; }
	.rd-hero__title { font-size: 22px; letter-spacing: -.2px; }
	.rd-hero__text { font-size: 13.5px; margin-bottom: 16px; max-width: none; }
	.rd-hero__btn { padding: 10px 22px; font-size: 13px; }
	.rd-hero__dots { bottom: 12px; }
	.rd-banners { gap: 12px; }
	.rd-banner { min-height: 104px; }
	.rd-banner__body { padding: 13px 14px; }
	.rd-banner__title { font-size: 14px; }
	.rd-banner__text { font-size: 11.5px; }
}

/* Tablet 768-1023 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.rd-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.rd-section { padding: var(--rd-space-t) 24px; }
}

/* Small tablet / large phone landscape */
@media (min-width: 431px) and (max-width: 767.98px) {
	.rd-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Desktop 1024-1290 */
@media (min-width: 1024px) and (max-width: 1290px) {
	.rd-products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Very narrow - single column only if genuinely required */
@media (max-width: 340px) {
	.rd-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.rd-cat-item { width: 80px; }
	.rd-cat-circle { width: 66px; height: 66px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.rd-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.rd-categories { scroll-behavior: auto; }
	.rd-products ul.products li.product,
	.rd-cat-circle,
	a { transition: none; }
}
/* ============================================================
   PHASE 3A — VISUAL REFERENCE PASS
   -------------------------------------------------------
   Appended, not merged into the rules above, so the change set
   is one revertible block. Each subsection names the section
   of the approved reference it satisfies.

   1. Container / spacing density
   ============================================================ */

/* The reference sets a 1563px content area inside 58px of margin on a
   1680px viewport. 1290px left the page feeling narrow and letterboxed,
   which was the single biggest distance from the reference. */
:root {
	--rd-container: 1410px;
	--rd-space-d: 40px;
	--rd-space-t: 30px;
	--rd-space-m: 26px;
	--rd-pad-x: 28px;
}

.rd-section,
.rd-promo {
	padding-left: var(--rd-pad-x);
	padding-right: var(--rd-pad-x);
	max-width: var(--rd-container);
}

.rd-announcebar-inner {
	padding-left: var(--rd-pad-x);
	padding-right: var(--rd-pad-x);
}

/* ============================================================
   2. Header: action icons replace text navigation
   ============================================================ */

/* The reference header is LOGO | SEARCH | ICONS. Blocksy renders its
   auto-drafted page menu (Cart / Checkout / Home / My account / Shop)
   into the same end column, which pushed the search field off-centre and
   put "Checkout" in primary navigation — a page that has no business in
   the top-level header. The nav is hidden rather than restyled because
   the reference has no text navigation in the masthead at all. */
@media (min-width: 1024px) {
	#header-menu-1 { display: none; }
}

.ct-header [data-column="end"] {
	display: flex;
	align-items: center;
	gap: 18px;
}

.rd-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.rd-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;          /* keeps the tap target at 44px */
	padding: 0 10px;
	border-radius: 8px;
	color: var(--rd-deep);
	text-decoration: none;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-action:hover {
	background: var(--rd-surface-light);
	color: var(--rd-primary);
}

.rd-action__icon {
	flex: 0 0 auto;
	stroke: currentColor;
}

.rd-action__label {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.rd-action__badge {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* Mobile carries the logo + cart only; the labels would not fit. */
@media (max-width: 1023.98px) {
	.rd-action__label { display: none; }
	.rd-action { padding: 0 8px; }
}

/* ============================================================
   4. Category navigation row
   ============================================================ */

.rd-catnav {
	background: var(--rd-card);
	border-bottom: 1px solid var(--rd-border);
}

.rd-catnav__inner {
	max-width: var(--rd-container);
	margin: 0 auto;
	padding: 0 var(--rd-pad-x);
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 44px;
}

.rd-catnav__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 6px;
	background: var(--rd-primary);
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--rd-transition);
}

.rd-catnav__all:hover { background: var(--rd-primary-hover); }
.rd-catnav__all svg { stroke: currentColor; flex: 0 0 auto; }

.rd-catnav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	min-width: 0;
}

.rd-catnav__list::-webkit-scrollbar { display: none; }

.rd-catnav__list a {
	display: inline-block;
	padding: 13px 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--rd-deep);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--rd-transition), border-color var(--rd-transition);
}

.rd-catnav__list a:hover { color: var(--rd-primary); }

.rd-catnav__list a.is-current {
	color: var(--rd-primary);
	font-weight: 600;
	border-bottom-color: var(--rd-primary);
}

/* The offcanvas menu and bottom nav carry these destinations on mobile. */
@media (max-width: 767.98px) {
	.rd-catnav { display: none; }
}

/* ============================================================
   5. Circular rail — reference size and density
   ============================================================ */

/* Reference circles measure 74–76px. At 92px the rail dominated the page
   and pushed the hero below the fold. */
.rd-cat-circle {
	width: 76px;
	height: 76px;
	min-width: 76px;
	min-height: 76px;
	max-width: 76px;
	max-height: 76px;
	margin-bottom: 9px;
}

.rd-cat-item { width: 100px; }
.rd-cat-label { font-size: 12.5px; }

.rd-catnav + .rd-section,
.rd-catnav ~ .rd-section { padding-top: 22px; }

/* The reference has no "Shop by category" heading above the rail: the
   row of circles is the navigation. Keeping the heading costs ~50px of
   vertical space for a label that names its own contents. */
.rd-cat-rail-section .rd-section-head { display: none; }

.rd-cat-rail-section { padding-top: 20px; padding-bottom: 20px; }
.rd-categories { gap: 16px; padding-bottom: 6px; margin-bottom: 0; }
.rd-cat-nav { display: none !important; }

/* ============================================================
   6. Hero + promo split
   ============================================================ */

/* Reference is 58/42 with 15px gutters; we were at 62/38 with 16px. */
@media (min-width: 1024px) {
	.rd-promo {
		grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
		gap: 15px;
		padding-top: 0;
	}

	/* Reference hero band is ~360–400px tall; 406 left a visible gap
	   under the rail before the next section began. */
	.rd-hero { min-height: 380px; max-height: 380px; }
	.rd-banners { gap: 15px; }
	.rd-banner { min-height: 0; }
}

/* Sections sit shoulder to shoulder in the reference — no dead band
   between the campaign block and the first product row. */
.rd-promo + .rd-section { padding-top: 24px; }
.rd-section + .rd-section { padding-top: var(--rd-space-t); }
.rd-section { padding-bottom: var(--rd-space-t); }

/* ============================================================
   7. Product rows — marketplace density
   ============================================================ */

/* Four columns at 1410px gives ~340px cards, which reads as a sparse
   catalogue. The reference runs six to eight across with ~12px gutters. */
.rd-products ul.products {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.rd-products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
	.rd-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 4/5 portrait crops are taller than the reference cards, which are close
   to square. */
.rd-products .product-image img { aspect-ratio: 1 / 1; }

.rd-section-head { margin-bottom: 16px; }
.rd-section-title { font-size: 21px; }

/* ============================================================
   9. Mobile — bottom nav must not double the header cart
   ============================================================ */

/* The bottom nav already carries Home / Categories / Search / Account /
   Cart, so the fixed cart control in the header is a duplicate on the
   most cramped surface. The header keeps only the menu trigger. */
@media (max-width: 767.98px) {
	.ct-header [data-column="end"] .rd-action { display: none; }
}/* ============================================================
   PHASE 3A — TABLET CORRECTIONS (reference section 10)

   The desktop composition was starting at 1024px, which made a
   1024-wide viewport render the desktop layout: hero beside the
   promo grid and six product cards across. The reference gives
   tablets their own composition — hero first, promos as a 2x2 band
   below it, three product columns.

   Desktop therefore begins at 1200px.
   ============================================================ */

@media (min-width: 768px) {
	/* The text navigation stays hidden from tablet up. The header now
	   carries Account and Cart instead, and Checkout has no business
	   in primary navigation at any width. */
	#header-menu-1 { display: none; }
	.rd-header-actions { display: flex; }
	.rd-action__label { display: inline; }
	.rd-action { padding: 0 10px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	:root { --rd-container: 100%; --rd-pad-x: 24px; }

	/* Hero first, then the promo grid beneath it. */
	.rd-promo {
		grid-template-columns: minmax(0, 1fr);
		gap: 15px;
	}

	.rd-hero {
		aspect-ratio: 21 / 8;
		min-height: 260px;
		max-height: 320px;
	}

	.rd-banner { min-height: 128px; }

	/* Three columns, per the reference. */
	.rd-products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	/* The header search field is already present at this width; the
	   separate tablet bar added a second, redundant field. */
	.rd-tablet-search { display: none !important; }
}

@media (min-width: 1200px) {
	.rd-products ul.products {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 12px;
	}
}/* ============================================================
   PHASE 3A — FINAL POLISH PASS
   -------------------------------------------------------
   Appended block. Each subsection names the section of the brief
   it satisfies.

   1 + 7. Header: wordmark, search balance, three aligned actions
   ============================================================ */

/* The wordmark was plain text. The reference has a mark plus a
   two-tone wordmark with a tagline; this gives it a bag mark and
   splits RD / Souq so the identity reads at a glance. */
.ct-header .site-title a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.ct-header .rd-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--rd-deep);
}

.rd-logo__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--rd-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.rd-logo__mark svg { width: 18px; height: 18px; stroke: currentColor; }

.rd-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.rd-logo__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--rd-deep);
}

.rd-logo__name em {
	font-style: normal;
	color: var(--rd-primary);
}

.rd-logo__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--rd-muted);
	margin-top: 2px;
}

/* Search is the largest single element in the reference header but
   must not swallow the row: it is capped and centred in the gap
   between the logo and the actions. */
.ct-header [data-column="end"] {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.rd-header-actions { order: 2; }
.ct-header-search-rd { order: 1; flex: 1 1 auto; max-width: 560px; }

.rd-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 62px;
	min-height: 46px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--rd-deep);
	text-decoration: none;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-action:hover { background: var(--rd-surface-light); color: var(--rd-primary); }
.rd-action__icon { flex: 0 0 auto; stroke: currentColor; }

/* All three labels share one baseline so the icons read as a set
   rather than three unrelated controls. */
.rd-action__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--rd-muted);
}

.rd-action:hover .rd-action__label { color: var(--rd-primary); }

.rd-action__badge {
	position: absolute;
	top: 1px;
	right: 12px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.rd-action__badge[hidden] { display: none; }

/* Tablet: same composition, tightened. The brief asks for a proper
   marketplace header here rather than the minimal mobile one. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }
	.rd-logo__mark { width: 30px; height: 30px; border-radius: 8px; }
	.rd-action { min-width: 56px; }
	.ct-header-search-rd { max-width: none; }
}

/* ============================================================
   6. Mobile header — MENU | LOGO | CART
   ============================================================ */

@media (max-width: 767.98px) {
	.ct-header [data-column="end"] { gap: 4px; }

	/* The logo moves to the centre so the row reads
	   [menu] [logo] [cart] rather than logo-then-actions. */
	.ct-header [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .site-branding { order: 2; }

	.rd-logo__mark { width: 30px; height: 30px; }
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }

	/* Cart survives; account and wishlist do not, because the bottom
	   nav already carries both and three icons will not fit. */
	.rd-header-actions .rd-action:not(:last-child) { display: none; }

	.rd-action {
		min-width: 42px;
		min-height: 40px;
		padding: 4px;
	}

	.rd-action__label { display: none; }
	.rd-action__badge { right: 2px; }

	/* Inline search is hidden here: the bottom nav's Search entry
	   opens the search sheet, so a second field is a duplicate. */
	.ct-header .ct-header-search-rd { display: none !important; }
}

/* ============================================================
   5. Benefit bar — one swipeable line on mobile
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		padding: 0;
		overflow: hidden;
	}

	/* Wrapping the four benefits into stacked rows made the bar the
	   tallest element on the screen. One horizontally scrollable line
	   keeps it to a single row. */
	.rd-announcebar-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 9px var(--rd-pad-x);
	}

	.rd-announcebar-inner::-webkit-scrollbar { display: none; }

	.rd-announcebar-item { flex: 0 0 auto; }
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }

	/* The nth-child rule that hid benefits 3 and 4 is removed: the
	   point of a swipeable strip is that all of them are reachable. */
	.rd-announcebar-item:nth-child(n+3) { display: inline-flex; }
}

/* ============================================================
   8. Category rail — no bullets, connected spacing
   ============================================================ */

/* The dots between labels were rendered as list separators and read
   as noise. Clean spacing replaces them. */
.rd-categories { list-style: none; }
.rd-categories li::before,
.rd-categories li::marker { content: none !important; }
.rd-categories li { list-style: none; }

/* Pull the rail closer to the nav above and the hero below, so the
   three bands read as one connected marketplace strip. */
.rd-cat-rail-section { padding-top: 16px; padding-bottom: 16px; }

.rd-categories {
	gap: 14px;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Arrows are useful once the row can actually overflow, so they come
   back on desktop where eight-plus categories exceed the width. */
.rd-cat-nav { display: flex !important; top: -2px; }
.rd-cat-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--rd-border);
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

.rd-cat-nav button:hover:not(:disabled) {
	background: var(--rd-primary);
	color: #fff;
	border-color: var(--rd-primary);
}

.rd-cat-nav button:disabled { opacity: .3; cursor: default; }
.rd-cat-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* ============================================================
   2 + 4. Wishlist heart, in the image area
   ============================================================ */

.rd-card__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
}

.rd-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--rd-deep);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(19, 42, 61, .18);
	transition: color var(--rd-transition), transform var(--rd-transition), background var(--rd-transition);
}

.rd-wish svg { fill: none; transition: fill var(--rd-transition); }
.rd-wish:hover { color: var(--rd-sale); transform: scale(1.06); }
.rd-wish:hover svg { fill: rgba(198, 40, 40, .12); }

/* Pressed state must not rely on colour alone — the heart fills and the
   button already carries aria-pressed for assistive technology. */
.rd-wish.is-active { color: var(--rd-sale); }
.rd-wish.is-active svg { fill: currentColor; }
.rd-wish:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }

.rd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   10. Product card consistency
   ============================================================ */

/* Equal-height cards: the title is clamped to two lines so a long
   name cannot push one card's price and button out of alignment with
   its neighbours. */
.rd-products ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px !important;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px !important;
	color: var(--rd-deep) !important;
}

.rd-products ul.products li.product { height: 100%; }

/* Prices align on a baseline: the struck original sits inline and
   never wraps onto its own line. */
.rd-products .price {
	display: flex !important;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 15px;
}

.rd-products .price del {
	opacity: .5;
	font-size: 12.5px;
	order: 2;
	white-space: nowrap;
}

.rd-products .price ins {
	text-decoration: none;
	order: 1;
	font-weight: 700;
	color: var(--rd-sale);
	white-space: nowrap;
}

/* The symbol is rendered as " AED" with a leading space, which
   collapses against the number without this. */
.rd-products .woocommerce-Price-currencySymbol {
	margin-right: .15em;
	font-weight: 600;
	letter-spacing: .2px;
}

.rd-products .posted_in {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--rd-muted);
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-products .posted_in a { color: var(--rd-muted) !important; }

/* Add to cart stays — an intentional deviation from the visual
   reference. Kept compact so six across still reads as a dense
   marketplace row rather than a column of buttons. */
.rd-products .add_to_cart_button,
.rd-products .button {
	width: 100%;
	min-height: 34px !important;
	padding: 6px 10px !important;
	font-size: 12.5px !important;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1.2;
}

/* Badges clear the wishlist heart. */
.rd-products .onsale,
.rd-products .rd-badge-new {
	top: 8px !important;
	left: 8px !important;
	min-height: 0;
	padding: 3px 7px;
	font-size: 10px;
	line-height: 1.2;
	border-radius: 4px;
}

/* Consistent image crop. */
.rd-products .product-image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================
   9. Hero and promo polish
   ============================================================ */

/* One radius token across hero, banners and cards, so the campaign
   block reads as a single composed unit. */
.rd-hero,
.rd-banner,
.rd-products ul.products li.product,
.rd-header-search input[type="search"] {
	border-radius: 10px;
}

/* Text safe area: the copy is kept off the image edge and given a
   stronger left-weighted scrim so it stays legible over any photo. */
.rd-hero__body {
	padding: 26px 30px !important;
	max-width: 62%;
}

.rd-hero__scrim {
	background: linear-gradient(
		100deg,
		rgba(12, 20, 28, .88) 0%,
		rgba(12, 20, 28, .62) 42%,
		rgba(12, 20, 28, .18) 78%,
		rgba(12, 20, 28, .05) 100%
	) !important;
}

.rd-hero__title { font-size: 27px !important; line-height: 1.18; }
.rd-hero__text { font-size: 13.5px; opacity: .9; }

/* Dots sit clear of the copy. */
.rd-hero__dots { bottom: 14px; }

/* Tablet and mobile stack hero first, promos below. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-hero__body { max-width: 70%; padding: 22px 24px !important; }
	.rd-hero__title { font-size: 23px !important; }
}

@media (max-width: 767.98px) {
	.rd-hero__body { max-width: 100%; padding: 20px !important; }
	.rd-hero__title { font-size: 21px !important; }
}

/* ============================================================
   3. Storefront category labels
   ============================================================ */

/* The default category is filtered out of queries, but a product
   seeded before that filter existed can still render the term name.
   The rail and nav exclude it explicitly as well. */
.rd-cat-rail-section a[href*="uncategorized"],
.rd-catnav__list a[href*="uncategorized"] { display: none !important; }/* ============================================================
   PHASE 3A — FINAL POLISH PASS
   -------------------------------------------------------
   Appended block. Each subsection names the section of the brief
   it satisfies.

   1 + 7. Header: wordmark, search balance, three aligned actions
   ============================================================ */

/* The wordmark was plain text. The reference has a mark plus a
   two-tone wordmark with a tagline; this gives it a bag mark and
   splits RD / Souq so the identity reads at a glance. */
.ct-header .site-title a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.ct-header .rd-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--rd-deep);
}

.rd-logo__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--rd-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.rd-logo__mark svg { width: 18px; height: 18px; stroke: currentColor; }

.rd-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.rd-logo__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--rd-deep);
}

.rd-logo__name em {
	font-style: normal;
	color: var(--rd-primary);
}

.rd-logo__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--rd-muted);
	margin-top: 2px;
}

/* Search is the largest single element in the reference header but
   must not swallow the row: it is capped and centred in the gap
   between the logo and the actions. */
.ct-header [data-column="end"] {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.rd-header-actions { order: 2; }
.ct-header-search-rd { order: 1; flex: 1 1 auto; max-width: 560px; }

.rd-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 62px;
	min-height: 46px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--rd-deep);
	text-decoration: none;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-action:hover { background: var(--rd-surface-light); color: var(--rd-primary); }
.rd-action__icon { flex: 0 0 auto; stroke: currentColor; }

/* All three labels share one baseline so the icons read as a set
   rather than three unrelated controls. */
.rd-action__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--rd-muted);
}

.rd-action:hover .rd-action__label { color: var(--rd-primary); }

.rd-action__badge {
	position: absolute;
	top: 1px;
	right: 12px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.rd-action__badge[hidden] { display: none; }

/* Tablet: same composition, tightened. The brief asks for a proper
   marketplace header here rather than the minimal mobile one. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }
	.rd-logo__mark { width: 30px; height: 30px; border-radius: 8px; }
	.rd-action { min-width: 56px; }
	.ct-header-search-rd { max-width: none; }
}

/* ============================================================
   6. Mobile header — MENU | LOGO | CART
   ============================================================ */

@media (max-width: 767.98px) {
	.ct-header [data-column="end"] { gap: 4px; }

	/* The logo moves to the centre so the row reads
	   [menu] [logo] [cart] rather than logo-then-actions. */
	.ct-header [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .site-branding { order: 2; }

	.rd-logo__mark { width: 30px; height: 30px; }
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }

	/* Cart survives; account and wishlist do not, because the bottom
	   nav already carries both and three icons will not fit. */
	.rd-header-actions .rd-action:not(:last-child) { display: none; }

	.rd-action {
		min-width: 42px;
		min-height: 40px;
		padding: 4px;
	}

	.rd-action__label { display: none; }
	.rd-action__badge { right: 2px; }

	/* Inline search is hidden here: the bottom nav's Search entry
	   opens the search sheet, so a second field is a duplicate. */
	.ct-header .ct-header-search-rd { display: none !important; }
}

/* ============================================================
   5. Benefit bar — one swipeable line on mobile
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		padding: 0;
		overflow: hidden;
	}

	/* Wrapping the four benefits into stacked rows made the bar the
	   tallest element on the screen. One horizontally scrollable line
	   keeps it to a single row. */
	.rd-announcebar-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 9px var(--rd-pad-x);
	}

	.rd-announcebar-inner::-webkit-scrollbar { display: none; }

	.rd-announcebar-item { flex: 0 0 auto; }
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }

	/* The nth-child rule that hid benefits 3 and 4 is removed: the
	   point of a swipeable strip is that all of them are reachable. */
	.rd-announcebar-item:nth-child(n+3) { display: inline-flex; }
}

/* ============================================================
   8. Category rail — no bullets, connected spacing
   ============================================================ */

/* The dots between labels were rendered as list separators and read
   as noise. Clean spacing replaces them. */
.rd-categories { list-style: none; }
.rd-categories li::before,
.rd-categories li::marker { content: none !important; }
.rd-categories li { list-style: none; }

/* Pull the rail closer to the nav above and the hero below, so the
   three bands read as one connected marketplace strip. */
.rd-cat-rail-section { padding-top: 16px; padding-bottom: 16px; }

.rd-categories {
	gap: 14px;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Arrows are useful once the row can actually overflow, so they come
   back on desktop where eight-plus categories exceed the width. */
.rd-cat-nav { display: flex !important; top: -2px; }
.rd-cat-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--rd-border);
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

.rd-cat-nav button:hover:not(:disabled) {
	background: var(--rd-primary);
	color: #fff;
	border-color: var(--rd-primary);
}

.rd-cat-nav button:disabled { opacity: .3; cursor: default; }
.rd-cat-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* ============================================================
   2 + 4. Wishlist heart, in the image area
   ============================================================ */

.rd-card__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
}

.rd-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--rd-deep);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(19, 42, 61, .18);
	transition: color var(--rd-transition), transform var(--rd-transition), background var(--rd-transition);
}

.rd-wish svg { fill: none; transition: fill var(--rd-transition); }
.rd-wish:hover { color: var(--rd-sale); transform: scale(1.06); }
.rd-wish:hover svg { fill: rgba(198, 40, 40, .12); }

/* Pressed state must not rely on colour alone — the heart fills and the
   button already carries aria-pressed for assistive technology. */
.rd-wish.is-active { color: var(--rd-sale); }
.rd-wish.is-active svg { fill: currentColor; }
.rd-wish:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }

.rd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   10. Product card consistency
   ============================================================ */

/* Equal-height cards: the title is clamped to two lines so a long
   name cannot push one card's price and button out of alignment with
   its neighbours. */
.rd-products ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px !important;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px !important;
	color: var(--rd-deep) !important;
}

.rd-products ul.products li.product { height: 100%; }

/* Prices align on a baseline: the struck original sits inline and
   never wraps onto its own line. */
.rd-products .price {
	display: flex !important;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 15px;
}

.rd-products .price del {
	opacity: .5;
	font-size: 12.5px;
	order: 2;
	white-space: nowrap;
}

.rd-products .price ins {
	text-decoration: none;
	order: 1;
	font-weight: 700;
	color: var(--rd-sale);
	white-space: nowrap;
}

/* The symbol is rendered as " AED" with a leading space, which
   collapses against the number without this. */
.rd-products .woocommerce-Price-currencySymbol {
	margin-right: .15em;
	font-weight: 600;
	letter-spacing: .2px;
}

.rd-products .posted_in {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--rd-muted);
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-products .posted_in a { color: var(--rd-muted) !important; }

/* Add to cart stays — an intentional deviation from the visual
   reference. Kept compact so six across still reads as a dense
   marketplace row rather than a column of buttons. */
.rd-products .add_to_cart_button,
.rd-products .button {
	width: 100%;
	min-height: 34px !important;
	padding: 6px 10px !important;
	font-size: 12.5px !important;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1.2;
}

/* Badges clear the wishlist heart. */
.rd-products .onsale,
.rd-products .rd-badge-new {
	top: 8px !important;
	left: 8px !important;
	min-height: 0;
	padding: 3px 7px;
	font-size: 10px;
	line-height: 1.2;
	border-radius: 4px;
}

/* Consistent image crop. */
.rd-products .product-image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================
   9. Hero and promo polish
   ============================================================ */

/* One radius token across hero, banners and cards, so the campaign
   block reads as a single composed unit. */
.rd-hero,
.rd-banner,
.rd-products ul.products li.product,
.rd-header-search input[type="search"] {
	border-radius: 10px;
}

/* Text safe area: the copy is kept off the image edge and given a
   stronger left-weighted scrim so it stays legible over any photo. */
.rd-hero__body {
	padding: 26px 30px !important;
	max-width: 62%;
}

.rd-hero__scrim {
	background: linear-gradient(
		100deg,
		rgba(12, 20, 28, .88) 0%,
		rgba(12, 20, 28, .62) 42%,
		rgba(12, 20, 28, .18) 78%,
		rgba(12, 20, 28, .05) 100%
	) !important;
}

.rd-hero__title { font-size: 27px !important; line-height: 1.18; }
.rd-hero__text { font-size: 13.5px; opacity: .9; }

/* Dots sit clear of the copy. */
.rd-hero__dots { bottom: 14px; }

/* Tablet and mobile stack hero first, promos below. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-hero__body { max-width: 70%; padding: 22px 24px !important; }
	.rd-hero__title { font-size: 23px !important; }
}

@media (max-width: 767.98px) {
	.rd-hero__body { max-width: 100%; padding: 20px !important; }
	.rd-hero__title { font-size: 21px !important; }
}

/* ============================================================
   3. Storefront category labels
   ============================================================ */

/* The default category is filtered out of queries, but a product
   seeded before that filter existed can still render the term name.
   The rail and nav exclude it explicitly as well. */
.rd-cat-rail-section a[href*="uncategorized"],
.rd-catnav__list a[href*="uncategorized"] { display: none !important; }
/* WooCommerce emits the AED code with its own leading space, which
   renders as a double gap inside the visually-hidden price summary
   ("Original price was:  AED72.00"). Collapsing the inline space
   fixes the announced text without touching the currency filter. */
.rd-products .screen-reader-text { white-space: normal; }
.screen-reader-text { word-spacing: -0.25em; }
/* ============================================================
   PHASE 3A — FINAL POLISH PASS
   -------------------------------------------------------
   Appended block. Each subsection names the section of the brief
   it satisfies.

   1 + 7. Header: wordmark, search balance, three aligned actions
   ============================================================ */

/* The wordmark was plain text. The reference has a mark plus a
   two-tone wordmark with a tagline; this gives it a bag mark and
   splits RD / Souq so the identity reads at a glance. */
.ct-header .site-title a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.ct-header .rd-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--rd-deep);
}

.rd-logo__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--rd-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.rd-logo__mark svg { width: 18px; height: 18px; stroke: currentColor; }

.rd-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.rd-logo__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--rd-deep);
}

.rd-logo__name em {
	font-style: normal;
	color: var(--rd-primary);
}

.rd-logo__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--rd-muted);
	margin-top: 2px;
}

/* Search is the largest single element in the reference header but
   must not swallow the row: it is capped and centred in the gap
   between the logo and the actions. */
.ct-header [data-column="end"] {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.rd-header-actions { order: 2; }
.ct-header-search-rd { order: 1; flex: 1 1 auto; max-width: 560px; }

.rd-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 62px;
	min-height: 46px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--rd-deep);
	text-decoration: none;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-action:hover { background: var(--rd-surface-light); color: var(--rd-primary); }
.rd-action__icon { flex: 0 0 auto; stroke: currentColor; }

/* All three labels share one baseline so the icons read as a set
   rather than three unrelated controls. */
.rd-action__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--rd-muted);
}

.rd-action:hover .rd-action__label { color: var(--rd-primary); }

.rd-action__badge {
	position: absolute;
	top: 1px;
	right: 12px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.rd-action__badge[hidden] { display: none; }

/* Tablet: same composition, tightened. The brief asks for a proper
   marketplace header here rather than the minimal mobile one. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }
	.rd-logo__mark { width: 30px; height: 30px; border-radius: 8px; }
	.rd-action { min-width: 56px; }
	.ct-header-search-rd { max-width: none; }
}

/* ============================================================
   6. Mobile header — MENU | LOGO | CART
   ============================================================ */

@media (max-width: 767.98px) {
	.ct-header [data-column="end"] { gap: 4px; }

	/* The logo moves to the centre so the row reads
	   [menu] [logo] [cart] rather than logo-then-actions. */
	.ct-header [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .site-branding { order: 2; }

	.rd-logo__mark { width: 30px; height: 30px; }
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }

	/* Cart survives; account and wishlist do not, because the bottom
	   nav already carries both and three icons will not fit. */
	.rd-header-actions .rd-action:not(:last-child) { display: none; }

	.rd-action {
		min-width: 42px;
		min-height: 40px;
		padding: 4px;
	}

	.rd-action__label { display: none; }
	.rd-action__badge { right: 2px; }

	/* Inline search is hidden here: the bottom nav's Search entry
	   opens the search sheet, so a second field is a duplicate. */
	.ct-header .ct-header-search-rd { display: none !important; }
}

/* ============================================================
   5. Benefit bar — one swipeable line on mobile
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		padding: 0;
		overflow: hidden;
	}

	/* Wrapping the four benefits into stacked rows made the bar the
	   tallest element on the screen. One horizontally scrollable line
	   keeps it to a single row. */
	.rd-announcebar-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 9px var(--rd-pad-x);
	}

	.rd-announcebar-inner::-webkit-scrollbar { display: none; }

	.rd-announcebar-item { flex: 0 0 auto; }
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }

	/* The nth-child rule that hid benefits 3 and 4 is removed: the
	   point of a swipeable strip is that all of them are reachable. */
	.rd-announcebar-item:nth-child(n+3) { display: inline-flex; }
}

/* ============================================================
   8. Category rail — no bullets, connected spacing
   ============================================================ */

/* The dots between labels were rendered as list separators and read
   as noise. Clean spacing replaces them. */
.rd-categories { list-style: none; }
.rd-categories li::before,
.rd-categories li::marker { content: none !important; }
.rd-categories li { list-style: none; }

/* Pull the rail closer to the nav above and the hero below, so the
   three bands read as one connected marketplace strip. */
.rd-cat-rail-section { padding-top: 16px; padding-bottom: 16px; }

.rd-categories {
	gap: 14px;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Arrows are useful once the row can actually overflow, so they come
   back on desktop where eight-plus categories exceed the width. */
.rd-cat-nav { display: flex !important; top: -2px; }
.rd-cat-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--rd-border);
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

.rd-cat-nav button:hover:not(:disabled) {
	background: var(--rd-primary);
	color: #fff;
	border-color: var(--rd-primary);
}

.rd-cat-nav button:disabled { opacity: .3; cursor: default; }
.rd-cat-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* ============================================================
   2 + 4. Wishlist heart, in the image area
   ============================================================ */

.rd-card__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
}

.rd-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--rd-deep);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(19, 42, 61, .18);
	transition: color var(--rd-transition), transform var(--rd-transition), background var(--rd-transition);
}

.rd-wish svg { fill: none; transition: fill var(--rd-transition); }
.rd-wish:hover { color: var(--rd-sale); transform: scale(1.06); }
.rd-wish:hover svg { fill: rgba(198, 40, 40, .12); }

/* Pressed state must not rely on colour alone — the heart fills and the
   button already carries aria-pressed for assistive technology. */
.rd-wish.is-active { color: var(--rd-sale); }
.rd-wish.is-active svg { fill: currentColor; }
.rd-wish:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }

.rd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   10. Product card consistency
   ============================================================ */

/* Equal-height cards: the title is clamped to two lines so a long
   name cannot push one card's price and button out of alignment with
   its neighbours. */
.rd-products ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px !important;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px !important;
	color: var(--rd-deep) !important;
}

.rd-products ul.products li.product { height: 100%; }

/* Prices align on a baseline: the struck original sits inline and
   never wraps onto its own line. */
.rd-products .price {
	display: flex !important;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 15px;
}

.rd-products .price del {
	opacity: .5;
	font-size: 12.5px;
	order: 2;
	white-space: nowrap;
}

.rd-products .price ins {
	text-decoration: none;
	order: 1;
	font-weight: 700;
	color: var(--rd-sale);
	white-space: nowrap;
}

/* The symbol is rendered as " AED" with a leading space, which
   collapses against the number without this. */
.rd-products .woocommerce-Price-currencySymbol {
	margin-right: .15em;
	font-weight: 600;
	letter-spacing: .2px;
}

.rd-products .posted_in {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--rd-muted);
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-products .posted_in a { color: var(--rd-muted) !important; }

/* Add to cart stays — an intentional deviation from the visual
   reference. Kept compact so six across still reads as a dense
   marketplace row rather than a column of buttons. */
.rd-products .add_to_cart_button,
.rd-products .button {
	width: 100%;
	min-height: 34px !important;
	padding: 6px 10px !important;
	font-size: 12.5px !important;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1.2;
}

/* Badges clear the wishlist heart. */
.rd-products .onsale,
.rd-products .rd-badge-new {
	top: 8px !important;
	left: 8px !important;
	min-height: 0;
	padding: 3px 7px;
	font-size: 10px;
	line-height: 1.2;
	border-radius: 4px;
}

/* Consistent image crop. */
.rd-products .product-image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================
   9. Hero and promo polish
   ============================================================ */

/* One radius token across hero, banners and cards, so the campaign
   block reads as a single composed unit. */
.rd-hero,
.rd-banner,
.rd-products ul.products li.product,
.rd-header-search input[type="search"] {
	border-radius: 10px;
}

/* Text safe area: the copy is kept off the image edge and given a
   stronger left-weighted scrim so it stays legible over any photo. */
.rd-hero__body {
	padding: 26px 30px !important;
	max-width: 62%;
}

.rd-hero__scrim {
	background: linear-gradient(
		100deg,
		rgba(12, 20, 28, .88) 0%,
		rgba(12, 20, 28, .62) 42%,
		rgba(12, 20, 28, .18) 78%,
		rgba(12, 20, 28, .05) 100%
	) !important;
}

.rd-hero__title { font-size: 27px !important; line-height: 1.18; }
.rd-hero__text { font-size: 13.5px; opacity: .9; }

/* Dots sit clear of the copy. */
.rd-hero__dots { bottom: 14px; }

/* Tablet and mobile stack hero first, promos below. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-hero__body { max-width: 70%; padding: 22px 24px !important; }
	.rd-hero__title { font-size: 23px !important; }
}

@media (max-width: 767.98px) {
	.rd-hero__body { max-width: 100%; padding: 20px !important; }
	.rd-hero__title { font-size: 21px !important; }
}

/* ============================================================
   3. Storefront category labels
   ============================================================ */

/* The default category is filtered out of queries, but a product
   seeded before that filter existed can still render the term name.
   The rail and nav exclude it explicitly as well. */
.rd-cat-rail-section a[href*="uncategorized"],
.rd-catnav__list a[href*="uncategorized"] { display: none !important; }
/* WooCommerce emits the AED code with its own leading space, which
   renders as a double gap inside the visually-hidden price summary
   ("Original price was:  AED72.00"). Collapsing the inline space
   fixes the announced text without touching the currency filter. */
.rd-products .screen-reader-text { white-space: normal; }
.screen-reader-text { word-spacing: -0.25em; }

/* ============================================================
   Mobile header: [MENU] [LOGO] [CART]
   -------------------------------------------------------
   Blocksy renders logo in the start column and the menu trigger in
   the end column, so the mobile row came out [LOGO] [MENU] and
   carried no cart at all. Three items do not fit as two flex
   children, so the cart is taken out of flow and pinned right.
   ============================================================ */

@media (max-width: 767.98px) {
	/* Blocksy hides its own cart at this width because the bottom nav
	   has one. This override restores it; the bottom nav entry stays,
	   since that is the brief's specified mobile layout. */
	.ct-header [data-id="cart"] {
		display: flex !important;
		position: absolute;
		right: 52px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 6;
	}

	/* The end column holds the trigger; send it to the left of the row. */
	.ct-header [data-row="middle"] [data-column="end"] { order: -1; }

	/* The logo takes the space that is left and centres in it. */
	.ct-header [data-row="middle"] [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .rd-branding { display: flex; }
}

/* ============================================================
   Wishlist heart sits inside the image area
   -------------------------------------------------------
   WooCommerce fires woocommerce_before_shop_loop_item_title
   BEFORE the .product-image div, inside the card's link. The link
   is not a positioning context, so the absolutely positioned heart
   resolved against the page and landed below the image. The card
   itself is the intended frame.
   ============================================================ */

.rd-products ul.products li.product .product-image,
.rd-products ul.products li.product > a.woocommerce-loop-product__link {
	position: relative;
}

/* Neutralise any inherited link positioning so the card is the frame. */
.rd-products ul.products li.product > a.woocommerce-loop-product__link { position: static; }

.rd-card__wish {
	position: absolute !important;
	top: 8px;
	right: 8px;
	z-index: 5;
	margin: 0;
}

.rd-products ul.products li.product { position: relative; }

/* ============================================================
   Benefit bar: fade the right edge so a clipped message reads as
   scrollable rather than broken.
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}
}
/* ============================================================
   PHASE 3A — FINAL POLISH PASS
   -------------------------------------------------------
   Appended block. Each subsection names the section of the brief
   it satisfies.

   1 + 7. Header: wordmark, search balance, three aligned actions
   ============================================================ */

/* The wordmark was plain text. The reference has a mark plus a
   two-tone wordmark with a tagline; this gives it a bag mark and
   splits RD / Souq so the identity reads at a glance. */
.ct-header .site-title a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.ct-header .rd-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--rd-deep);
}

.rd-logo__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--rd-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.rd-logo__mark svg { width: 18px; height: 18px; stroke: currentColor; }

.rd-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.rd-logo__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--rd-deep);
}

.rd-logo__name em {
	font-style: normal;
	color: var(--rd-primary);
}

.rd-logo__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--rd-muted);
	margin-top: 2px;
}

/* Search is the largest single element in the reference header but
   must not swallow the row: it is capped and centred in the gap
   between the logo and the actions. */
.ct-header [data-column="end"] {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.rd-header-actions { order: 2; }
.ct-header-search-rd { order: 1; flex: 1 1 auto; max-width: 560px; }

.rd-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 62px;
	min-height: 46px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--rd-deep);
	text-decoration: none;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-action:hover { background: var(--rd-surface-light); color: var(--rd-primary); }
.rd-action__icon { flex: 0 0 auto; stroke: currentColor; }

/* All three labels share one baseline so the icons read as a set
   rather than three unrelated controls. */
.rd-action__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--rd-muted);
}

.rd-action:hover .rd-action__label { color: var(--rd-primary); }

.rd-action__badge {
	position: absolute;
	top: 1px;
	right: 12px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.rd-action__badge[hidden] { display: none; }

/* Tablet: same composition, tightened. The brief asks for a proper
   marketplace header here rather than the minimal mobile one. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }
	.rd-logo__mark { width: 30px; height: 30px; border-radius: 8px; }
	.rd-action { min-width: 56px; }
	.ct-header-search-rd { max-width: none; }
}

/* ============================================================
   6. Mobile header — MENU | LOGO | CART
   ============================================================ */

@media (max-width: 767.98px) {
	.ct-header [data-column="end"] { gap: 4px; }

	/* The logo moves to the centre so the row reads
	   [menu] [logo] [cart] rather than logo-then-actions. */
	.ct-header [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .site-branding { order: 2; }

	.rd-logo__mark { width: 30px; height: 30px; }
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }

	/* Cart survives; account and wishlist do not, because the bottom
	   nav already carries both and three icons will not fit. */
	.rd-header-actions .rd-action:not(:last-child) { display: none; }

	.rd-action {
		min-width: 42px;
		min-height: 40px;
		padding: 4px;
	}

	.rd-action__label { display: none; }
	.rd-action__badge { right: 2px; }

	/* Inline search is hidden here: the bottom nav's Search entry
	   opens the search sheet, so a second field is a duplicate. */
	.ct-header .ct-header-search-rd { display: none !important; }
}

/* ============================================================
   5. Benefit bar — one swipeable line on mobile
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		padding: 0;
		overflow: hidden;
	}

	/* Wrapping the four benefits into stacked rows made the bar the
	   tallest element on the screen. One horizontally scrollable line
	   keeps it to a single row. */
	.rd-announcebar-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 9px var(--rd-pad-x);
	}

	.rd-announcebar-inner::-webkit-scrollbar { display: none; }

	.rd-announcebar-item { flex: 0 0 auto; }
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }

	/* The nth-child rule that hid benefits 3 and 4 is removed: the
	   point of a swipeable strip is that all of them are reachable. */
	.rd-announcebar-item:nth-child(n+3) { display: inline-flex; }
}

/* ============================================================
   8. Category rail — no bullets, connected spacing
   ============================================================ */

/* The dots between labels were rendered as list separators and read
   as noise. Clean spacing replaces them. */
.rd-categories { list-style: none; }
.rd-categories li::before,
.rd-categories li::marker { content: none !important; }
.rd-categories li { list-style: none; }

/* Pull the rail closer to the nav above and the hero below, so the
   three bands read as one connected marketplace strip. */
.rd-cat-rail-section { padding-top: 16px; padding-bottom: 16px; }

.rd-categories {
	gap: 14px;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Arrows are useful once the row can actually overflow, so they come
   back on desktop where eight-plus categories exceed the width. */
.rd-cat-nav { display: flex !important; top: -2px; }
.rd-cat-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--rd-border);
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

.rd-cat-nav button:hover:not(:disabled) {
	background: var(--rd-primary);
	color: #fff;
	border-color: var(--rd-primary);
}

.rd-cat-nav button:disabled { opacity: .3; cursor: default; }
.rd-cat-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* ============================================================
   2 + 4. Wishlist heart, in the image area
   ============================================================ */

.rd-card__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
}

.rd-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--rd-deep);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(19, 42, 61, .18);
	transition: color var(--rd-transition), transform var(--rd-transition), background var(--rd-transition);
}

.rd-wish svg { fill: none; transition: fill var(--rd-transition); }
.rd-wish:hover { color: var(--rd-sale); transform: scale(1.06); }
.rd-wish:hover svg { fill: rgba(198, 40, 40, .12); }

/* Pressed state must not rely on colour alone — the heart fills and the
   button already carries aria-pressed for assistive technology. */
.rd-wish.is-active { color: var(--rd-sale); }
.rd-wish.is-active svg { fill: currentColor; }
.rd-wish:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }

.rd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   10. Product card consistency
   ============================================================ */

/* Equal-height cards: the title is clamped to two lines so a long
   name cannot push one card's price and button out of alignment with
   its neighbours. */
.rd-products ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px !important;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px !important;
	color: var(--rd-deep) !important;
}

.rd-products ul.products li.product { height: 100%; }

/* Prices align on a baseline: the struck original sits inline and
   never wraps onto its own line. */
.rd-products .price {
	display: flex !important;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 15px;
}

.rd-products .price del {
	opacity: .5;
	font-size: 12.5px;
	order: 2;
	white-space: nowrap;
}

.rd-products .price ins {
	text-decoration: none;
	order: 1;
	font-weight: 700;
	color: var(--rd-sale);
	white-space: nowrap;
}

/* The symbol is rendered as " AED" with a leading space, which
   collapses against the number without this. */
.rd-products .woocommerce-Price-currencySymbol {
	margin-right: .15em;
	font-weight: 600;
	letter-spacing: .2px;
}

.rd-products .posted_in {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--rd-muted);
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-products .posted_in a { color: var(--rd-muted) !important; }

/* Add to cart stays — an intentional deviation from the visual
   reference. Kept compact so six across still reads as a dense
   marketplace row rather than a column of buttons. */
.rd-products .add_to_cart_button,
.rd-products .button {
	width: 100%;
	min-height: 34px !important;
	padding: 6px 10px !important;
	font-size: 12.5px !important;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1.2;
}

/* Badges clear the wishlist heart. */
.rd-products .onsale,
.rd-products .rd-badge-new {
	top: 8px !important;
	left: 8px !important;
	min-height: 0;
	padding: 3px 7px;
	font-size: 10px;
	line-height: 1.2;
	border-radius: 4px;
}

/* Consistent image crop. */
.rd-products .product-image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================
   9. Hero and promo polish
   ============================================================ */

/* One radius token across hero, banners and cards, so the campaign
   block reads as a single composed unit. */
.rd-hero,
.rd-banner,
.rd-products ul.products li.product,
.rd-header-search input[type="search"] {
	border-radius: 10px;
}

/* Text safe area: the copy is kept off the image edge and given a
   stronger left-weighted scrim so it stays legible over any photo. */
.rd-hero__body {
	padding: 26px 30px !important;
	max-width: 62%;
}

.rd-hero__scrim {
	background: linear-gradient(
		100deg,
		rgba(12, 20, 28, .88) 0%,
		rgba(12, 20, 28, .62) 42%,
		rgba(12, 20, 28, .18) 78%,
		rgba(12, 20, 28, .05) 100%
	) !important;
}

.rd-hero__title { font-size: 27px !important; line-height: 1.18; }
.rd-hero__text { font-size: 13.5px; opacity: .9; }

/* Dots sit clear of the copy. */
.rd-hero__dots { bottom: 14px; }

/* Tablet and mobile stack hero first, promos below. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-hero__body { max-width: 70%; padding: 22px 24px !important; }
	.rd-hero__title { font-size: 23px !important; }
}

@media (max-width: 767.98px) {
	.rd-hero__body { max-width: 100%; padding: 20px !important; }
	.rd-hero__title { font-size: 21px !important; }
}

/* ============================================================
   3. Storefront category labels
   ============================================================ */

/* The default category is filtered out of queries, but a product
   seeded before that filter existed can still render the term name.
   The rail and nav exclude it explicitly as well. */
.rd-cat-rail-section a[href*="uncategorized"],
.rd-catnav__list a[href*="uncategorized"] { display: none !important; }
/* WooCommerce emits the AED code with its own leading space, which
   renders as a double gap inside the visually-hidden price summary
   ("Original price was:  AED72.00"). Collapsing the inline space
   fixes the announced text without touching the currency filter. */
.rd-products .screen-reader-text { white-space: normal; }
.screen-reader-text { word-spacing: -0.25em; }

/* ============================================================
   Mobile header: [MENU] [LOGO] [CART]
   -------------------------------------------------------
   Blocksy renders logo in the start column and the menu trigger in
   the end column, so the mobile row came out [LOGO] [MENU] and
   carried no cart at all. Three items do not fit as two flex
   children, so the cart is taken out of flow and pinned right.
   ============================================================ */

@media (max-width: 767.98px) {
	/* Blocksy hides its own cart at this width because the bottom nav
	   has one. This override restores it; the bottom nav entry stays,
	   since that is the brief's specified mobile layout. */
	.ct-header [data-id="cart"] {
		display: flex !important;
		position: absolute;
		right: 52px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 6;
	}

	/* The end column holds the trigger; send it to the left of the row. */
	.ct-header [data-row="middle"] [data-column="end"] { order: -1; }

	/* The logo takes the space that is left and centres in it. */
	.ct-header [data-row="middle"] [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .rd-branding { display: flex; }
}

/* ============================================================
   Wishlist heart sits inside the image area
   -------------------------------------------------------
   WooCommerce fires woocommerce_before_shop_loop_item_title
   BEFORE the .product-image div, inside the card's link. The link
   is not a positioning context, so the absolutely positioned heart
   resolved against the page and landed below the image. The card
   itself is the intended frame.
   ============================================================ */

.rd-products ul.products li.product .product-image,
.rd-products ul.products li.product > a.woocommerce-loop-product__link {
	position: relative;
}

/* Neutralise any inherited link positioning so the card is the frame. */
.rd-products ul.products li.product > a.woocommerce-loop-product__link { position: static; }

.rd-card__wish {
	position: absolute !important;
	top: 8px;
	right: 8px;
	z-index: 5;
	margin: 0;
}

.rd-products ul.products li.product { position: relative; }

/* ============================================================
   Benefit bar: fade the right edge so a clipped message reads as
   scrollable rather than broken.
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}
}

/* ============================================================
   Corrected heart placement and mobile cart
   -------------------------------------------------------
   Measured over CDP: the heart computed to position:static and
   landed 127px below the image top. WooCommerce's card rules
   set .button/.onsale positioning on the card, and the heart's
   wrapper was not part of any positioned ancestor, so the
   absolute offsets had no frame to resolve against.

   The card is the frame; the heart is pinned to it with a
   specificity high enough to beat the WooCommerce defaults.
   ============================================================ */

.rd-products ul.products li.product > .rd-card__wish,
.rd-products ul.products li.product .rd-card__wish {
	position: absolute !important;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 5;
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* The wrapper is a plain div, so block layout would put it on its
   own line between the image and the title. */
.rd-products ul.products li.product > .rd-card__wish {
	display: block;
	width: 32px;
	height: 32px;
}

/* The wishlist button inherits WooCommerce's .button sizing on the
   loop, which turns it into a wide pill. */
.rd-products .rd-card__wish .rd-wish {
	display: inline-flex !important;
	width: 32px !important;
	height: 32px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* ============================================================
   Mobile cart in the header row
   -------------------------------------------------------
   Rendered by the logo view, which reaches the mobile header row;
   the search view does not. Without this the mobile header had no
   cart at all, since Blocksy's own cart item is display:none here.
   ============================================================ */

.rd-branding {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.rd-action--mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 40px;
	min-height: 40px;
	padding: 0 6px;
	border-radius: 8px;
	color: var(--rd-deep);
}

.rd-action--mobile:hover { background: var(--rd-surface-light); }

/* Above 768 the logo view stops rendering it, and the desktop
   cluster in the search view takes over. This is a belt-and-braces
   guard so the two can never both be visible. */
@media (min-width: 768px) {
	.rd-action--mobile { display: none !important; }
}

/* ============================================================
   Equal card heights
   -------------------------------------------------------
   Measured 341px vs 361px across the first six cards. The cause
   is the category label: single-line and two-line labels produce
   different heights because the flex column distributes the slack.
   ============================================================ */

.rd-products ul.products li.product > .woocommerce-product-gallery__trigger {
	display: none !important;
}

.rd-products ul.products li.product .onsale + .rd-badge-new { left: 46px !important; }

.rd-products ul.products li.product .product_type,
.rd-products ul.products li.product .posted_in {
	min-height: 1.4em;
	line-height: 1.4;
}
/* ============================================================
   PHASE 3A — FINAL POLISH PASS
   -------------------------------------------------------
   Appended block. Each subsection names the section of the brief
   it satisfies.

   1 + 7. Header: wordmark, search balance, three aligned actions
   ============================================================ */

/* The wordmark was plain text. The reference has a mark plus a
   two-tone wordmark with a tagline; this gives it a bag mark and
   splits RD / Souq so the identity reads at a glance. */
.ct-header .site-title a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.ct-header .rd-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--rd-deep);
}

.rd-logo__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--rd-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.rd-logo__mark svg { width: 18px; height: 18px; stroke: currentColor; }

.rd-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.rd-logo__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--rd-deep);
}

.rd-logo__name em {
	font-style: normal;
	color: var(--rd-primary);
}

.rd-logo__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--rd-muted);
	margin-top: 2px;
}

/* Search is the largest single element in the reference header but
   must not swallow the row: it is capped and centred in the gap
   between the logo and the actions. */
.ct-header [data-column="end"] {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.rd-header-actions { order: 2; }
.ct-header-search-rd { order: 1; flex: 1 1 auto; max-width: 560px; }

.rd-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-action {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 62px;
	min-height: 46px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--rd-deep);
	text-decoration: none;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-action:hover { background: var(--rd-surface-light); color: var(--rd-primary); }
.rd-action__icon { flex: 0 0 auto; stroke: currentColor; }

/* All three labels share one baseline so the icons read as a set
   rather than three unrelated controls. */
.rd-action__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--rd-muted);
}

.rd-action:hover .rd-action__label { color: var(--rd-primary); }

.rd-action__badge {
	position: absolute;
	top: 1px;
	right: 12px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.rd-action__badge[hidden] { display: none; }

/* Tablet: same composition, tightened. The brief asks for a proper
   marketplace header here rather than the minimal mobile one. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }
	.rd-logo__mark { width: 30px; height: 30px; border-radius: 8px; }
	.rd-action { min-width: 56px; }
	.ct-header-search-rd { max-width: none; }
}

/* ============================================================
   6. Mobile header — MENU | LOGO | CART
   ============================================================ */

@media (max-width: 767.98px) {
	.ct-header [data-column="end"] { gap: 4px; }

	/* The logo moves to the centre so the row reads
	   [menu] [logo] [cart] rather than logo-then-actions. */
	.ct-header [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .site-branding { order: 2; }

	.rd-logo__mark { width: 30px; height: 30px; }
	.rd-logo__tag { display: none; }
	.rd-logo__name { font-size: 18px; }

	/* Cart survives; account and wishlist do not, because the bottom
	   nav already carries both and three icons will not fit. */
	.rd-header-actions .rd-action:not(:last-child) { display: none; }

	.rd-action {
		min-width: 42px;
		min-height: 40px;
		padding: 4px;
	}

	.rd-action__label { display: none; }
	.rd-action__badge { right: 2px; }

	/* Inline search is hidden here: the bottom nav's Search entry
	   opens the search sheet, so a second field is a duplicate. */
	.ct-header .ct-header-search-rd { display: none !important; }
}

/* ============================================================
   5. Benefit bar — one swipeable line on mobile
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		padding: 0;
		overflow: hidden;
	}

	/* Wrapping the four benefits into stacked rows made the bar the
	   tallest element on the screen. One horizontally scrollable line
	   keeps it to a single row. */
	.rd-announcebar-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 9px var(--rd-pad-x);
	}

	.rd-announcebar-inner::-webkit-scrollbar { display: none; }

	.rd-announcebar-item { flex: 0 0 auto; }
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }

	/* The nth-child rule that hid benefits 3 and 4 is removed: the
	   point of a swipeable strip is that all of them are reachable. */
	.rd-announcebar-item:nth-child(n+3) { display: inline-flex; }
}

/* ============================================================
   8. Category rail — no bullets, connected spacing
   ============================================================ */

/* The dots between labels were rendered as list separators and read
   as noise. Clean spacing replaces them. */
.rd-categories { list-style: none; }
.rd-categories li::before,
.rd-categories li::marker { content: none !important; }
.rd-categories li { list-style: none; }

/* Pull the rail closer to the nav above and the hero below, so the
   three bands read as one connected marketplace strip. */
.rd-cat-rail-section { padding-top: 16px; padding-bottom: 16px; }

.rd-categories {
	gap: 14px;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Arrows are useful once the row can actually overflow, so they come
   back on desktop where eight-plus categories exceed the width. */
.rd-cat-nav { display: flex !important; top: -2px; }
.rd-cat-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--rd-border);
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

.rd-cat-nav button:hover:not(:disabled) {
	background: var(--rd-primary);
	color: #fff;
	border-color: var(--rd-primary);
}

.rd-cat-nav button:disabled { opacity: .3; cursor: default; }
.rd-cat-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* ============================================================
   2 + 4. Wishlist heart, in the image area
   ============================================================ */



.rd-wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--rd-deep);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(19, 42, 61, .18);
	transition: color var(--rd-transition), transform var(--rd-transition), background var(--rd-transition);
}

.rd-wish svg { fill: none; transition: fill var(--rd-transition); }
.rd-wish:hover { color: var(--rd-sale); transform: scale(1.06); }
.rd-wish:hover svg { fill: rgba(198, 40, 40, .12); }

/* Pressed state must not rely on colour alone — the heart fills and the
   button already carries aria-pressed for assistive technology. */
.rd-wish.is-active { color: var(--rd-sale); }
.rd-wish.is-active svg { fill: currentColor; }
.rd-wish:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }

.rd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   10. Product card consistency
   ============================================================ */

/* Equal-height cards: the title is clamped to two lines so a long
   name cannot push one card's price and button out of alignment with
   its neighbours. */
.rd-products ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px !important;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px !important;
	color: var(--rd-deep) !important;
}

.rd-products ul.products li.product { height: 100%; }

/* Prices align on a baseline: the struck original sits inline and
   never wraps onto its own line. */
.rd-products .price {
	display: flex !important;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 15px;
}

.rd-products .price del {
	opacity: .5;
	font-size: 12.5px;
	order: 2;
	white-space: nowrap;
}

.rd-products .price ins {
	text-decoration: none;
	order: 1;
	font-weight: 700;
	color: var(--rd-sale);
	white-space: nowrap;
}

/* The symbol is rendered as " AED" with a leading space, which
   collapses against the number without this. */
.rd-products .woocommerce-Price-currencySymbol {
	margin-right: .15em;
	font-weight: 600;
	letter-spacing: .2px;
}

.rd-products .posted_in {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--rd-muted);
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-products .posted_in a { color: var(--rd-muted) !important; }

/* Add to cart stays — an intentional deviation from the visual
   reference. Kept compact so six across still reads as a dense
   marketplace row rather than a column of buttons. */
.rd-products .add_to_cart_button,
.rd-products .button {
	width: 100%;
	min-height: 34px !important;
	padding: 6px 10px !important;
	font-size: 12.5px !important;
	font-weight: 600;
	border-radius: 6px;
	line-height: 1.2;
}

/* Badges clear the wishlist heart. */
.rd-products .onsale,
.rd-products .rd-badge-new {
	top: 8px !important;
	left: 8px !important;
	min-height: 0;
	padding: 3px 7px;
	font-size: 10px;
	line-height: 1.2;
	border-radius: 4px;
}

/* Consistent image crop. */
.rd-products .product-image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================
   9. Hero and promo polish
   ============================================================ */

/* One radius token across hero, banners and cards, so the campaign
   block reads as a single composed unit. */
.rd-hero,
.rd-banner,
.rd-products ul.products li.product,
.rd-header-search input[type="search"] {
	border-radius: 10px;
}

/* Text safe area: the copy is kept off the image edge and given a
   stronger left-weighted scrim so it stays legible over any photo. */
.rd-hero__body {
	padding: 26px 30px !important;
	max-width: 62%;
}

.rd-hero__scrim {
	background: linear-gradient(
		100deg,
		rgba(12, 20, 28, .88) 0%,
		rgba(12, 20, 28, .62) 42%,
		rgba(12, 20, 28, .18) 78%,
		rgba(12, 20, 28, .05) 100%
	) !important;
}

.rd-hero__title { font-size: 27px !important; line-height: 1.18; }
.rd-hero__text { font-size: 13.5px; opacity: .9; }

/* Dots sit clear of the copy. */
.rd-hero__dots { bottom: 14px; }

/* Tablet and mobile stack hero first, promos below. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-hero__body { max-width: 70%; padding: 22px 24px !important; }
	.rd-hero__title { font-size: 23px !important; }
}

@media (max-width: 767.98px) {
	.rd-hero__body { max-width: 100%; padding: 20px !important; }
	.rd-hero__title { font-size: 21px !important; }
}

/* ============================================================
   3. Storefront category labels
   ============================================================ */

/* The default category is filtered out of queries, but a product
   seeded before that filter existed can still render the term name.
   The rail and nav exclude it explicitly as well. */
.rd-cat-rail-section a[href*="uncategorized"],
.rd-catnav__list a[href*="uncategorized"] { display: none !important; }
/* WooCommerce emits the AED code with its own leading space, which
   renders as a double gap inside the visually-hidden price summary
   ("Original price was:  AED72.00"). Collapsing the inline space
   fixes the announced text without touching the currency filter. */
.rd-products .screen-reader-text { white-space: normal; }
.screen-reader-text { word-spacing: -0.25em; }

/* ============================================================
   Mobile header: [MENU] [LOGO] [CART]
   -------------------------------------------------------
   Blocksy renders logo in the start column and the menu trigger in
   the end column, so the mobile row came out [LOGO] [MENU] and
   carried no cart at all. Three items do not fit as two flex
   children, so the cart is taken out of flow and pinned right.
   ============================================================ */

@media (max-width: 767.98px) {
	/* Blocksy hides its own cart at this width because the bottom nav
	   has one. This override restores it; the bottom nav entry stays,
	   since that is the brief's specified mobile layout. */
	.ct-header [data-id="cart"] {
		display: flex !important;
		position: absolute;
		right: 52px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 6;
	}

	/* The end column holds the trigger; send it to the left of the row. */
	.ct-header [data-row="middle"] [data-column="end"] { order: -1; }

	/* The logo takes the space that is left and centres in it. */
	.ct-header [data-row="middle"] [data-column="start"] {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ct-header [data-column="start"] .rd-branding { display: flex; }
}

/* ============================================================
   Wishlist heart sits inside the image area
   -------------------------------------------------------
   WooCommerce fires woocommerce_before_shop_loop_item_title
   BEFORE the .product-image div, inside the card's link. The link
   is not a positioning context, so the absolutely positioned heart
   resolved against the page and landed below the image. The card
   itself is the intended frame.
   ============================================================ */

.rd-products ul.products li.product .product-image,
.rd-products ul.products li.product > a.woocommerce-loop-product__link {
	position: relative;
}

/* Neutralise any inherited link positioning so the card is the frame. */
.rd-products ul.products li.product > a.woocommerce-loop-product__link { position: static; }

.rd-card__wish {
	position: absolute !important;
	top: 8px;
	right: 8px;
	z-index: 5;
	margin: 0;
}

.rd-products ul.products li.product { position: relative; }

/* ============================================================
   Benefit bar: fade the right edge so a clipped message reads as
   scrollable rather than broken.
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-announcement {
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}
}

/* ============================================================
   Corrected heart placement and mobile cart
   -------------------------------------------------------
   Measured over CDP: the heart computed to position:static and
   landed 127px below the image top. WooCommerce's card rules
   set .button/.onsale positioning on the card, and the heart's
   wrapper was not part of any positioned ancestor, so the
   absolute offsets had no frame to resolve against.

   The card is the frame; the heart is pinned to it with a
   specificity high enough to beat the WooCommerce defaults.
   ============================================================ */

.rd-products ul.products li.product > .rd-card__wish,
.rd-products ul.products li.product .rd-card__wish {
	position: absolute !important;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 5;
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* The wrapper is a plain div, so block layout would put it on its
   own line between the image and the title. */
.rd-products ul.products li.product > .rd-card__wish {
	display: block;
	width: 32px;
	height: 32px;
}

/* The wishlist button inherits WooCommerce's .button sizing on the
   loop, which turns it into a wide pill. */
.rd-products .rd-card__wish .rd-wish {
	display: inline-flex !important;
	width: 32px !important;
	height: 32px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* ============================================================
   Mobile cart in the header row
   -------------------------------------------------------
   Rendered by the logo view, which reaches the mobile header row;
   the search view does not. Without this the mobile header had no
   cart at all, since Blocksy's own cart item is display:none here.
   ============================================================ */

.rd-branding {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.rd-action--mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 40px;
	min-height: 40px;
	padding: 0 6px;
	border-radius: 8px;
	color: var(--rd-deep);
}

.rd-action--mobile:hover { background: var(--rd-surface-light); }

/* Above 768 the logo view stops rendering it, and the desktop
   cluster in the search view takes over. This is a belt-and-braces
   guard so the two can never both be visible. */
@media (min-width: 768px) {
	.rd-action--mobile { display: none !important; }
}

/* ============================================================
   Equal card heights
   -------------------------------------------------------
   Measured 341px vs 361px across the first six cards. The cause
   is the category label: single-line and two-line labels produce
   different heights because the flex column distributes the slack.
   ============================================================ */

.rd-products ul.products li.product > .woocommerce-product-gallery__trigger {
	display: none !important;
}

.rd-products ul.products li.product .onsale + .rd-badge-new { left: 46px !important; }

.rd-products ul.products li.product .product_type,
.rd-products ul.products li.product .posted_in {
	min-height: 1.4em;
	line-height: 1.4;
}

/* ============================================================
   Heart: direct button, no wrapper
   -------------------------------------------------------
   The card loop hoists a bare button out of any wrapper, so the
   wrapper was arriving empty and the button lost the frame its
   absolute offsets needed. The button is now styled directly,
   positioned against the card, which is the intended frame.
   ============================================================ */

.rd-products ul.products li.product > .rd-wish,
.rd-products ul.products li.product .rd-wish {
	position: absolute !important;
	top: 8px;
	right: 8px;
	left: auto;
	bottom: auto;
	z-index: 5;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0;
	text-transform: none;
	letter-spacing: normal;
	line-height: 0;
	border-radius: 50% !important;
}

/* Clear the NEW badge, which shares the top-left corner. */
.rd-products ul.products li.product > .rd-badge-new { top: 8px !important; left: 8px !important; }
/* ============================================================
   LAYOUT CORRECTION PASS
   -------------------------------------------------------
   Measured at 1440 before this block, with getBoundingClientRect:

     header container      l:75   r:1365   w:1290
     category nav inner    l:15   r:1425   w:1410
     rail section          l:15   r:1425   w:1410
     promo grid            l:72   r:1368   w:1296
     hero (inside promo)   l:100  r:810
     products grid         l:100  r:1340   w:1240

   Five different widths, none sharing an edge. The header sat 60px
   inside the sections below it, which is exactly the disconnection
   the brief describes. Section 1 below puts every band on one
   --rd-container so the left and right edges line up.

   Rail gaps measured: nav->rail 60px, rail->hero 0px. Target is
   28-36px and 20-28px respectively.
   ============================================================ */

:root {
	--rd-container: 1440px;
	--rd-gutter: 24px;
	--rd-rail-gap-top: 32px;
	--rd-rail-gap-bottom: 24px;
}

/* ============================================================
   1 + 4. One container for every band
   ============================================================ */

/*
 * --rd-container is the OUTER bound and --rd-gutter the inset, so
 * the content edge is container - gutter on every band. Padding
 * lives on the band rather than margin, which means a band with a
 * background colour still spans the full container.
 */
.rd-catnav__inner,
.rd-section,
.rd-promo {
	max-width: var(--rd-container);
	margin-inline: auto;
	padding-inline: var(--rd-gutter);
}

/* The header is Blocksy's own markup, so its container is matched
   to the same box rather than restyled structurally. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container {
		max-width: var(--rd-container) !important;
		padding-inline: var(--rd-gutter) !important;
	}
}

/* Blocksy sets --ct-container-width on .ct-container; the child
   theme cannot restyle a parent variable at a distance, so the
   max-width is asserted directly. */
@media (min-width: 769px) {
	.ct-header .ct-container {
		width: calc(100% - (var(--rd-gutter) * 2));
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2)) !important;
	}
}

/* Tablet: 24px side padding, as specified. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root { --rd-gutter: 24px; --rd-container: 100%; }
}

/* Mobile: 16px side padding, as specified. */
@media (max-width: 767.98px) {
	:root { --rd-gutter: 16px; --rd-container: 100%; }
}

/* ============================================================
   4. Header content alignment
   ============================================================ */

/* The search field was capped at 512px and centred in a flex gap,
   which put it mid-row instead of filling the space between the
   wordmark and the actions. It now takes the flexible middle. */
.ct-header [data-column="end"] { gap: 20px; }
.ct-header .ct-header-search-rd { max-width: none; flex: 1 1 auto; }
.rd-header-actions { flex: 0 0 auto; }

/* ============================================================
   2. Category rail spacing
   ============================================================ */

/* Measured 60px between the nav and the rail, caused by the arrow
   controls sitting in their own absolutely-positioned row above the
   circles. */
.rd-cat-rail-section {
	padding-top: var(--rd-rail-gap-top);
	padding-bottom: var(--rd-rail-gap-bottom);
}

/* ============================================================
   2 + 3. Rail controls move INTO the track
   ============================================================ */

/*
 * The arrows are absolutely positioned against the section, above
 * the circles, which reserved a tall empty band. They are now static
 * children of the scroller's flex row, so they sit inline with the
 * circles and contribute no vertical space of their own.
 *
 * The rail is a scroll container, so the trailing arrow scrolls with
 * it; that is what keeps it aligned to the last circle.
 */
.rd-categories {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
	margin: 0;
}

.rd-cat-nav {
	position: static !important;
	display: flex !important;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
	top: auto;
	right: auto;
	z-index: 2;
}

.rd-cat-nav button {
	width: 32px;
	height: 32px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

/* Arrows are only useful when the row actually overflows. When
   everything fits, hiding them keeps the rail clean; the JS toggles
   the disabled state, and this is the "nothing to scroll" case. */
.rd-cat-nav.is-unnecessary { display: none !important; }

/* Mobile and tablet scroll by touch, where arrows are noise. */
@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* Dot separators: removed. The approved design spaces the items
   instead, and the markers were rendering as stray bullets. */
.rd-categories,
.rd-categories ul,
.rd-categories li { list-style: none; }

.rd-categories li::before,
.rd-categories li::after,
.rd-categories li > *::before { content: none !important; }

/* Consistent item box: the circle is fixed, the label clamps to two
   lines so items stay the same height. */
.rd-cat-item {
	flex: 0 0 auto;
	width: 104px;
	display: block;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

.rd-cat-circle {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	margin: 0 auto 8px;
}

.rd-cat-label {
	font-size: 12.5px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rd-deep);
}

/* ============================================================
   5. Badge row: SALE and NEW side by side, heart independent
   ============================================================ */

/*
 * Measured: .onsale at left:109 top:878 and .rd-badge-new at
 * left:109 top:878 — identical position, 177px wide, so the two
 * overlapped and the NEW badge rendered as a long green bar across
 * the image.
 *
 * Both badges are pulled into a flex row pinned to the top-left,
   and given a width that follows their own text.
 */
.rd-products ul.products li.product { position: relative; }

.rd-products ul.products li.product .onsale,
.rd-products ul.products li.product .rd-badge-new {
	position: absolute !important;
	top: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: none;
}

/* NEW sits to the right of SALE with a real gap. When a product is
   only NEW, :first-child pulls it back to the left edge so it never
   floats in the middle. */
.rd-products ul.products li.product .rd-badge-new { left: 50px !important; }
.rd-products ul.products li.product .rd-badge-new:first-child { left: 8px !important; }

/* The heart owns the top-right corner, clear of the badge row. */
.rd-products ul.products li.product > .rd-wish {
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
}

/* ============================================================
   6. Card alignment
   ============================================================ */

/*
 * Measured children of one card: image 146px, badge 18, title 36,
 * price 25, meta 20, actions 46 — but the card is a flex column, so
 * a product with a longer category label pushed the actions down
 * and the cards ended at 341px vs 361px.
 *
 * Every text region gets a fixed height and the actions are pushed
 * to the bottom, so the button lands on the same line across the
 * row regardless of content.
 */
.rd-products ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-products ul.products li.product .ct-media-container,
.rd-products ul.products li.product .product-image {
	flex: 0 0 auto;
	height: 146px;
	overflow: hidden;
}

.rd-products ul.products li.product .product-image img,
.rd-products ul.products li.product .ct-media-container img {
	height: 146px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rd-products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	font-size: 13px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 8px 10px 0;
}

.rd-products ul.products li.product .price {
	flex: 0 0 auto;
	height: 25px;
	margin: 0 !important;
	padding: 0 10px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.rd-products ul.products li.product .entry-meta,
.rd-products ul.products li.product .posted_in {
	flex: 0 0 auto;
	height: 20px;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* margin-top:auto pins the button to the card's bottom edge, so
   every button in the row shares one baseline. */
.rd-products ul.products li.product .ct-woo-card-actions,
.rd-products ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
}

.rd-products ul.products li.product .ct-woo-card-actions {
	flex: 0 0 auto;
	padding: 6px 10px 10px;
}

.rd-products ul.products li.product .add_to_cart_button,
.rd-products ul.products li.product .ct-woo-card-actions .button {
	width: 100% !important;
	min-height: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   7. Notification bar: rotating carousel on small screens
   ============================================================ */

/*
 * A swipeable strip still needs a scroll affordance and clips the
 * second message. One rotating message at a time removes both the
 * clipping and the height problem.
 *
 * The items are stacked and faded; only the active one is opaque.
 * Height is fixed so nothing shifts as the rotation runs.
 */
@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 38px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		position: relative;
		display: block;
		height: 38px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	.rd-announcebar-item {
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 420ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The separator dot has no meaning between messages that are
	   never shown at the same time. */
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }
}

@media (min-width: 1024px) {
	.rd-announcement { padding: 9px var(--rd-gutter); }
	.rd-announcebar-inner {
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2));
		margin-inline: auto;
		padding: 0;
	}
	.rd-announcebar-item { position: static; opacity: 1; }
}/* ============================================================
   LAYOUT CORRECTION PASS
   -------------------------------------------------------
   Measured at 1440 before this block, with getBoundingClientRect:

     header container      l:75   r:1365   w:1290
     category nav inner    l:15   r:1425   w:1410
     rail section          l:15   r:1425   w:1410
     promo grid            l:72   r:1368   w:1296
     hero (inside promo)   l:100  r:810
     products grid         l:100  r:1340   w:1240

   Five different widths, none sharing an edge. The header sat 60px
   inside the sections below it, which is exactly the disconnection
   the brief describes. Section 1 below puts every band on one
   --rd-container so the left and right edges line up.

   Rail gaps measured: nav->rail 60px, rail->hero 0px. Target is
   28-36px and 20-28px respectively.
   ============================================================ */

:root {
	--rd-container: 1440px;
	--rd-gutter: 24px;
	--rd-rail-gap-top: 32px;
	--rd-rail-gap-bottom: 24px;
}

/* ============================================================
   1 + 4. One container for every band
   ============================================================ */

/*
 * --rd-container is the OUTER bound and --rd-gutter the inset, so
 * the content edge is container - gutter on every band. Padding
 * lives on the band rather than margin, which means a band with a
 * background colour still spans the full container.
 */
.rd-catnav__inner,
.rd-section,
.rd-promo {
	max-width: var(--rd-container);
	margin-inline: auto;
	padding-inline: var(--rd-gutter);
}

/* The header is Blocksy's own markup, so its container is matched
   to the same box rather than restyled structurally. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container {
		max-width: var(--rd-container) !important;
		padding-inline: var(--rd-gutter) !important;
	}
}

/* Blocksy sets --ct-container-width on .ct-container; the child
   theme cannot restyle a parent variable at a distance, so the
   max-width is asserted directly. */
@media (min-width: 769px) {
	.ct-header .ct-container {
		width: calc(100% - (var(--rd-gutter) * 2));
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2)) !important;
	}
}

/* Tablet: 24px side padding, as specified. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root { --rd-gutter: 24px; --rd-container: 100%; }
}

/* Mobile: 16px side padding, as specified. */
@media (max-width: 767.98px) {
	:root { --rd-gutter: 16px; --rd-container: 100%; }
}

/* ============================================================
   4. Header content alignment
   ============================================================ */

/* The search field was capped at 512px and centred in a flex gap,
   which put it mid-row instead of filling the space between the
   wordmark and the actions. It now takes the flexible middle. */
.ct-header [data-column="end"] { gap: 20px; }
.ct-header .ct-header-search-rd { max-width: none; flex: 1 1 auto; }
.rd-header-actions { flex: 0 0 auto; }

/* ============================================================
   2. Category rail spacing
   ============================================================ */

/* Measured 60px between the nav and the rail, caused by the arrow
   controls sitting in their own absolutely-positioned row above the
   circles. */
.rd-cat-rail-section {
	padding-top: var(--rd-rail-gap-top);
	padding-bottom: var(--rd-rail-gap-bottom);
}

/* ============================================================
   2 + 3. Rail controls move INTO the track
   ============================================================ */

/*
 * The arrows are absolutely positioned against the section, above
 * the circles, which reserved a tall empty band. They are now static
 * children of the scroller's flex row, so they sit inline with the
 * circles and contribute no vertical space of their own.
 *
 * The rail is a scroll container, so the trailing arrow scrolls with
 * it; that is what keeps it aligned to the last circle.
 */
.rd-categories {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
	margin: 0;
}

.rd-cat-nav {
	position: static !important;
	display: flex !important;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
	top: auto;
	right: auto;
	z-index: 2;
}

.rd-cat-nav button {
	width: 32px;
	height: 32px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

/* Arrows are only useful when the row actually overflows. When
   everything fits, hiding them keeps the rail clean; the JS toggles
   the disabled state, and this is the "nothing to scroll" case. */
.rd-cat-nav.is-unnecessary { display: none !important; }

/* Mobile and tablet scroll by touch, where arrows are noise. */
@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* Dot separators: removed. The approved design spaces the items
   instead, and the markers were rendering as stray bullets. */
.rd-categories,
.rd-categories ul,
.rd-categories li { list-style: none; }

.rd-categories li::before,
.rd-categories li::after,
.rd-categories li > *::before { content: none !important; }

/* Consistent item box: the circle is fixed, the label clamps to two
   lines so items stay the same height. */
.rd-cat-item {
	flex: 0 0 auto;
	width: 104px;
	display: block;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

.rd-cat-circle {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	margin: 0 auto 8px;
}

.rd-cat-label {
	font-size: 12.5px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rd-deep);
}

/* ============================================================
   5. Badge row: SALE and NEW side by side, heart independent
   ============================================================ */

/*
 * Measured: .onsale at left:109 top:878 and .rd-badge-new at
 * left:109 top:878 — identical position, 177px wide, so the two
 * overlapped and the NEW badge rendered as a long green bar across
 * the image.
 *
 * Both badges are pulled into a flex row pinned to the top-left,
   and given a width that follows their own text.
 */
.rd-products ul.products li.product { position: relative; }

.rd-products ul.products li.product .onsale,
.rd-products ul.products li.product .rd-badge-new {
	position: absolute !important;
	top: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: none;
}

/* NEW sits to the right of SALE with a real gap. When a product is
   only NEW, :first-child pulls it back to the left edge so it never
   floats in the middle. */
.rd-products ul.products li.product .rd-badge-new { left: 50px !important; }
.rd-products ul.products li.product .rd-badge-new:first-child { left: 8px !important; }

/* The heart owns the top-right corner, clear of the badge row. */
.rd-products ul.products li.product > .rd-wish {
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
}

/* ============================================================
   6. Card alignment
   ============================================================ */

/*
 * Measured children of one card: image 146px, badge 18, title 36,
 * price 25, meta 20, actions 46 — but the card is a flex column, so
 * a product with a longer category label pushed the actions down
 * and the cards ended at 341px vs 361px.
 *
 * Every text region gets a fixed height and the actions are pushed
 * to the bottom, so the button lands on the same line across the
 * row regardless of content.
 */
.rd-products ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-products ul.products li.product .ct-media-container,
.rd-products ul.products li.product .product-image {
	flex: 0 0 auto;
	height: 146px;
	overflow: hidden;
}

.rd-products ul.products li.product .product-image img,
.rd-products ul.products li.product .ct-media-container img {
	height: 146px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rd-products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	font-size: 13px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 8px 10px 0;
}

.rd-products ul.products li.product .price {
	flex: 0 0 auto;
	height: 25px;
	margin: 0 !important;
	padding: 0 10px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.rd-products ul.products li.product .entry-meta,
.rd-products ul.products li.product .posted_in {
	flex: 0 0 auto;
	height: 20px;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* margin-top:auto pins the button to the card's bottom edge, so
   every button in the row shares one baseline. */
.rd-products ul.products li.product .ct-woo-card-actions,
.rd-products ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
}

.rd-products ul.products li.product .ct-woo-card-actions {
	flex: 0 0 auto;
	padding: 6px 10px 10px;
}

.rd-products ul.products li.product .add_to_cart_button,
.rd-products ul.products li.product .ct-woo-card-actions .button {
	width: 100% !important;
	min-height: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   7. Notification bar: rotating carousel on small screens
   ============================================================ */

/*
 * A swipeable strip still needs a scroll affordance and clips the
 * second message. One rotating message at a time removes both the
 * clipping and the height problem.
 *
 * The items are stacked and faded; only the active one is opaque.
 * Height is fixed so nothing shifts as the rotation runs.
 */
@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 38px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		position: relative;
		display: block;
		height: 38px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	.rd-announcebar-item {
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 420ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The separator dot has no meaning between messages that are
	   never shown at the same time. */
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }
}

@media (min-width: 1024px) {
	.rd-announcement { padding: 9px var(--rd-gutter); }
	.rd-announcebar-inner {
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2));
		margin-inline: auto;
		padding: 0;
	}
	.rd-announcebar-item { position: static; opacity: 1; }
}
/* ============================================================
   The wrapper Blocksy puts around the page body
   -------------------------------------------------------
   Measured: .rd-promo resolved to marginLeft=72px despite an
   explicit max-width:1440px and margin-inline:auto. The cause is
   the ancestor, not the band.

   The category rail is rendered OUTSIDE .entry-content (it is a
   separate shortcode band), while the hero and product sections
   are INSIDE it, where Blocksy applies .is-layout-constrained with
   its own narrow max-width. Two different containers therefore
   govern two halves of the same page, which is exactly the
   misalignment reported.

   The wrapper is neutralised and each band provides its own
   container, so all of them share one set of edges.
   ============================================================ */

.entry-content.is-layout-constrained {
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* Neutralised rather than removed: Blocksy applies the same class
   on other templates, and this rule only needs to win where the
   homepage bands need the full width. */
body.home .entry-content.is-layout-constrained {
	max-width: none !important;
}

/* Blocksy also renders a .hero-section wrapper above the content.
   The homepage's own hero is the campaign carousel, so this
   wrapper adds a duplicate "Home" heading and a band of dead
   space above it. It was already being hidden on the front page;
   this makes the rule specific and unconditional for the
   homepage rather than relying on an earlier selector list. */
body.home .hero-section[data-type="type-1"],
body.home.page .hero-section {
	display: none !important;
}

/* ============================================================
   Rail gaps, measured
   -------------------------------------------------------
   nav->rail measured 60px with the section at padding-top:32px,
   because the section's own box starts above its content and the
   preceding nav band contributes the remainder. Padding is
   reduced to hit the 28-36px target.
   ============================================================ */

.rd-cat-rail-section {
	padding-top: 24px;
	padding-bottom: 20px;
}

/* ============================================================
   Category nav band, same container as everything else
   ============================================================ */

.rd-catnav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
	padding-block: 0;
}

.rd-catnav__list { gap: 20px; }
/* ============================================================
   LAYOUT CORRECTION PASS
   -------------------------------------------------------
   Measured at 1440 before this block, with getBoundingClientRect:

     header container      l:75   r:1365   w:1290
     category nav inner    l:15   r:1425   w:1410
     rail section          l:15   r:1425   w:1410
     promo grid            l:72   r:1368   w:1296
     hero (inside promo)   l:100  r:810
     products grid         l:100  r:1340   w:1240

   Five different widths, none sharing an edge. The header sat 60px
   inside the sections below it, which is exactly the disconnection
   the brief describes. Section 1 below puts every band on one
   --rd-container so the left and right edges line up.

   Rail gaps measured: nav->rail 60px, rail->hero 0px. Target is
   28-36px and 20-28px respectively.
   ============================================================ */

:root {
	--rd-container: 1440px;
	--rd-gutter: 24px;
	--rd-rail-gap-top: 32px;
	--rd-rail-gap-bottom: 24px;
}

/* ============================================================
   1 + 4. One container for every band
   ============================================================ */

/*
 * --rd-container is the OUTER bound and --rd-gutter the inset, so
 * the content edge is container - gutter on every band. Padding
 * lives on the band rather than margin, which means a band with a
 * background colour still spans the full container.
 */
.rd-catnav__inner,
.rd-section,
.rd-promo {
	max-width: var(--rd-container);
	margin-inline: auto;
	padding-inline: var(--rd-gutter);
}

/* The header is Blocksy's own markup, so its container is matched
   to the same box rather than restyled structurally. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container {
		max-width: var(--rd-container) !important;
		padding-inline: var(--rd-gutter) !important;
	}
}

/* Blocksy sets --ct-container-width on .ct-container; the child
   theme cannot restyle a parent variable at a distance, so the
   max-width is asserted directly. */
@media (min-width: 769px) {
	.ct-header .ct-container {
		width: calc(100% - (var(--rd-gutter) * 2));
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2)) !important;
	}
}

/* Tablet: 24px side padding, as specified. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root { --rd-gutter: 24px; --rd-container: 100%; }
}

/* Mobile: 16px side padding, as specified. */
@media (max-width: 767.98px) {
	:root { --rd-gutter: 16px; --rd-container: 100%; }
}

/* ============================================================
   4. Header content alignment
   ============================================================ */

/* The search field was capped at 512px and centred in a flex gap,
   which put it mid-row instead of filling the space between the
   wordmark and the actions. It now takes the flexible middle. */
.ct-header [data-column="end"] { gap: 20px; }
.ct-header .ct-header-search-rd { max-width: none; flex: 1 1 auto; }
.rd-header-actions { flex: 0 0 auto; }

/* ============================================================
   2. Category rail spacing
   ============================================================ */

/* Measured 60px between the nav and the rail, caused by the arrow
   controls sitting in their own absolutely-positioned row above the
   circles. */
.rd-cat-rail-section {
	padding-top: var(--rd-rail-gap-top);
	padding-bottom: var(--rd-rail-gap-bottom);
}

/* ============================================================
   2 + 3. Rail controls move INTO the track
   ============================================================ */

/*
 * The arrows are absolutely positioned against the section, above
 * the circles, which reserved a tall empty band. They are now static
 * children of the scroller's flex row, so they sit inline with the
 * circles and contribute no vertical space of their own.
 *
 * The rail is a scroll container, so the trailing arrow scrolls with
 * it; that is what keeps it aligned to the last circle.
 */
.rd-categories {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
	margin: 0;
}

.rd-cat-nav {
	position: static !important;
	display: flex !important;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
	top: auto;
	right: auto;
	z-index: 2;
}

.rd-cat-nav button {
	width: 32px;
	height: 32px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

/* Arrows are only useful when the row actually overflows. When
   everything fits, hiding them keeps the rail clean; the JS toggles
   the disabled state, and this is the "nothing to scroll" case. */
.rd-cat-nav.is-unnecessary { display: none !important; }

/* Mobile and tablet scroll by touch, where arrows are noise. */
@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* Dot separators: removed. The approved design spaces the items
   instead, and the markers were rendering as stray bullets. */
.rd-categories,
.rd-categories ul,
.rd-categories li { list-style: none; }

.rd-categories li::before,
.rd-categories li::after,
.rd-categories li > *::before { content: none !important; }

/* Consistent item box: the circle is fixed, the label clamps to two
   lines so items stay the same height. */
.rd-cat-item {
	flex: 0 0 auto;
	width: 104px;
	display: block;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

.rd-cat-circle {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	margin: 0 auto 8px;
}

.rd-cat-label {
	font-size: 12.5px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rd-deep);
}

/* ============================================================
   5. Badge row: SALE and NEW side by side, heart independent
   ============================================================ */

/*
 * Measured: .onsale at left:109 top:878 and .rd-badge-new at
 * left:109 top:878 — identical position, 177px wide, so the two
 * overlapped and the NEW badge rendered as a long green bar across
 * the image.
 *
 * Both badges are pulled into a flex row pinned to the top-left,
   and given a width that follows their own text.
 */
.rd-products ul.products li.product { position: relative; }

.rd-products ul.products li.product .onsale,
.rd-products ul.products li.product .rd-badge-new {
	position: absolute !important;
	top: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: none;
}

/* NEW sits to the right of SALE with a real gap. When a product is
   only NEW, :first-child pulls it back to the left edge so it never
   floats in the middle. */
.rd-products ul.products li.product .rd-badge-new { left: 50px !important; }
.rd-products ul.products li.product .rd-badge-new:first-child { left: 8px !important; }

/* The heart owns the top-right corner, clear of the badge row. */
.rd-products ul.products li.product > .rd-wish {
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
}

/* ============================================================
   6. Card alignment
   ============================================================ */

/*
 * Measured children of one card: image 146px, badge 18, title 36,
 * price 25, meta 20, actions 46 — but the card is a flex column, so
 * a product with a longer category label pushed the actions down
 * and the cards ended at 341px vs 361px.
 *
 * Every text region gets a fixed height and the actions are pushed
 * to the bottom, so the button lands on the same line across the
 * row regardless of content.
 */
.rd-products ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-products ul.products li.product .ct-media-container,
.rd-products ul.products li.product .product-image {
	flex: 0 0 auto;
	height: 146px;
	overflow: hidden;
}

.rd-products ul.products li.product .product-image img,
.rd-products ul.products li.product .ct-media-container img {
	height: 146px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rd-products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	font-size: 13px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 8px 10px 0;
}

.rd-products ul.products li.product .price {
	flex: 0 0 auto;
	height: 25px;
	margin: 0 !important;
	padding: 0 10px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.rd-products ul.products li.product .entry-meta,
.rd-products ul.products li.product .posted_in {
	flex: 0 0 auto;
	height: 20px;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* margin-top:auto pins the button to the card's bottom edge, so
   every button in the row shares one baseline. */
.rd-products ul.products li.product .ct-woo-card-actions,
.rd-products ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
}

.rd-products ul.products li.product .ct-woo-card-actions {
	flex: 0 0 auto;
	padding: 6px 10px 10px;
}

.rd-products ul.products li.product .add_to_cart_button,
.rd-products ul.products li.product .ct-woo-card-actions .button {
	width: 100% !important;
	min-height: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   7. Notification bar: rotating carousel on small screens
   ============================================================ */

/*
 * A swipeable strip still needs a scroll affordance and clips the
 * second message. One rotating message at a time removes both the
 * clipping and the height problem.
 *
 * The items are stacked and faded; only the active one is opaque.
 * Height is fixed so nothing shifts as the rotation runs.
 */
@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 38px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		position: relative;
		display: block;
		height: 38px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	.rd-announcebar-item {
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 420ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The separator dot has no meaning between messages that are
	   never shown at the same time. */
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }
}

@media (min-width: 1024px) {
	.rd-announcement { padding: 9px var(--rd-gutter); }
	.rd-announcebar-inner {
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2));
		margin-inline: auto;
		padding: 0;
	}
	.rd-announcebar-item { position: static; opacity: 1; }
}
/* ============================================================
   The wrapper Blocksy puts around the page body
   -------------------------------------------------------
   Measured: .rd-promo resolved to marginLeft=72px despite an
   explicit max-width:1440px and margin-inline:auto. The cause is
   the ancestor, not the band.

   The category rail is rendered OUTSIDE .entry-content (it is a
   separate shortcode band), while the hero and product sections
   are INSIDE it, where Blocksy applies .is-layout-constrained with
   its own narrow max-width. Two different containers therefore
   govern two halves of the same page, which is exactly the
   misalignment reported.

   The wrapper is neutralised and each band provides its own
   container, so all of them share one set of edges.
   ============================================================ */

.entry-content.is-layout-constrained {
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* Neutralised rather than removed: Blocksy applies the same class
   on other templates, and this rule only needs to win where the
   homepage bands need the full width. */
body.home .entry-content.is-layout-constrained {
	max-width: none !important;
}

/* Blocksy also renders a .hero-section wrapper above the content.
   The homepage's own hero is the campaign carousel, so this
   wrapper adds a duplicate "Home" heading and a band of dead
   space above it. It was already being hidden on the front page;
   this makes the rule specific and unconditional for the
   homepage rather than relying on an earlier selector list. */
body.home .hero-section[data-type="type-1"],
body.home.page .hero-section {
	display: none !important;
}

/* ============================================================
   Rail gaps, measured
   -------------------------------------------------------
   nav->rail measured 60px with the section at padding-top:32px,
   because the section's own box starts above its content and the
   preceding nav band contributes the remainder. Padding is
   reduced to hit the 28-36px target.
   ============================================================ */

.rd-cat-rail-section {
	padding-top: 24px;
	padding-bottom: 20px;
}

/* ============================================================
   Category nav band, same container as everything else
   ============================================================ */

.rd-catnav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
	padding-block: 0;
}

.rd-catnav__list { gap: 20px; }

/* ============================================================
   Container width, asserted rather than negotiated
   -------------------------------------------------------
   Measured: .rd-promo computed width:1296px / left:72px while
   reporting max-width:1440px, margin-left:0px and
   padding-left:24px. Nothing in the child theme sets 1296; the
   value comes from a width or max-width in the parent theme that
   also applies to .rd-section, and it resolves after this
   theme's own rules.

   Rather than keep guessing which parent rule wins, the width is
   stated outright on the band. max-width alone cannot widen a box
   that something else has already narrowed, whereas width can.
   ============================================================ */

.rd-catnav__inner,
.rd-section,
.rd-promo {
	width: 100%;
	max-width: var(--rd-container) !important;
	margin-inline: auto !important;
	padding-inline: var(--rd-gutter);
}

/* The header container gets the same treatment, for the same
   reason: Blocksy sets its own width on .ct-container. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container,
	.ct-header .ct-container {
		width: 100% !important;
		max-width: var(--rd-container) !important;
		margin-inline: auto !important;
		padding-inline: var(--rd-gutter) !important;
		box-sizing: border-box;
	}
}
/* ============================================================
   LAYOUT CORRECTION PASS
   -------------------------------------------------------
   Measured at 1440 before this block, with getBoundingClientRect:

     header container      l:75   r:1365   w:1290
     category nav inner    l:15   r:1425   w:1410
     rail section          l:15   r:1425   w:1410
     promo grid            l:72   r:1368   w:1296
     hero (inside promo)   l:100  r:810
     products grid         l:100  r:1340   w:1240

   Five different widths, none sharing an edge. The header sat 60px
   inside the sections below it, which is exactly the disconnection
   the brief describes. Section 1 below puts every band on one
   --rd-container so the left and right edges line up.

   Rail gaps measured: nav->rail 60px, rail->hero 0px. Target is
   28-36px and 20-28px respectively.
   ============================================================ */

:root {
	--rd-container: 1440px;
	--rd-gutter: 24px;
	--rd-rail-gap-top: 32px;
	--rd-rail-gap-bottom: 24px;
}

/* ============================================================
   1 + 4. One container for every band
   ============================================================ */

/*
 * --rd-container is the OUTER bound and --rd-gutter the inset, so
 * the content edge is container - gutter on every band. Padding
 * lives on the band rather than margin, which means a band with a
 * background colour still spans the full container.
 */
.rd-catnav__inner,
.rd-section,
.rd-promo {
	max-width: var(--rd-container);
	margin-inline: auto;
	padding-inline: var(--rd-gutter);
}

/* The header is Blocksy's own markup, so its container is matched
   to the same box rather than restyled structurally. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container {
		max-width: var(--rd-container) !important;
		padding-inline: var(--rd-gutter) !important;
	}
}

/* Blocksy sets --ct-container-width on .ct-container; the child
   theme cannot restyle a parent variable at a distance, so the
   max-width is asserted directly. */
@media (min-width: 769px) {
	.ct-header .ct-container {
		width: calc(100% - (var(--rd-gutter) * 2));
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2)) !important;
	}
}

/* Tablet: 24px side padding, as specified. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root { --rd-gutter: 24px; --rd-container: 100%; }
}

/* Mobile: 16px side padding, as specified. */
@media (max-width: 767.98px) {
	:root { --rd-gutter: 16px; --rd-container: 100%; }
}

/* ============================================================
   4. Header content alignment
   ============================================================ */

/* The search field was capped at 512px and centred in a flex gap,
   which put it mid-row instead of filling the space between the
   wordmark and the actions. It now takes the flexible middle. */
.ct-header [data-column="end"] { gap: 20px; }
.ct-header .ct-header-search-rd { max-width: none; flex: 1 1 auto; }
.rd-header-actions { flex: 0 0 auto; }

/* ============================================================
   2. Category rail spacing
   ============================================================ */

/* Measured 60px between the nav and the rail, caused by the arrow
   controls sitting in their own absolutely-positioned row above the
   circles. */
.rd-cat-rail-section {
	padding-top: var(--rd-rail-gap-top);
	padding-bottom: var(--rd-rail-gap-bottom);
}

/* ============================================================
   2 + 3. Rail controls move INTO the track
   ============================================================ */

/*
 * The arrows are absolutely positioned against the section, above
 * the circles, which reserved a tall empty band. They are now static
 * children of the scroller's flex row, so they sit inline with the
 * circles and contribute no vertical space of their own.
 *
 * The rail is a scroll container, so the trailing arrow scrolls with
 * it; that is what keeps it aligned to the last circle.
 */
.rd-categories {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
	margin: 0;
}

.rd-cat-nav {
	position: static !important;
	display: flex !important;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
	top: auto;
	right: auto;
	z-index: 2;
}

.rd-cat-nav button {
	width: 32px;
	height: 32px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

/* Arrows are only useful when the row actually overflows. When
   everything fits, hiding them keeps the rail clean; the JS toggles
   the disabled state, and this is the "nothing to scroll" case. */
.rd-cat-nav.is-unnecessary { display: none !important; }

/* Mobile and tablet scroll by touch, where arrows are noise. */
@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* Dot separators: removed. The approved design spaces the items
   instead, and the markers were rendering as stray bullets. */
.rd-categories,
.rd-categories ul,
.rd-categories li { list-style: none; }

.rd-categories li::before,
.rd-categories li::after,
.rd-categories li > *::before { content: none !important; }

/* Consistent item box: the circle is fixed, the label clamps to two
   lines so items stay the same height. */
.rd-cat-item {
	flex: 0 0 auto;
	width: 104px;
	display: block;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

.rd-cat-circle {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	margin: 0 auto 8px;
}

.rd-cat-label {
	font-size: 12.5px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rd-deep);
}

/* ============================================================
   5. Badge row: SALE and NEW side by side, heart independent
   ============================================================ */

/*
 * Measured: .onsale at left:109 top:878 and .rd-badge-new at
 * left:109 top:878 — identical position, 177px wide, so the two
 * overlapped and the NEW badge rendered as a long green bar across
 * the image.
 *
 * Both badges are pulled into a flex row pinned to the top-left,
   and given a width that follows their own text.
 */
.rd-products ul.products li.product { position: relative; }

.rd-products ul.products li.product .onsale,
.rd-products ul.products li.product .rd-badge-new {
	position: absolute !important;
	top: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: none;
}

/* NEW sits to the right of SALE with a real gap. When a product is
   only NEW, :first-child pulls it back to the left edge so it never
   floats in the middle. */
.rd-products ul.products li.product .rd-badge-new { left: 50px !important; }
.rd-products ul.products li.product .rd-badge-new:first-child { left: 8px !important; }

/* The heart owns the top-right corner, clear of the badge row. */
.rd-products ul.products li.product > .rd-wish {
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
}

/* ============================================================
   6. Card alignment
   ============================================================ */

/*
 * Measured children of one card: image 146px, badge 18, title 36,
 * price 25, meta 20, actions 46 — but the card is a flex column, so
 * a product with a longer category label pushed the actions down
 * and the cards ended at 341px vs 361px.
 *
 * Every text region gets a fixed height and the actions are pushed
 * to the bottom, so the button lands on the same line across the
 * row regardless of content.
 */
.rd-products ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-products ul.products li.product .ct-media-container,
.rd-products ul.products li.product .product-image {
	flex: 0 0 auto;
	height: 146px;
	overflow: hidden;
}

.rd-products ul.products li.product .product-image img,
.rd-products ul.products li.product .ct-media-container img {
	height: 146px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rd-products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	font-size: 13px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 8px 10px 0;
}

.rd-products ul.products li.product .price {
	flex: 0 0 auto;
	height: 25px;
	margin: 0 !important;
	padding: 0 10px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.rd-products ul.products li.product .entry-meta,
.rd-products ul.products li.product .posted_in {
	flex: 0 0 auto;
	height: 20px;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* margin-top:auto pins the button to the card's bottom edge, so
   every button in the row shares one baseline. */
.rd-products ul.products li.product .ct-woo-card-actions,
.rd-products ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
}

.rd-products ul.products li.product .ct-woo-card-actions {
	flex: 0 0 auto;
	padding: 6px 10px 10px;
}

.rd-products ul.products li.product .add_to_cart_button,
.rd-products ul.products li.product .ct-woo-card-actions .button {
	width: 100% !important;
	min-height: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   7. Notification bar: rotating carousel on small screens
   ============================================================ */

/*
 * A swipeable strip still needs a scroll affordance and clips the
 * second message. One rotating message at a time removes both the
 * clipping and the height problem.
 *
 * The items are stacked and faded; only the active one is opaque.
 * Height is fixed so nothing shifts as the rotation runs.
 */
@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 38px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		position: relative;
		display: block;
		height: 38px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	.rd-announcebar-item {
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 420ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The separator dot has no meaning between messages that are
	   never shown at the same time. */
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }
}

@media (min-width: 1024px) {
	.rd-announcement { padding: 9px var(--rd-gutter); }
	.rd-announcebar-inner {
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2));
		margin-inline: auto;
		padding: 0;
	}
	.rd-announcebar-item { position: static; opacity: 1; }
}
/* ============================================================
   The wrapper Blocksy puts around the page body
   -------------------------------------------------------
   Measured: .rd-promo resolved to marginLeft=72px despite an
   explicit max-width:1440px and margin-inline:auto. The cause is
   the ancestor, not the band.

   The category rail is rendered OUTSIDE .entry-content (it is a
   separate shortcode band), while the hero and product sections
   are INSIDE it, where Blocksy applies .is-layout-constrained with
   its own narrow max-width. Two different containers therefore
   govern two halves of the same page, which is exactly the
   misalignment reported.

   The wrapper is neutralised and each band provides its own
   container, so all of them share one set of edges.
   ============================================================ */

.entry-content.is-layout-constrained {
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* Neutralised rather than removed: Blocksy applies the same class
   on other templates, and this rule only needs to win where the
   homepage bands need the full width. */
body.home .entry-content.is-layout-constrained {
	max-width: none !important;
}

/* Blocksy also renders a .hero-section wrapper above the content.
   The homepage's own hero is the campaign carousel, so this
   wrapper adds a duplicate "Home" heading and a band of dead
   space above it. It was already being hidden on the front page;
   this makes the rule specific and unconditional for the
   homepage rather than relying on an earlier selector list. */
body.home .hero-section[data-type="type-1"],
body.home.page .hero-section {
	display: none !important;
}

/* ============================================================
   Rail gaps, measured
   -------------------------------------------------------
   nav->rail measured 60px with the section at padding-top:32px,
   because the section's own box starts above its content and the
   preceding nav band contributes the remainder. Padding is
   reduced to hit the 28-36px target.
   ============================================================ */

.rd-cat-rail-section {
	padding-top: 24px;
	padding-bottom: 20px;
}

/* ============================================================
   Category nav band, same container as everything else
   ============================================================ */

.rd-catnav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
	padding-block: 0;
}

.rd-catnav__list { gap: 20px; }

/* ============================================================
   Container width, asserted rather than negotiated
   -------------------------------------------------------
   Measured: .rd-promo computed width:1296px / left:72px while
   reporting max-width:1440px, margin-left:0px and
   padding-left:24px. Nothing in the child theme sets 1296; the
   value comes from a width or max-width in the parent theme that
   also applies to .rd-section, and it resolves after this
   theme's own rules.

   Rather than keep guessing which parent rule wins, the width is
   stated outright on the band. max-width alone cannot widen a box
   that something else has already narrowed, whereas width can.
   ============================================================ */

.rd-catnav__inner,
.rd-section,
.rd-promo {
	width: 100%;
	max-width: var(--rd-container) !important;
	margin-inline: auto !important;
	padding-inline: var(--rd-gutter);
}

/* The header container gets the same treatment, for the same
   reason: Blocksy sets its own width on .ct-container. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container,
	.ct-header .ct-container {
		width: 100% !important;
		max-width: var(--rd-container) !important;
		margin-inline: auto !important;
		padding-inline: var(--rd-gutter) !important;
		box-sizing: border-box;
	}
}

/* ============================================================
   Nav -> rail gap: 60px -> 32px
   -------------------------------------------------------
   Measured: the nav band ends at y=210 and the rail section's
   box starts at y=270. The 60px is margin BETWEEN two sibling
   sections, so neither band's own padding can close it — the
   rail's padding-top is already 24px and the content begins at
   y=294.

   Collapsing the adjoining margins on these two specific bands
   is the correct fix: it removes only the space that separates
   them and leaves every other section rhythm untouched.
   ============================================================ */

.rd-catnav + .rd-cat-rail-section,
.rd-cat-rail-section + .rd-section,
.rd-section + .rd-section,
.rd-promo + .rd-section,
.rd-section + .rd-promo {
	margin-top: 0;
}

/* The gap itself, expressed once. */
.rd-catnav + .rd-cat-rail-section { margin-top: 0; }

.rd-cat-rail-section {
	padding-top: 32px;
	padding-bottom: 24px;
}

/* rail -> hero: measured 0px, target 20-28px. */
.rd-cat-rail-section + .rd-section,
.rd-cat-rail-section + .entry-content > .rd-promo,
.rd-cat-rail-section + .rd-promo {
	padding-top: 24px;
}

.rd-promo { margin-top: 0; }

/* ============================================================
   Header content must sit on the same 24px content edge as the
   bands below it. With the container now full width, the padding
   on the container is what places the logo and actions.
   ============================================================ */

@media (min-width: 769px) {
	.ct-header [data-column="start"],
	.ct-header [data-column="end"] { padding-inline: 0; }
}
/* ============================================================
   LAYOUT CORRECTION PASS
   -------------------------------------------------------
   Measured at 1440 before this block, with getBoundingClientRect:

     header container      l:75   r:1365   w:1290
     category nav inner    l:15   r:1425   w:1410
     rail section          l:15   r:1425   w:1410
     promo grid            l:72   r:1368   w:1296
     hero (inside promo)   l:100  r:810
     products grid         l:100  r:1340   w:1240

   Five different widths, none sharing an edge. The header sat 60px
   inside the sections below it, which is exactly the disconnection
   the brief describes. Section 1 below puts every band on one
   --rd-container so the left and right edges line up.

   Rail gaps measured: nav->rail 60px, rail->hero 0px. Target is
   28-36px and 20-28px respectively.
   ============================================================ */

:root {
	--rd-container: 1440px;
	--rd-gutter: 24px;
	--rd-rail-gap-top: 32px;
	--rd-rail-gap-bottom: 24px;
}

/* ============================================================
   1 + 4. One container for every band
   ============================================================ */

/*
 * --rd-container is the OUTER bound and --rd-gutter the inset, so
 * the content edge is container - gutter on every band. Padding
 * lives on the band rather than margin, which means a band with a
 * background colour still spans the full container.
 */
.rd-catnav__inner,
.rd-section,
.rd-promo {
	max-width: var(--rd-container);
	margin-inline: auto;
	padding-inline: var(--rd-gutter);
}

/* The header is Blocksy's own markup, so its container is matched
   to the same box rather than restyled structurally. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container {
		max-width: var(--rd-container) !important;
		padding-inline: var(--rd-gutter) !important;
	}
}

/* Blocksy sets --ct-container-width on .ct-container; the child
   theme cannot restyle a parent variable at a distance, so the
   max-width is asserted directly. */
@media (min-width: 769px) {
	.ct-header .ct-container {
		width: calc(100% - (var(--rd-gutter) * 2));
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2)) !important;
	}
}

/* Tablet: 24px side padding, as specified. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root { --rd-gutter: 24px; --rd-container: 100%; }
}

/* Mobile: 16px side padding, as specified. */
@media (max-width: 767.98px) {
	:root { --rd-gutter: 16px; --rd-container: 100%; }
}

/* ============================================================
   4. Header content alignment
   ============================================================ */

/* The search field was capped at 512px and centred in a flex gap,
   which put it mid-row instead of filling the space between the
   wordmark and the actions. It now takes the flexible middle. */
.ct-header [data-column="end"] { gap: 20px; }
.ct-header .ct-header-search-rd { max-width: none; flex: 1 1 auto; }
.rd-header-actions { flex: 0 0 auto; }

/* ============================================================
   2. Category rail spacing
   ============================================================ */

/* Measured 60px between the nav and the rail, caused by the arrow
   controls sitting in their own absolutely-positioned row above the
   circles. */
.rd-cat-rail-section {
	padding-top: var(--rd-rail-gap-top);
	padding-bottom: var(--rd-rail-gap-bottom);
}

/* ============================================================
   2 + 3. Rail controls move INTO the track
   ============================================================ */

/*
 * The arrows are absolutely positioned against the section, above
 * the circles, which reserved a tall empty band. They are now static
 * children of the scroller's flex row, so they sit inline with the
 * circles and contribute no vertical space of their own.
 *
 * The rail is a scroll container, so the trailing arrow scrolls with
 * it; that is what keeps it aligned to the last circle.
 */
.rd-categories {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
	margin: 0;
}

.rd-cat-nav {
	position: static !important;
	display: flex !important;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
	top: auto;
	right: auto;
	z-index: 2;
}

.rd-cat-nav button {
	width: 32px;
	height: 32px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

/* Arrows are only useful when the row actually overflows. When
   everything fits, hiding them keeps the rail clean; the JS toggles
   the disabled state, and this is the "nothing to scroll" case. */
.rd-cat-nav.is-unnecessary { display: none !important; }

/* Mobile and tablet scroll by touch, where arrows are noise. */
@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* Dot separators: removed. The approved design spaces the items
   instead, and the markers were rendering as stray bullets. */
.rd-categories,
.rd-categories ul,
.rd-categories li { list-style: none; }

.rd-categories li::before,
.rd-categories li::after,
.rd-categories li > *::before { content: none !important; }

/* Consistent item box: the circle is fixed, the label clamps to two
   lines so items stay the same height. */
.rd-cat-item {
	flex: 0 0 auto;
	width: 104px;
	display: block;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

.rd-cat-circle {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	margin: 0 auto 8px;
}

.rd-cat-label {
	font-size: 12.5px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rd-deep);
}

/* ============================================================
   5. Badge row: SALE and NEW side by side, heart independent
   ============================================================ */

/*
 * Measured: .onsale at left:109 top:878 and .rd-badge-new at
 * left:109 top:878 — identical position, 177px wide, so the two
 * overlapped and the NEW badge rendered as a long green bar across
 * the image.
 *
 * Both badges are pulled into a flex row pinned to the top-left,
   and given a width that follows their own text.
 */
.rd-products ul.products li.product { position: relative; }

.rd-products ul.products li.product .onsale,
.rd-products ul.products li.product .rd-badge-new {
	position: absolute !important;
	top: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: none;
}

/* NEW sits to the right of SALE with a real gap. When a product is
   only NEW, :first-child pulls it back to the left edge so it never
   floats in the middle. */
.rd-products ul.products li.product .rd-badge-new { left: 50px !important; }
.rd-products ul.products li.product .rd-badge-new:first-child { left: 8px !important; }

/* The heart owns the top-right corner, clear of the badge row. */
.rd-products ul.products li.product > .rd-wish {
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
}

/* ============================================================
   6. Card alignment
   ============================================================ */

/*
 * Measured children of one card: image 146px, badge 18, title 36,
 * price 25, meta 20, actions 46 — but the card is a flex column, so
 * a product with a longer category label pushed the actions down
 * and the cards ended at 341px vs 361px.
 *
 * Every text region gets a fixed height and the actions are pushed
 * to the bottom, so the button lands on the same line across the
 * row regardless of content.
 */
.rd-products ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-products ul.products li.product .ct-media-container,
.rd-products ul.products li.product .product-image {
	flex: 0 0 auto;
	height: 146px;
	overflow: hidden;
}

.rd-products ul.products li.product .product-image img,
.rd-products ul.products li.product .ct-media-container img {
	height: 146px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rd-products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	font-size: 13px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 8px 10px 0;
}

.rd-products ul.products li.product .price {
	flex: 0 0 auto;
	height: 25px;
	margin: 0 !important;
	padding: 0 10px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.rd-products ul.products li.product .entry-meta,
.rd-products ul.products li.product .posted_in {
	flex: 0 0 auto;
	height: 20px;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* margin-top:auto pins the button to the card's bottom edge, so
   every button in the row shares one baseline. */
.rd-products ul.products li.product .ct-woo-card-actions,
.rd-products ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
}

.rd-products ul.products li.product .ct-woo-card-actions {
	flex: 0 0 auto;
	padding: 6px 10px 10px;
}

.rd-products ul.products li.product .add_to_cart_button,
.rd-products ul.products li.product .ct-woo-card-actions .button {
	width: 100% !important;
	min-height: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   7. Notification bar: rotating carousel on small screens
   ============================================================ */

/*
 * A swipeable strip still needs a scroll affordance and clips the
 * second message. One rotating message at a time removes both the
 * clipping and the height problem.
 *
 * The items are stacked and faded; only the active one is opaque.
 * Height is fixed so nothing shifts as the rotation runs.
 */
@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 38px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		position: relative;
		display: block;
		height: 38px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	.rd-announcebar-item {
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 420ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The separator dot has no meaning between messages that are
	   never shown at the same time. */
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }
}

@media (min-width: 1024px) {
	.rd-announcement { padding: 9px var(--rd-gutter); }
	.rd-announcebar-inner {
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2));
		margin-inline: auto;
		padding: 0;
	}
	.rd-announcebar-item { position: static; opacity: 1; }
}
/* ============================================================
   The wrapper Blocksy puts around the page body
   -------------------------------------------------------
   Measured: .rd-promo resolved to marginLeft=72px despite an
   explicit max-width:1440px and margin-inline:auto. The cause is
   the ancestor, not the band.

   The category rail is rendered OUTSIDE .entry-content (it is a
   separate shortcode band), while the hero and product sections
   are INSIDE it, where Blocksy applies .is-layout-constrained with
   its own narrow max-width. Two different containers therefore
   govern two halves of the same page, which is exactly the
   misalignment reported.

   The wrapper is neutralised and each band provides its own
   container, so all of them share one set of edges.
   ============================================================ */

.entry-content.is-layout-constrained {
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* Neutralised rather than removed: Blocksy applies the same class
   on other templates, and this rule only needs to win where the
   homepage bands need the full width. */
body.home .entry-content.is-layout-constrained {
	max-width: none !important;
}

/* Blocksy also renders a .hero-section wrapper above the content.
   The homepage's own hero is the campaign carousel, so this
   wrapper adds a duplicate "Home" heading and a band of dead
   space above it. It was already being hidden on the front page;
   this makes the rule specific and unconditional for the
   homepage rather than relying on an earlier selector list. */
body.home .hero-section[data-type="type-1"],
body.home.page .hero-section {
	display: none !important;
}

/* ============================================================
   Rail gaps, measured
   -------------------------------------------------------
   nav->rail measured 60px with the section at padding-top:32px,
   because the section's own box starts above its content and the
   preceding nav band contributes the remainder. Padding is
   reduced to hit the 28-36px target.
   ============================================================ */

.rd-cat-rail-section {
	padding-top: 24px;
	padding-bottom: 20px;
}

/* ============================================================
   Category nav band, same container as everything else
   ============================================================ */

.rd-catnav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
	padding-block: 0;
}

.rd-catnav__list { gap: 20px; }

/* ============================================================
   Container width, asserted rather than negotiated
   -------------------------------------------------------
   Measured: .rd-promo computed width:1296px / left:72px while
   reporting max-width:1440px, margin-left:0px and
   padding-left:24px. Nothing in the child theme sets 1296; the
   value comes from a width or max-width in the parent theme that
   also applies to .rd-section, and it resolves after this
   theme's own rules.

   Rather than keep guessing which parent rule wins, the width is
   stated outright on the band. max-width alone cannot widen a box
   that something else has already narrowed, whereas width can.
   ============================================================ */

.rd-catnav__inner,
.rd-section,
.rd-promo {
	width: 100%;
	max-width: var(--rd-container) !important;
	margin-inline: auto !important;
	padding-inline: var(--rd-gutter);
}

/* The header container gets the same treatment, for the same
   reason: Blocksy sets its own width on .ct-container. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container,
	.ct-header .ct-container {
		width: 100% !important;
		max-width: var(--rd-container) !important;
		margin-inline: auto !important;
		padding-inline: var(--rd-gutter) !important;
		box-sizing: border-box;
	}
}

/* ============================================================
   Nav -> rail gap: 60px -> 32px
   -------------------------------------------------------
   Measured: the nav band ends at y=210 and the rail section's
   box starts at y=270. The 60px is margin BETWEEN two sibling
   sections, so neither band's own padding can close it — the
   rail's padding-top is already 24px and the content begins at
   y=294.

   Collapsing the adjoining margins on these two specific bands
   is the correct fix: it removes only the space that separates
   them and leaves every other section rhythm untouched.
   ============================================================ */

.rd-catnav + .rd-cat-rail-section,
.rd-cat-rail-section + .rd-section,
.rd-section + .rd-section,
.rd-promo + .rd-section,
.rd-section + .rd-promo {
	margin-top: 0;
}

/* The gap itself, expressed once. */
.rd-catnav + .rd-cat-rail-section { margin-top: 0; }

.rd-cat-rail-section {
	padding-top: 32px;
	padding-bottom: 24px;
}

/* rail -> hero: measured 0px, target 20-28px. */
.rd-cat-rail-section + .rd-section,
.rd-cat-rail-section + .entry-content > .rd-promo,
.rd-cat-rail-section + .rd-promo {
	padding-top: 24px;
}

.rd-promo { margin-top: 0; }

/* ============================================================
   Header content must sit on the same 24px content edge as the
   bands below it. With the container now full width, the padding
   on the container is what places the logo and actions.
   ============================================================ */

@media (min-width: 769px) {
	.ct-header [data-column="start"],
	.ct-header [data-column="end"] { padding-inline: 0; }
}

/* ============================================================
   Nav -> rail gap: 60px -> 32px
   -------------------------------------------------------
   The nav is rendered outside <main> (it hooks the header) and
   the rail is the first band inside Blocksy's .ct-container-full,
   which carries data-vertical-spacing="top:bottom" and supplies
   the 60px. The two are not siblings, so an adjacent-sibling rule
   cannot reach between them; the wrapper's spacing is what has to
   go, and the gap is re-established by the rail's own padding.

   Scope is deliberately narrow: this removes top spacing on the
   homepage content wrapper only, where the nav already provides
   the visual separation.
   ============================================================ */

body.home .ct-container-full[data-content="normal"] {
	margin-block-start: 0 !important;
}

/* Re-establish the intended gap on the first band instead. */
body.home .ct-container-full[data-content="normal"] > .rd-cat-rail-section {
	padding-top: 32px;
}

/* rail -> hero: the rail's bottom padding plus the wrapper's
   spacing produced 0px, which reads as a collision rather than a
   gap. Given explicitly below. */
.rd-cat-rail-section {
	padding-bottom: 24px;
	margin-bottom: 0 !important;
}

.rd-cat-rail-section + .rd-section,
.rd-cat-rail-section ~ .rd-promo,
.rd-cat-rail-section ~ .rd-section {
	margin-top: 0 !important;
	padding-top: 24px;
}
/* ============================================================
   LAYOUT CORRECTION PASS
   -------------------------------------------------------
   Measured at 1440 before this block, with getBoundingClientRect:

     header container      l:75   r:1365   w:1290
     category nav inner    l:15   r:1425   w:1410
     rail section          l:15   r:1425   w:1410
     promo grid            l:72   r:1368   w:1296
     hero (inside promo)   l:100  r:810
     products grid         l:100  r:1340   w:1240

   Five different widths, none sharing an edge. The header sat 60px
   inside the sections below it, which is exactly the disconnection
   the brief describes. Section 1 below puts every band on one
   --rd-container so the left and right edges line up.

   Rail gaps measured: nav->rail 60px, rail->hero 0px. Target is
   28-36px and 20-28px respectively.
   ============================================================ */

:root {
	--rd-container: 1440px;
	--rd-gutter: 24px;
	--rd-rail-gap-top: 32px;
	--rd-rail-gap-bottom: 24px;
}

/* ============================================================
   1 + 4. One container for every band
   ============================================================ */

/*
 * --rd-container is the OUTER bound and --rd-gutter the inset, so
 * the content edge is container - gutter on every band. Padding
 * lives on the band rather than margin, which means a band with a
 * background colour still spans the full container.
 */
.rd-catnav__inner,
.rd-section,
.rd-promo {
	max-width: var(--rd-container);
	margin-inline: auto;
	padding-inline: var(--rd-gutter);
}

/* The header is Blocksy's own markup, so its container is matched
   to the same box rather than restyled structurally. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container {
		max-width: var(--rd-container) !important;
		padding-inline: var(--rd-gutter) !important;
	}
}

/* Blocksy sets --ct-container-width on .ct-container; the child
   theme cannot restyle a parent variable at a distance, so the
   max-width is asserted directly. */
@media (min-width: 769px) {
	.ct-header .ct-container {
		width: calc(100% - (var(--rd-gutter) * 2));
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2)) !important;
	}
}

/* Tablet: 24px side padding, as specified. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	:root { --rd-gutter: 24px; --rd-container: 100%; }
}

/* Mobile: 16px side padding, as specified. */
@media (max-width: 767.98px) {
	:root { --rd-gutter: 16px; --rd-container: 100%; }
}

/* ============================================================
   4. Header content alignment
   ============================================================ */

/* The search field was capped at 512px and centred in a flex gap,
   which put it mid-row instead of filling the space between the
   wordmark and the actions. It now takes the flexible middle. */
.ct-header [data-column="end"] { gap: 20px; }
.ct-header .ct-header-search-rd { max-width: none; flex: 1 1 auto; }
.rd-header-actions { flex: 0 0 auto; }

/* ============================================================
   2. Category rail spacing
   ============================================================ */

/* Measured 60px between the nav and the rail, caused by the arrow
   controls sitting in their own absolutely-positioned row above the
   circles. */
.rd-cat-rail-section {
	padding-top: var(--rd-rail-gap-top);
	padding-bottom: var(--rd-rail-gap-bottom);
}

/* ============================================================
   2 + 3. Rail controls move INTO the track
   ============================================================ */

/*
 * The arrows are absolutely positioned against the section, above
 * the circles, which reserved a tall empty band. They are now static
 * children of the scroller's flex row, so they sit inline with the
 * circles and contribute no vertical space of their own.
 *
 * The rail is a scroll container, so the trailing arrow scrolls with
 * it; that is what keeps it aligned to the last circle.
 */
.rd-categories {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
	margin: 0;
}

.rd-cat-nav {
	position: static !important;
	display: flex !important;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
	top: auto;
	right: auto;
	z-index: 2;
}

.rd-cat-nav button {
	width: 32px;
	height: 32px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: var(--rd-card);
	color: var(--rd-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--rd-transition), color var(--rd-transition), opacity var(--rd-transition);
}

/* Arrows are only useful when the row actually overflows. When
   everything fits, hiding them keeps the rail clean; the JS toggles
   the disabled state, and this is the "nothing to scroll" case. */
.rd-cat-nav.is-unnecessary { display: none !important; }

/* Mobile and tablet scroll by touch, where arrows are noise. */
@media (max-width: 1199.98px) {
	.rd-cat-nav { display: none !important; }
}

/* Dot separators: removed. The approved design spaces the items
   instead, and the markers were rendering as stray bullets. */
.rd-categories,
.rd-categories ul,
.rd-categories li { list-style: none; }

.rd-categories li::before,
.rd-categories li::after,
.rd-categories li > *::before { content: none !important; }

/* Consistent item box: the circle is fixed, the label clamps to two
   lines so items stay the same height. */
.rd-cat-item {
	flex: 0 0 auto;
	width: 104px;
	display: block;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}

.rd-cat-circle {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	margin: 0 auto 8px;
}

.rd-cat-label {
	font-size: 12.5px;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--rd-deep);
}

/* ============================================================
   5. Badge row: SALE and NEW side by side, heart independent
   ============================================================ */

/*
 * Measured: .onsale at left:109 top:878 and .rd-badge-new at
 * left:109 top:878 — identical position, 177px wide, so the two
 * overlapped and the NEW badge rendered as a long green bar across
 * the image.
 *
 * Both badges are pulled into a flex row pinned to the top-left,
   and given a width that follows their own text.
 */
.rd-products ul.products li.product { position: relative; }

.rd-products ul.products li.product .onsale,
.rd-products ul.products li.product .rd-badge-new {
	position: absolute !important;
	top: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 4px;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: none;
}

/* NEW sits to the right of SALE with a real gap. When a product is
   only NEW, :first-child pulls it back to the left edge so it never
   floats in the middle. */
.rd-products ul.products li.product .rd-badge-new { left: 50px !important; }
.rd-products ul.products li.product .rd-badge-new:first-child { left: 8px !important; }

/* The heart owns the top-right corner, clear of the badge row. */
.rd-products ul.products li.product > .rd-wish {
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
}

/* ============================================================
   6. Card alignment
   ============================================================ */

/*
 * Measured children of one card: image 146px, badge 18, title 36,
 * price 25, meta 20, actions 46 — but the card is a flex column, so
 * a product with a longer category label pushed the actions down
 * and the cards ended at 341px vs 361px.
 *
 * Every text region gets a fixed height and the actions are pushed
 * to the bottom, so the button lands on the same line across the
 * row regardless of content.
 */
.rd-products ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-products ul.products li.product .ct-media-container,
.rd-products ul.products li.product .product-image {
	flex: 0 0 auto;
	height: 146px;
	overflow: hidden;
}

.rd-products ul.products li.product .product-image img,
.rd-products ul.products li.product .ct-media-container img {
	height: 146px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rd-products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	font-size: 13px !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 8px 10px 0;
}

.rd-products ul.products li.product .price {
	flex: 0 0 auto;
	height: 25px;
	margin: 0 !important;
	padding: 0 10px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.rd-products ul.products li.product .entry-meta,
.rd-products ul.products li.product .posted_in {
	flex: 0 0 auto;
	height: 20px;
	min-height: 20px;
	margin: 0 !important;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* margin-top:auto pins the button to the card's bottom edge, so
   every button in the row shares one baseline. */
.rd-products ul.products li.product .ct-woo-card-actions,
.rd-products ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
}

.rd-products ul.products li.product .ct-woo-card-actions {
	flex: 0 0 auto;
	padding: 6px 10px 10px;
}

.rd-products ul.products li.product .add_to_cart_button,
.rd-products ul.products li.product .ct-woo-card-actions .button {
	width: 100% !important;
	min-height: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 34px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   7. Notification bar: rotating carousel on small screens
   ============================================================ */

/*
 * A swipeable strip still needs a scroll affordance and clips the
 * second message. One rotating message at a time removes both the
 * clipping and the height problem.
 *
 * The items are stacked and faded; only the active one is opaque.
 * Height is fixed so nothing shifts as the rotation runs.
 */
@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 38px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		position: relative;
		display: block;
		height: 38px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	.rd-announcebar-item {
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 420ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The separator dot has no meaning between messages that are
	   never shown at the same time. */
	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }
}

@media (min-width: 1024px) {
	.rd-announcement { padding: 9px var(--rd-gutter); }
	.rd-announcebar-inner {
		max-width: calc(var(--rd-container) - (var(--rd-gutter) * 2));
		margin-inline: auto;
		padding: 0;
	}
	.rd-announcebar-item { position: static; opacity: 1; }
}
/* ============================================================
   The wrapper Blocksy puts around the page body
   -------------------------------------------------------
   Measured: .rd-promo resolved to marginLeft=72px despite an
   explicit max-width:1440px and margin-inline:auto. The cause is
   the ancestor, not the band.

   The category rail is rendered OUTSIDE .entry-content (it is a
   separate shortcode band), while the hero and product sections
   are INSIDE it, where Blocksy applies .is-layout-constrained with
   its own narrow max-width. Two different containers therefore
   govern two halves of the same page, which is exactly the
   misalignment reported.

   The wrapper is neutralised and each band provides its own
   container, so all of them share one set of edges.
   ============================================================ */

.entry-content.is-layout-constrained {
	max-width: none !important;
	width: auto !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* Neutralised rather than removed: Blocksy applies the same class
   on other templates, and this rule only needs to win where the
   homepage bands need the full width. */
body.home .entry-content.is-layout-constrained {
	max-width: none !important;
}

/* Blocksy also renders a .hero-section wrapper above the content.
   The homepage's own hero is the campaign carousel, so this
   wrapper adds a duplicate "Home" heading and a band of dead
   space above it. It was already being hidden on the front page;
   this makes the rule specific and unconditional for the
   homepage rather than relying on an earlier selector list. */
body.home .hero-section[data-type="type-1"],
body.home.page .hero-section {
	display: none !important;
}

/* ============================================================
   Rail gaps, measured
   -------------------------------------------------------
   nav->rail measured 60px with the section at padding-top:32px,
   because the section's own box starts above its content and the
   preceding nav band contributes the remainder. Padding is
   reduced to hit the 28-36px target.
   ============================================================ */

.rd-cat-rail-section {
	padding-top: 24px;
	padding-bottom: 20px;
}

/* ============================================================
   Category nav band, same container as everything else
   ============================================================ */

.rd-catnav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
	padding-block: 0;
}

.rd-catnav__list { gap: 20px; }

/* ============================================================
   Container width, asserted rather than negotiated
   -------------------------------------------------------
   Measured: .rd-promo computed width:1296px / left:72px while
   reporting max-width:1440px, margin-left:0px and
   padding-left:24px. Nothing in the child theme sets 1296; the
   value comes from a width or max-width in the parent theme that
   also applies to .rd-section, and it resolves after this
   theme's own rules.

   Rather than keep guessing which parent rule wins, the width is
   stated outright on the band. max-width alone cannot widen a box
   that something else has already narrowed, whereas width can.
   ============================================================ */

.rd-catnav__inner,
.rd-section,
.rd-promo {
	width: 100%;
	max-width: var(--rd-container) !important;
	margin-inline: auto !important;
	padding-inline: var(--rd-gutter);
}

/* The header container gets the same treatment, for the same
   reason: Blocksy sets its own width on .ct-container. */
@media (min-width: 769px) {
	.ct-header [data-device="desktop"] .ct-container,
	.ct-header .ct-container {
		width: 100% !important;
		max-width: var(--rd-container) !important;
		margin-inline: auto !important;
		padding-inline: var(--rd-gutter) !important;
		box-sizing: border-box;
	}
}

/* ============================================================
   Nav -> rail gap: 60px -> 32px
   -------------------------------------------------------
   Measured: the nav band ends at y=210 and the rail section's
   box starts at y=270. The 60px is margin BETWEEN two sibling
   sections, so neither band's own padding can close it — the
   rail's padding-top is already 24px and the content begins at
   y=294.

   Collapsing the adjoining margins on these two specific bands
   is the correct fix: it removes only the space that separates
   them and leaves every other section rhythm untouched.
   ============================================================ */

.rd-catnav + .rd-cat-rail-section,
.rd-cat-rail-section + .rd-section,
.rd-section + .rd-section,
.rd-promo + .rd-section,
.rd-section + .rd-promo {
	margin-top: 0;
}

/* The gap itself, expressed once. */
.rd-catnav + .rd-cat-rail-section { margin-top: 0; }

.rd-cat-rail-section {
	padding-top: 32px;
	padding-bottom: 24px;
}

/* rail -> hero: measured 0px, target 20-28px. */
.rd-cat-rail-section + .rd-section,
.rd-cat-rail-section + .entry-content > .rd-promo,
.rd-cat-rail-section + .rd-promo {
	padding-top: 24px;
}

.rd-promo { margin-top: 0; }

/* ============================================================
   Header content must sit on the same 24px content edge as the
   bands below it. With the container now full width, the padding
   on the container is what places the logo and actions.
   ============================================================ */

@media (min-width: 769px) {
	.ct-header [data-column="start"],
	.ct-header [data-column="end"] { padding-inline: 0; }
}

/* ============================================================
   Nav -> rail gap: 60px -> 32px
   -------------------------------------------------------
   The nav is rendered outside <main> (it hooks the header) and
   the rail is the first band inside Blocksy's .ct-container-full,
   which carries data-vertical-spacing="top:bottom" and supplies
   the 60px. The two are not siblings, so an adjacent-sibling rule
   cannot reach between them; the wrapper's spacing is what has to
   go, and the gap is re-established by the rail's own padding.

   Scope is deliberately narrow: this removes top spacing on the
   homepage content wrapper only, where the nav already provides
   the visual separation.
   ============================================================ */

body.home .ct-container-full[data-content="normal"] {
	margin-block-start: 0 !important;
}

/* Re-establish the intended gap on the first band instead. */
body.home .ct-container-full[data-content="normal"] > .rd-cat-rail-section {
	padding-top: 32px;
}

/* rail -> hero: the rail's bottom padding plus the wrapper's
   spacing produced 0px, which reads as a collision rather than a
   gap. Given explicitly below. */
.rd-cat-rail-section {
	padding-bottom: 24px;
	margin-bottom: 0 !important;
}

.rd-cat-rail-section + .rd-section,
.rd-cat-rail-section ~ .rd-promo,
.rd-cat-rail-section ~ .rd-section {
	margin-top: 0 !important;
	padding-top: 24px;
}

/* ============================================================
   The actual 60px
   -------------------------------------------------------
   Measured ancestor chain, after everything else was applied:

     section.rd-cat-rail-section   mt=0  pt=32
     div.ct-container-full          mt=0  pt=60   <- the gap
     main.site-main                 mt=0  pt=0

   The wrapper carries data-vertical-spacing="top:bottom" and
   resolves to padding-top:60px. The earlier override targeted
   [data-content="normal"], which this wrapper does not have, so
   it never applied. Both the attribute and the plain class are
   targeted now.
   ============================================================ */

body.home .ct-container-full {
	padding-top: 0 !important;
}

/* The 32px is then the rail's own padding, giving nav -> rail
   content = 32px, inside the 28-36px target. */
.rd-cat-rail-section { padding-top: 32px; }

/* rail -> hero: rail track bottom 426, hero top 450 = 24px, inside
   the 20-28px target. Held here rather than left to chance. */
.rd-cat-rail-section { padding-bottom: 24px; }

/* ============================================================
   Notification bar: fade only, no movement
   -------------------------------------------------------
   The previous rule stacked the messages with position:absolute
   and swapped which one was on top. That made the text appear to
   slide vertically, because the visible item was changing.

   Every item now occupies the same grid cell. Only opacity
   changes, so the text never moves and the bar height is fixed.
   ============================================================ */

@media (max-width: 1023.98px) {
	.rd-announcement {
		height: 36px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rd-announcebar-inner {
		display: grid;
		grid-template-areas: 'stack';
		height: 36px;
		padding: 0 var(--rd-gutter);
		overflow: hidden;
	}

	/* All four messages share one cell. No absolute positioning, no
	   transform, no height change between messages. */
	.rd-announcebar-item {
		grid-area: stack;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		min-width: 0;
		opacity: 0;
		transition: opacity 320ms ease;
		pointer-events: none;
	}

	.rd-announcebar-item.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* The icon and text must not reflow as each message has a
	   different length; the row is centred and clipped. */
	.rd-announcebar-item span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rd-announcebar-item + .rd-announcebar-item::before { display: none; }

	.rd-announcebar-item svg { flex: 0 0 auto; }
}

@media (min-width: 1024px) {
	.rd-announcebar-inner { display: flex; }
	.rd-announcebar-item { position: static; opacity: 1; }
}

/* ============================================================
   MOBILE HEADER CORRECTION  (<= 767px only)

   Target:  [ MENU ]   [ RD SOUQ ]   [ SEARCH ] [ CART ]
   Height:  56-60px, logo centred on the VIEWPORT.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row geometry ------------------------------------- */

	/*
	 * The logo must be centred on the viewport. space-between cannot
	 * do it here: the left zone holds one control and the right holds
	 * two, so the logo lands half a control to the right of centre.
	 *
	 * Three equal side zones with the logo in the middle makes the
	 * middle zone symmetric, which centres the logo exactly.
	 */
	.ct-header [data-row="middle"] {
		min-height: 58px;
		padding-block: 0;
	}

	.ct-header [data-row="middle"] .ct-container {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0;
		min-height: 58px;
	}

	.ct-header [data-column="start"] {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: flex;
		align-items: center;
		gap: 0;
	}

	.ct-header [data-column="end"] {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: 2px;
	}

	/* The branding span occupies the middle column as a unit, so the
	   logo sits at the centre of the row rather than of the leftover
	   space between the two side zones. */
	.ct-header [data-column="start"] .rd-branding {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Blocksy puts the branding inside data-column="start", so it is
	   pulled into the middle column and the trigger needs its own
	   element. The start column keeps only the menu trigger. */
	.ct-header [data-column="start"] > .data-items {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: flex;
		align-items: center;
	}

	/* --- Logo -------------------------------------------- */

	.rd-branding { display: flex; align-items: center; }

	.rd-brand-logo { display: flex; align-items: center; }

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark {
		width: 34px;
		height: 34px;
		border-radius: 8px;
	}

	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is dropped on mobile: it is the main reason the row
	   grew, and the wordmark carries the identity alone. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Side icons --------------------------------------- */

	.rd-brand-zone--start { display: none; }

	.rd-brand-zone--end {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 4px;
		right: 3px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		font-size: 10px;
	}

	/* The menu trigger: icon only, no text, matching 44px. */
	.ct-header [data-id="trigger"] {
		width: 44px;
		height: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	.ct-header [data-id="trigger"] .ct-label { display: none; }
	.ct-header [data-id="trigger"] svg { width: 22px; height: 20px; }

	/* Superseded by the zone above; the old floating cart is gone. */
	.rd-action--mobile { display: none !important; }

	/* The search item is not in the mobile header row, and the
	   icon now provides access. */
	.ct-header .ct-header-search-rd { display: none !important; }

	/* --- Spacing below the header ------------------------- */

	/* header bottom -> category rail: 18px */
	body.home .ct-container-full > .rd-cat-rail-section {
		padding-top: 18px;
	}

	/* Blocksy's wrapper contributes 60px of its own top padding. */
	body.home .ct-container-full {
		padding-top: 0 !important;
	}

	/* category rail -> hero: 22px */
	.rd-cat-rail-section {
		padding-bottom: 22px;
	}

	.rd-cat-rail-section + .rd-section,
	.rd-cat-rail-section ~ .rd-section,
	.rd-cat-rail-section ~ .rd-promo {
		margin-top: 0 !important;
		padding-top: 22px;
	}
}

/* ============================================================
   MOBILE HEADER CORRECTION — corrective pass 2  (<= 767px)

   What the first attempt got wrong, measured not assumed:

   - Blocksy writes `height: <n>px` on the row element itself, so the
     row is 70px tall regardless of what min-height says. The only
     way to shrink it is to override the height property, not the
     minimum.
   - The row's container is already a grid, but Blocksy computes its
     own three-column template from the element widths
     (257px 15.8px 69.8px). Declaring `grid-template-columns` on the
     container is not enough because the template is emitted later
     and more specifically. The columns are therefore placed by
     explicit `grid-column` on the children instead.
   - Blocksy puts the LOGO in data-column="start" and the MENU
     TRIGGER in data-column="end" — the reverse of the brief. The
     children are re-placed rather than the markup being rewritten,
     so the parent theme's structure and accessibility are intact.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row height ------------------------------------- */

	/*
	 * Blocksy sets an inline custom property that the row reads as
	 * its height. Overriding the property on the mobile row drives
	 * the rendered height down without touching the desktop value.
	 */
	.ct-header [data-row="middle"] {
		min-height: 58px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		min-height: 58px !important;
		align-items: center;
	}

	/* --- Three zones ------------------------------------ */

	/*
	 * Three tracks: a fixed left zone, an auto centre for the
	 * wordmark, and a fixed right zone the same width as the left.
	 * Equal outer tracks are what put the logo on the viewport
	 * centre. `space-between` cannot: the left zone holds one
	 * control and the right holds two, so the logo lands half a
	 * control right of true centre.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: grid !important;
		grid-template-columns: 44px auto 44px !important;
		justify-content: space-between;
		align-items: center;
		gap: 0;
	}

	/* Hamburger, far left. It is a child of the end column. */
	.ct-header [data-row="middle"] .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		width: 44px;
		height: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* Search + cart, far right. */
	.ct-header [data-row="middle"] [data-column="end"] {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: 0;
	}

	/* Logo, dead centre of the row. */
	.ct-header [data-row="middle"] [data-column="start"] {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
	}

	/*
	 * The start column also wraps the trigger in Blocksy's markup.
	 * The wrapper must not steal a track of its own, so it is
	 * collapsed to zero width and its child is placed by the rules
	 * above.
	 */
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* --- Logo ------------------------------------------- */

	.rd-branding { display: flex; align-items: center; }
	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Side icons -------------------------------------- */

	/* The start zone span is not used; the trigger is the left zone. */
	.rd-brand-zone--start { display: none; }

	.rd-brand-zone--end {
		display: flex;
		align-items: center;
		gap: 0;
	}

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Icon only, no label. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label,
	.ct-header [data-row="middle"] .ct-toggle svg + span { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* The old floating cart and the desktop search item are gone
	   from this row; the zone above replaces both. */
	.rd-action--mobile { display: none !important; }
	.ct-header .ct-header-search-rd { display: none !important; }
	.ct-header [data-row="middle"] .header-menu-1 { display: none; }

	/* --- Spacing below the header ------------------------ */

	/* Blocksy adds 60px of its own padding to the wrapper. */
	body.home .ct-container-full { padding-top: 0 !important; }

	/* header bottom -> category rail: 18px */
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }

	/* category rail -> hero: 22px */
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER CORRECTION — corrective pass 3  (<= 767px)

   Pass 2 placed `grid-column` on the menu trigger, but that had no
   effect: the trigger is a grandchild, nested inside Blocksy's
   [data-column="end"] wrapper, and grid placement only applies to
   direct children of the grid container.

   `display: contents` on both column wrappers dissolves them, so the
   row's direct children become the five real items:

       hamburger | logo | search | cart

   and each can be placed explicitly. The wrappers stay in the markup
   — they are untouched for accessibility and for the desktop row,
   which is not in this media query.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row height: 58px -------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 58px !important;
		height: 58px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		min-height: 58px !important;
		height: 58px !important;
		align-items: center;
	}

	/* --- Dissolve Blocksy's column wrappers --------------- */

	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"] {
		display: contents;
	}

	/* The wrapper divs inside them are now the grid's children. */
	.ct-header [data-row="middle"] .ct-container > div {
		display: contents;
	}

	/* --- The three-zone grid ------------------------------ */

	/*
	 * Fixed outer tracks with an auto centre. Because both outer
	 * tracks are the same width, the middle track is centred on the
	 * row, which centres the wordmark on the viewport. This is the
	 * whole point: `space-between` with one control left and two
	 * right puts the logo half a control right of true centre.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: grid !important;
		grid-template-columns: 44px 1fr 88px !important;
		align-items: center;
		gap: 0;
		padding-inline: 16px;
	}

	/* LEFT: hamburger */
	.ct-header [data-row="middle"] .ct-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		width: 44px;
		height: 44px;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* CENTRE: logo */
	.ct-header [data-row="middle"] .rd-branding {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* RIGHT: search + cart */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		display: flex;
		align-items: center;
		gap: 0;
	}

	/* --- Logo -------------------------------------------- */

	.rd-branding { display: flex; align-items: center; }
	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Icons ------------------------------------------- */

	.rd-brand-zone--start { display: none; }

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Hamburger: icon only, no text beside it. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* Superseded by the zone above. */
	.rd-action--mobile { display: none !important; }
	.ct-header .ct-header-search-rd { display: none !important; }
	.ct-header [data-row="middle"] .header-menu-1 { display: none; }

	/* --- Spacing below the header ------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER CORRECTION — corrective pass 4  (<= 767px)

   Pass 3 measured wrong. Two distinct causes, both found by
   measuring the real DOM instead of assuming it:

   1. `display: contents` on [data-column="start"/"end"] dissolves
      those wrappers, but Blocksy nests ANOTHER plain <div> inside
      each. That inner div does not inherit `display: contents`,
      so it became the grid's real child and my `grid-column`
      declarations — which targeted the dissolved wrappers —
      applied to nothing. The inner divs are what must be placed.

   2. The inner divs still computed `grid-column: 2` and
      `grid-column: 3` from the pass-2 rules, which pushed the
      wrong items into the wrong tracks.

   So: dissolve all three levels, then place the four real items —
   hamburger, logo, search, cart — by class.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row height: 58px -------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 58px !important;
		height: 58px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		min-height: 58px !important;
		height: 58px !important;
		align-items: center;
	}

	/* --- Dissolve every wrapper between grid and item ------ */

	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	/* --- Three-zone grid ---------------------------------- */

	/*
	 * 44px | 1fr | 88px. Both outer tracks are fixed and unequal
	 * by design: the right zone is wider because it holds two
	 * controls. The LOGO is centred on the middle TRACK, and the
	 * middle track is not centred on the row — so the wordmark
	 * would sit left of true centre by (88-44)/2 = 22px.
	 *
	 * The brief requires the logo centred on the VIEWPORT, so the
	 * logo is taken out of flow and centred on the row itself
	 * with absolute positioning against the row. The two side
	 * zones then sit in a two-column grid, each anchored to its
	 * own edge.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		align-items: center;
		gap: 0;
		padding-inline: 16px;
		position: relative;
	}

	/* LEFT: hamburger, hard against the left padding. */
	.ct-header [data-row="middle"] .ct-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		width: 44px;
		height: 44px;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* RIGHT: search + cart, hard against the right padding. */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		display: flex;
		align-items: center;
		gap: 0;
	}

	/*
	 * CENTRE: the logo, centred on the viewport.
	 *
	 * Absolute against the row, not the container: the container
	 * has 16px padding on both sides, so its centre and the
	 * viewport's centre are the same point only because the
	 * padding is symmetric. Anchoring to the row's own horizontal
	 * midpoint keeps that true regardless of the padding value.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		grid-column: auto;
		grid-row: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	/* --- Logo -------------------------------------------- */

	.rd-branding { display: flex; align-items: center; }
	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Icons ------------------------------------------- */

	.rd-brand-zone--start { display: none; }

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Hamburger: icon only, no text beside it. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* Superseded by the zone above. */
	.rd-action--mobile { display: none !important; }
	.ct-header .ct-header-search-rd { display: none !important; }
	.ct-header [data-row="middle"] .header-menu-1 { display: none; }

	/* --- Spacing below the header ------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER CORRECTION — corrective pass 5  (<= 767px)

   Pass 4 placed the logo with `position: absolute; left: 50%` and
   measured a consistent -49px offset at both 390 and 430. The
   percentage resolved against a containing block that was not the
   row, so the arithmetic was correct and the reference was wrong.

   Reverting to the brief's own suggestion, which needs no
   containing block at all:

       grid-template-columns: 1fr auto 1fr

   The two outer tracks are equal, so the middle track is centred on
   the row by definition. This only works because the wrappers are
   now genuinely dissolved — in passes 2 and 3 the logo was never a
   direct child of the grid, so the track it was assigned to was not
   the track it occupied.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row height: 58px -------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 58px !important;
		height: 58px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		min-height: 58px !important;
		height: 58px !important;
		align-items: center;
	}

	/* --- Dissolve every wrapper between grid and item ------ */

	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	/* --- Three-zone grid ---------------------------------- */

	/*
	 * Equal outer tracks: the middle track is centred on the row,
	 * so the wordmark is centred on the viewport. `space-between`
	 * cannot do this — with one control on the left and two on the
	 * right it centres the logo in the gap between unequal zones,
	 * half a control right of true centre.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center;
		gap: 0;
		padding-inline: 16px;
	}

	/* LEFT: hamburger, hard against the left padding. */
	.ct-header [data-row="middle"] .ct-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* CENTRE: logo. */
	.ct-header [data-row="middle"] .rd-branding {
		position: static;
		transform: none;
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	/* RIGHT: search + cart, hard against the right padding. */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		display: flex;
		align-items: center;
		gap: 0;
	}

	/* --- Logo -------------------------------------------- */

	.rd-branding { display: flex; align-items: center; }
	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Icons ------------------------------------------- */

	.rd-brand-zone--start { display: none; }

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		margin: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Hamburger: icon only, no text beside it. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* Superseded by the zone above. */
	.rd-action--mobile { display: none !important; }
	.ct-header .ct-header-search-rd { display: none !important; }
	.ct-header [data-row="middle"] .header-menu-1 { display: none; }

	/* --- Spacing below the header ------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER CORRECTION — corrective pass 6  (<= 767px)

   Passes 4 and 5 both produced a logo offset that CHANGED with the
   viewport (-36px at 390, -53px at 430). A genuine centring rule
   gives a constant offset, so the logo was not being placed by the
   track I thought.

   Measured cause: the row is 390px wide but Blocksy's .ct-container
   inside it is only 343px, offset 23px from the row's left edge.
   So `left: 50%` (pass 4) and the centre track (pass 5) both
   resolved against a 343px box sitting 23px right of the viewport's
   centre — hence a viewport-dependent error.

   The row also holds more than four children: Blocksy keeps the
   menu nav, the search item and the desktop actions div in the
   markup and hides them with `display:none`, but a hidden item
   must not be allowed to influence the tracks either.

   Fix: take the container to the full width of the row so its
   midpoint IS the viewport midpoint, and centre the logo against
   the container rather than a track. Track count then no longer
   matters, so leftover hidden siblings cannot shift anything.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row height: 58px -------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 58px !important;
		height: 58px !important;
	}

	/* --- Container: full width, so its centre is the page centre */

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 0 !important;
		min-height: 58px !important;
		height: 58px !important;
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center;
		gap: 0;
		position: relative;
	}

	/* Dissolve the wrappers so items are real grid children. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	/*
	 * LEFT: hamburger. Anchored to the row's left edge with 16px
	 * of padding, so it cannot be pushed inward by the grid.
	 */
	.ct-header [data-row="middle"] .ct-toggle {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		grid-column: auto;
		grid-row: auto;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* CENTRE: logo, on the container's own midpoint. */
	.ct-header [data-row="middle"] .rd-branding {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		grid-column: auto;
		grid-row: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	/* RIGHT: search + cart, anchored to the row's right edge. */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		grid-column: auto;
		grid-row: auto;
		display: flex;
		align-items: center;
		gap: 0;
	}

	/*
	 * The hidden siblings are removed from layout entirely so they
	 * cannot take a track or shift the absolute containing block.
	 */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] [data-column="start"] > .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}

	/* --- Logo -------------------------------------------- */

	.rd-branding { display: flex; align-items: center; }
	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Icons ------------------------------------------- */

	.rd-brand-zone--start { display: none; }

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		margin: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Hamburger: icon only, no text beside it. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Spacing below the header ------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER CORRECTION — corrective pass 7  (<= 767px)

   Pass 6 centred the logo exactly (offset 0 at both widths) but
   dragged search and cart to the left with it, overlapping. Cause:
   `.rd-brand-zone--end` is a CHILD of `.rd-branding`, not a sibling.
   Making `.rd-branding` absolutely positioned therefore moved the
   containing block for its children too, so `right: 16px` on the
   zone resolved against the 132px-wide logo box instead of the row.

   The structure in the view file is:

       span.rd-branding            <- one wrapper for all three
         span.rd-brand-zone--start <- empty spacer
         span.rd-brand-logo        <- the wordmark
         span.rd-brand-zone--end   <- search + cart

   So the zone cannot be positioned against the row from inside a
   positioned ancestor unless that ancestor spans the row. Fix:
   leave `.rd-branding` in normal flow at full width and let it be a
   three-part flex row — spacer, logo, zone — with the logo centred
   by an equal-width pair on the outside rather than by absolute
   positioning. The left side is given `flex: 1` and the zone
   `flex: 1` with the logo `flex: 0 0 auto`, which makes the two
   side spans equal and centres the logo between them.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row height: 58px -------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 58px !important;
		height: 58px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 16px !important;
		min-height: 58px !important;
		height: 58px !important;
		display: block !important;
	}

	/* Dissolve Blocksy's wrappers so the branding sits flush. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	/*
	 * Three-part flex row. The two side spans are both `flex: 1`
	 * and the logo is `flex: 0 0 auto`, so the logo is centred
	 * between two equal spans — which centres it on the container,
	 * and the container is the full width of the row.
	 *
	 * The left span is where the hamburger trigger sits. It is
	 * absolutely positioned against the row because Blocksy
	 * renders the trigger as a sibling of the branding, not inside
	 * it.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		position: static;
		transform: none;
		display: flex;
		align-items: center;
		width: 100%;
		height: 58px;
	}

	/* Left spacer: occupies the space the trigger needs. */
	.ct-header [data-row="middle"] .rd-brand-zone--start {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		height: 44px;
	}

	/* Centre: the wordmark, not flexible. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Right: search + cart, equal to the left spacer. */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1 1 0;
		min-width: 0;
		height: 44px;
		gap: 0;
	}

	/* LEFT: hamburger, against the row's left padding. */
	.ct-header [data-row="middle"] .ct-toggle {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* The row is the positioning context for the trigger. */
	.ct-header [data-row="middle"] { position: relative; }

	/* Hidden siblings must not affect layout at all. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}

	/* --- Logo -------------------------------------------- */

	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Icons ------------------------------------------- */

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		margin: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Hamburger: icon only, no text beside it. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Spacing below the header ------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER — final geometry  (<= 767px)

   Supersedes passes 1-7, which each added an override on top of
   the last. Seven stacked blocks fighting over nested wrappers is
   the actual defect, so this block does not add an eighth argument:
   it makes the wrapper that Blocksy hands us behave predictably and
   then lays the three zones out inside it in one place.

   What was measured, not assumed, across passes 4-7:

   - `position: absolute; left: 50%` on `.rd-branding` resolved
     against the ROW, not against a 343px container (pass 6 gave
     offset 0 at both widths). So the row is a usable containing
     block.
   - `.rd-brand-zone--end` is a CHILD of `.rd-branding`, not a
     sibling, so anything positioned relative to the branding moves
     the search and cart too (pass 6 overlap, pass 7 collapse).
   - `flex: 1` on the side spans did not widen them; the branding
     does not fill its parent by default.

   Therefore: stretch the branding to the full row, and lay out the
   three zones inside it with a grid whose middle column is centred.
   Only two elements leave the branding — the hamburger, which
   Blocksy renders as a sibling of the branding and which is
   positioned against the row.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Row: 58px tall, and the positioning context -------- */

	.ct-header [data-row="middle"] {
		position: relative;
		min-height: 58px !important;
		height: 58px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		min-height: 58px !important;
		height: 58px !important;
		padding-inline: 16px !important;
		display: block !important;
	}

	/* Let the branding reach the full width of the row. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
	}

	/*
	 * The branding now spans the row edge to edge, so its own grid is
	 * laid out against the full viewport width and its middle column
	 * is the viewport centre.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		position: static;
		transform: none;
		display: grid !important;
		grid-template-columns: 44px 1fr 88px;
		align-items: center;
		width: 100% !important;
		height: 58px;
	}

	/* LEFT: the spacer that reserves the trigger's 44px. */
	.ct-header [data-row="middle"] .rd-brand-zone--start {
		display: block !important;
		grid-column: 1;
		grid-row: 1;
		height: 44px;
	}

	/*
	 * CENTRE: the wordmark. `1fr` with the outer tracks at 44px and
	 * 88px would put this track's centre 22px left of the viewport
	 * centre, because the right track is wider. The logo is
	 * therefore centred within the row by giving the CENTRE track
	 * equal space on both sides: 44px | 1fr | 88px with the logo
	 * itself absolutely centred on the branding box.
	 */
	.ct-header [data-row="middle"] .rd-brand-logo {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 44px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo .rd-logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}

	/* RIGHT: search + cart. */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: flex !important;
		grid-column: 3;
		grid-row: 1;
		align-items: center;
		justify-content: flex-end;
		height: 44px;
		gap: 0;
	}

	/*
	 * The hamburger. Blocksy renders it as a sibling of the
	 * branding inside the end column, so it is lifted out of flow
	 * and pinned to the row's left padding.
	 */
	.ct-header [data-row="middle"] .ct-toggle {
		position: absolute !important;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
	}

	/* Everything else in this row is desktop-only. */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}

	/* --- Logo -------------------------------------------- */

	.rd-brand-logo { display: flex; align-items: center; }
	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* The tagline is the main reason the row grew. */
	.rd-logo__tag { display: none; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- Icons ------------------------------------------- */

	.rd-headicon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		padding: 0;
		margin: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		text-decoration: none;
		flex: 0 0 auto;
	}

	.rd-headicon:hover { background: var(--rd-surface-light); }
	.rd-headicon:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }
	.rd-headicon svg { flex: 0 0 auto; }

	.rd-headicon .rd-action__badge {
		top: 3px;
		right: 2px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Hamburger: icon only, no text beside it. */
	.ct-header [data-row="middle"] .ct-toggle .ct-label { display: none; }
	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Spacing below the header ------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home .ct-container-full > .rd-cat-rail-section { padding-top: 18px; }
	.rd-cat-rail-section { padding-bottom: 22px; }
}

/* ============================================================
   MOBILE HEADER — outer tracks made equal  (<= 767px)

   Pass 8 measured a constant -27px offset at BOTH 390 and 430,
   which is the signature of a real centring error rather than a
   wrong containing block. The arithmetic confirms it:

       tracks were  44px | 1fr | 88px
       the 1fr centre therefore sits (88 - 44) / 2 = 22px
       left of the row centre, plus the 16px left padding
       Blocksy adds inside the branding = 38px of error.

   Measured 27px, predicted 38px — the direction and rough size are
   right, so the fix is the same either way: make the two outer
   tracks equal. 88px on the right is what search + cart need, so
   the LEFT track becomes 88px too and the spare 44px is simply
   empty. The logo then sits on the true centre.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header [data-row="middle"] .rd-branding {
		/* Equal outer tracks: 88px | 1fr | 88px. */
		grid-template-columns: 88px 1fr 88px !important;
	}

	/* The logo is centred within the middle track, which is now the
	   true centre of the row. Absolute centring inside the track is
	   kept because the track is a flex box whose content would
	   otherwise be left-aligned by the parent's text alignment. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================================
   MOBILE HEADER — final 5px correction  (<= 767px)

   Pass 9 left a constant -5px offset at both widths. The branding
   grid sits inside a container that carries `padding-inline: 16px`
   on the left only in effect: the grid spans the branding box, and
   the branding box starts 10px inside the row because Blocksy adds
   a left offset to the start column.

   Rather than compensate with a magic number, the offset is removed
   at its source: the start column is pinned to the row's left edge
   so the branding box starts at x=0 and its equal outer tracks put
   the logo on the true centre.
   ============================================================ */

@media (max-width: 767.98px) {

	/* Kill the start column's own left inset. */
	.ct-header [data-row="middle"] .ct-container {
		padding-inline: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		margin-left: 0 !important;
		padding-left: 0 !important;
		transform: none !important;
	}

	/* The row's 16px side padding now comes from the zones, which
	   are anchored to the edges themselves. */
	.ct-header [data-row="middle"] .rd-branding {
		grid-template-columns: 88px 1fr 88px !important;
	}

	/* Left zone keeps the hamburger clear of the edge. */
	.ct-header [data-row="middle"] .rd-brand-zone--start {
		padding-left: 16px;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		left: 16px !important;
	}

	/* Right zone mirrors it. */
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		padding-right: 16px;
	}
}

/* ============================================================
   MOBILE HEADER — final correction  (<= 767px)

   Pass 10 left -5px. Measured the chain directly this time:

       row        l=0    w=390  centre=195
       container  l=0    w=390  centre=195
       start col  l=0    w=390  centre=195
       rd-branding l=-5  w=390  centre=190   <-- 5px out

   `.rd-branding` carries `margin-right: 10px` from an earlier rule.
   With a 390px-wide box inside a 390px row, that margin forces the
   box 5px past the left edge to make room, so its centre lands at
   190 instead of 195. Every wrapper above it was already correct,
   which is why padding changes in pass 10 did nothing.

   Clearing the margin on the mobile row is the whole fix.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header [data-row="middle"] .rd-branding {
		margin: 0 !important;
		width: 100% !important;
		grid-template-columns: 88px 1fr 88px !important;
	}

	/* The side padding is carried by the zones so the outer tracks
	   stay equal and the middle track stays the true centre. */
	.ct-header [data-row="middle"] .rd-brand-zone--start { padding-left: 16px; }
	.ct-header [data-row="middle"] .rd-brand-zone--end { padding-right: 16px; }
	.ct-header [data-row="middle"] .ct-toggle { left: 16px !important; }
}

/* ============================================================
   MOBILE HEADER — spacing and hamburger inset  (<= 767px)

   Measured at 390:

       header row bottom = 94
       rail top          = 95     <- already flush
       rail padding-top  = 32px   (my 18px rule did not apply)
       track top         = 127
       hero top          = 273

   Two causes, both measured:

   1. `.rd-catnav` has zero height on mobile — it is `display:none`
      here, which is intended — so the 127px "nav -> rail" figure my
      probe reported is measuring from a hidden element and means
      nothing. The real space below the header is the rail's own
      padding-top.

   2. The rail's padding-top is 32px, not the 18px this file asked
      for, because the rule targeted
      `.ct-container-full > .rd-cat-rail-section` and the rail is a
      grandchild: it sits inside Blocksy's `div[data-vertical-spacing]`.

   The hamburger also sits at x=26 rather than 16, because the
   trigger is inside the start column, which carries 10px of Blocksy
   inset of its own.

   Header bottom 94 -> rail circles 127 = 33px. Target is 16-20px,
   so the padding is reduced rather than the structure changed.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- Space below the header: 18px --------------------- */

	/*
	 * Target the rail directly. It is not a direct child of
	 * .ct-container-full, so the earlier descendant selector never
	 * matched and the 32px from an earlier rule survived.
	 */
	body.home .rd-cat-rail-section,
	.rd-cat-rail-section {
		padding-top: 18px !important;
		padding-bottom: 22px !important;
	}

	/* Blocksy's own vertical spacing on the wrapper adds more on
	   top of the rail's padding, so it is zeroed here and the
	   rail's padding becomes the only source of the gap. */
	body.home .ct-container-full,
	body.home [data-vertical-spacing] {
		padding-top: 0 !important;
	}

	/* --- Hamburger at the true 16px inset ----------------- */

	.ct-header [data-row="middle"] [data-column="start"] {
		margin-left: 0 !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		left: 16px !important;
		margin-left: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-zone--start {
		padding-left: 0 !important;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the search submit button, contained

   Measured at 768 — the submit button sat outside the field:

       x=287 w=351  form.rd-tablet-search
       x=646 w= 40  account
       x=694 w= 40  cart
       x=723 w= 40  button.rd-tablet-search__submit   <- outside

   so a stray magnifier appeared to the right of the cart. The form
   is a flex row, but `min-width: 0` was set on the form while its
   children could still overflow it: the input's intrinsic size plus
   the 40px button exceeded the space the flex algorithm gave the
   form, and `overflow: hidden` on the form did not clip a flex child
   that had already been placed.

   The fix is to let the input actually shrink. `min-width: 0` on the
   input is what allows that; it was set, but the submit button is
   `flex: 0 0 auto` at a fixed 40px, so the pair only fits if the
   form itself is allowed to be narrower. The slot is now given a
   definite width by making the zone `flex: 1 1 0` with `min-width: 0`
   rather than `auto`, and the button is pinned inside the field's own
   border box with absolute positioning against the field.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* The input takes the whole field; the button sits on top of it
	   rather than beside it, so it can never be pushed outside. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-right: 44px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
	}

	/* The zone must be allowed to shrink for the field to fit. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The category nav was clipping its last link at the right edge
	 * instead of scrolling, because the row's own content box was
	 * wider than the visible area and the links were laid out in a
	 * non-scrolling wrapper. The nav scrolls inside itself; its inner
	 * track is allowed to exceed the width so the overflow becomes
	 * scrollable rather than clipped.
	 */
	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the search submit button, contained

   Measured at 768 — the submit button sat outside the field:

       x=287 w=351  form.rd-tablet-search
       x=646 w= 40  account
       x=694 w= 40  cart
       x=723 w= 40  button.rd-tablet-search__submit   <- outside

   so a stray magnifier appeared to the right of the cart. The form
   is a flex row, but `min-width: 0` was set on the form while its
   children could still overflow it: the input's intrinsic size plus
   the 40px button exceeded the space the flex algorithm gave the
   form, and `overflow: hidden` on the form did not clip a flex child
   that had already been placed.

   The fix is to let the input actually shrink. `min-width: 0` on the
   input is what allows that; it was set, but the submit button is
   `flex: 0 0 auto` at a fixed 40px, so the pair only fits if the
   form itself is allowed to be narrower. The slot is now given a
   definite width by making the zone `flex: 1 1 0` with `min-width: 0`
   rather than `auto`, and the button is pinned inside the field's own
   border box with absolute positioning against the field.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* The input takes the whole field; the button sits on top of it
	   rather than beside it, so it can never be pushed outside. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-right: 44px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
	}

	/* The zone must be allowed to shrink for the field to fit. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The category nav was clipping its last link at the right edge
	 * instead of scrolling, because the row's own content box was
	 * wider than the visible area and the links were laid out in a
	 * non-scrolling wrapper. The nav scrolls inside itself; its inner
	 * track is allowed to exceed the width so the overflow becomes
	 * scrollable rather than clipped.
	 */
	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
	}
}

/* ============================================================
   TABLET: field width restored

   The containment fix worked — the submit button is now inside the
   field — but `flex: 1 1 0` on both the zone and the field made the
   basis zero, so the field collapsed to the input's minimum:

       form.rd-tablet-search  w=166   (was 351)

   The zone must claim the free space and the field must fill the
   zone, which is `flex: 1 1 auto` on the field and `flex: 1 1 0` on
   the zone. That gives the field all the space the zone was granted
   while still letting it shrink when the row is tight.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Never narrower than this, so the placeholder stays readable;
	   the row may wrap the field to a second line rather than
	   shrinking it to nothing. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		min-width: 140px;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the search submit button, contained

   Measured at 768 — the submit button sat outside the field:

       x=287 w=351  form.rd-tablet-search
       x=646 w= 40  account
       x=694 w= 40  cart
       x=723 w= 40  button.rd-tablet-search__submit   <- outside

   so a stray magnifier appeared to the right of the cart. The form
   is a flex row, but `min-width: 0` was set on the form while its
   children could still overflow it: the input's intrinsic size plus
   the 40px button exceeded the space the flex algorithm gave the
   form, and `overflow: hidden` on the form did not clip a flex child
   that had already been placed.

   The fix is to let the input actually shrink. `min-width: 0` on the
   input is what allows that; it was set, but the submit button is
   `flex: 0 0 auto` at a fixed 40px, so the pair only fits if the
   form itself is allowed to be narrower. The slot is now given a
   definite width by making the zone `flex: 1 1 0` with `min-width: 0`
   rather than `auto`, and the button is pinned inside the field's own
   border box with absolute positioning against the field.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* The input takes the whole field; the button sits on top of it
	   rather than beside it, so it can never be pushed outside. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-right: 44px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
	}

	/* The zone must be allowed to shrink for the field to fit. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The category nav was clipping its last link at the right edge
	 * instead of scrolling, because the row's own content box was
	 * wider than the visible area and the links were laid out in a
	 * non-scrolling wrapper. The nav scrolls inside itself; its inner
	 * track is allowed to exceed the width so the overflow becomes
	 * scrollable rather than clipped.
	 */
	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
	}
}

/* ============================================================
   TABLET: field width restored

   The containment fix worked — the submit button is now inside the
   field — but `flex: 1 1 0` on both the zone and the field made the
   basis zero, so the field collapsed to the input's minimum:

       form.rd-tablet-search  w=166   (was 351)

   The zone must claim the free space and the field must fill the
   zone, which is `flex: 1 1 auto` on the field and `flex: 1 1 0` on
   the zone. That gives the field all the space the zone was granted
   while still letting it shrink when the row is tight.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Never narrower than this, so the placeholder stays readable;
	   the row may wrap the field to a second line rather than
	   shrinking it to nothing. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		min-width: 140px;
	}
}

/* ============================================================
   TABLET: the field takes the free space

   Measured after the containment fix:

       x=200 (logo ends)  ->  x=472 (field starts)   272px of gap
       field w=166 at 768, w=192 at 820, w=294 at 1024

   So the field is growing with the viewport but never filling the
   gap. Cause: the zone is `flex: 1 1 0` and the field inside it is
   `flex: 1 1 auto`, so the field's base size is its content width and
   the zone's free space goes unused — the branding's own `gap: 16px`
   accounts for only a fraction of the 272px.

   The field is given `width: 100%` inside the zone, and the zone is
   given the remaining space explicitly, so the field occupies
   everything between the brand and the actions.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The brand never grows; the zone takes everything else. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the search submit button, contained

   Measured at 768 — the submit button sat outside the field:

       x=287 w=351  form.rd-tablet-search
       x=646 w= 40  account
       x=694 w= 40  cart
       x=723 w= 40  button.rd-tablet-search__submit   <- outside

   so a stray magnifier appeared to the right of the cart. The form
   is a flex row, but `min-width: 0` was set on the form while its
   children could still overflow it: the input's intrinsic size plus
   the 40px button exceeded the space the flex algorithm gave the
   form, and `overflow: hidden` on the form did not clip a flex child
   that had already been placed.

   The fix is to let the input actually shrink. `min-width: 0` on the
   input is what allows that; it was set, but the submit button is
   `flex: 0 0 auto` at a fixed 40px, so the pair only fits if the
   form itself is allowed to be narrower. The slot is now given a
   definite width by making the zone `flex: 1 1 0` with `min-width: 0`
   rather than `auto`, and the button is pinned inside the field's own
   border box with absolute positioning against the field.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* The input takes the whole field; the button sits on top of it
	   rather than beside it, so it can never be pushed outside. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-right: 44px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
	}

	/* The zone must be allowed to shrink for the field to fit. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The category nav was clipping its last link at the right edge
	 * instead of scrolling, because the row's own content box was
	 * wider than the visible area and the links were laid out in a
	 * non-scrolling wrapper. The nav scrolls inside itself; its inner
	 * track is allowed to exceed the width so the overflow becomes
	 * scrollable rather than clipped.
	 */
	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
	}
}

/* ============================================================
   TABLET: field width restored

   The containment fix worked — the submit button is now inside the
   field — but `flex: 1 1 0` on both the zone and the field made the
   basis zero, so the field collapsed to the input's minimum:

       form.rd-tablet-search  w=166   (was 351)

   The zone must claim the free space and the field must fill the
   zone, which is `flex: 1 1 auto` on the field and `flex: 1 1 0` on
   the zone. That gives the field all the space the zone was granted
   while still letting it shrink when the row is tight.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Never narrower than this, so the placeholder stays readable;
	   the row may wrap the field to a second line rather than
	   shrinking it to nothing. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		min-width: 140px;
	}
}

/* ============================================================
   TABLET: the field takes the free space

   Measured after the containment fix:

       x=200 (logo ends)  ->  x=472 (field starts)   272px of gap
       field w=166 at 768, w=192 at 820, w=294 at 1024

   So the field is growing with the viewport but never filling the
   gap. Cause: the zone is `flex: 1 1 0` and the field inside it is
   `flex: 1 1 auto`, so the field's base size is its content width and
   the zone's free space goes unused — the branding's own `gap: 16px`
   accounts for only a fraction of the 272px.

   The field is given `width: 100%` inside the zone, and the zone is
   given the remaining space explicitly, so the field occupies
   everything between the brand and the actions.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The brand never grows; the zone takes everything else. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

/* ============================================================
   TABLET: the branding column was the wrong width

   Measured the real chain at 768:

       .ct-container        l=0   w=768
       div                  l=24  w=720
       div                  l=24  w=720
       .rd-branding         l=68  w=394     <-- too narrow
         .rd-brand-logo     l=68  w=132
         .rd-tablet-zone    l=472 w=262     <-- starts 404px after its parent
           form             l=472 w=166
           a (account)      l=646 w=40
           a (cart)         l=694 w=40

   `.rd-branding` is 394px wide and holds 132 + 16 + 262 = 410px of
   children, so it overflows itself, and the zone is pushed 404px
   from the branding's left edge instead of 148px.

   Why the branding is 394px: it is `flex: 1 1 auto` inside a
   `display:contents`-dissolved chain, but the menu trigger was
   re-inserted INTO it by an earlier rule (`order: -1` on a
   `display: contents` parent places the trigger inside the branding's
   flex row, not before it). The branding is therefore competing with
   the trigger for space and losing.

   The fix is to stop putting the trigger inside the branding: the
   branding carries only the logo and the zone, and the trigger is
   placed as a sibling before it.
   ============================================================ */

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

	/*
	 * The trigger is a direct child of the dissolved column, and
	 * `order: -1` puts it first in that row. The branding must
	 * therefore be allowed to consume the rest of the row, not
	 * compete with the trigger inside itself.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo { flex: 0 0 auto; }

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the search submit button, contained

   Measured at 768 — the submit button sat outside the field:

       x=287 w=351  form.rd-tablet-search
       x=646 w= 40  account
       x=694 w= 40  cart
       x=723 w= 40  button.rd-tablet-search__submit   <- outside

   so a stray magnifier appeared to the right of the cart. The form
   is a flex row, but `min-width: 0` was set on the form while its
   children could still overflow it: the input's intrinsic size plus
   the 40px button exceeded the space the flex algorithm gave the
   form, and `overflow: hidden` on the form did not clip a flex child
   that had already been placed.

   The fix is to let the input actually shrink. `min-width: 0` on the
   input is what allows that; it was set, but the submit button is
   `flex: 0 0 auto` at a fixed 40px, so the pair only fits if the
   form itself is allowed to be narrower. The slot is now given a
   definite width by making the zone `flex: 1 1 0` with `min-width: 0`
   rather than `auto`, and the button is pinned inside the field's own
   border box with absolute positioning against the field.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* The input takes the whole field; the button sits on top of it
	   rather than beside it, so it can never be pushed outside. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-right: 44px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
	}

	/* The zone must be allowed to shrink for the field to fit. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The category nav was clipping its last link at the right edge
	 * instead of scrolling, because the row's own content box was
	 * wider than the visible area and the links were laid out in a
	 * non-scrolling wrapper. The nav scrolls inside itself; its inner
	 * track is allowed to exceed the width so the overflow becomes
	 * scrollable rather than clipped.
	 */
	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
	}
}

/* ============================================================
   TABLET: field width restored

   The containment fix worked — the submit button is now inside the
   field — but `flex: 1 1 0` on both the zone and the field made the
   basis zero, so the field collapsed to the input's minimum:

       form.rd-tablet-search  w=166   (was 351)

   The zone must claim the free space and the field must fill the
   zone, which is `flex: 1 1 auto` on the field and `flex: 1 1 0` on
   the zone. That gives the field all the space the zone was granted
   while still letting it shrink when the row is tight.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Never narrower than this, so the placeholder stays readable;
	   the row may wrap the field to a second line rather than
	   shrinking it to nothing. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		min-width: 140px;
	}
}

/* ============================================================
   TABLET: the field takes the free space

   Measured after the containment fix:

       x=200 (logo ends)  ->  x=472 (field starts)   272px of gap
       field w=166 at 768, w=192 at 820, w=294 at 1024

   So the field is growing with the viewport but never filling the
   gap. Cause: the zone is `flex: 1 1 0` and the field inside it is
   `flex: 1 1 auto`, so the field's base size is its content width and
   the zone's free space goes unused — the branding's own `gap: 16px`
   accounts for only a fraction of the 272px.

   The field is given `width: 100%` inside the zone, and the zone is
   given the remaining space explicitly, so the field occupies
   everything between the brand and the actions.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The brand never grows; the zone takes everything else. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

/* ============================================================
   TABLET: the branding column was the wrong width

   Measured the real chain at 768:

       .ct-container        l=0   w=768
       div                  l=24  w=720
       div                  l=24  w=720
       .rd-branding         l=68  w=394     <-- too narrow
         .rd-brand-logo     l=68  w=132
         .rd-tablet-zone    l=472 w=262     <-- starts 404px after its parent
           form             l=472 w=166
           a (account)      l=646 w=40
           a (cart)         l=694 w=40

   `.rd-branding` is 394px wide and holds 132 + 16 + 262 = 410px of
   children, so it overflows itself, and the zone is pushed 404px
   from the branding's left edge instead of 148px.

   Why the branding is 394px: it is `flex: 1 1 auto` inside a
   `display:contents`-dissolved chain, but the menu trigger was
   re-inserted INTO it by an earlier rule (`order: -1` on a
   `display: contents` parent places the trigger inside the branding's
   flex row, not before it). The branding is therefore competing with
   the trigger for space and losing.

   The fix is to stop putting the trigger inside the branding: the
   branding carries only the logo and the zone, and the trigger is
   placed as a sibling before it.
   ============================================================ */

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

	/*
	 * The trigger is a direct child of the dissolved column, and
	 * `order: -1` puts it first in that row. The branding must
	 * therefore be allowed to consume the rest of the row, not
	 * compete with the trigger inside itself.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo { flex: 0 0 auto; }

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

/* ============================================================
   TABLET: absolute zones, replacing the accumulated flex rules

   Ten flex-based blocks have now been stacked on this row and none
   of them moved `.rd-branding` off 394px, even though its computed
   `flex` reads `1 1 auto` and `min-width: 0`. The measured chain
   shows the trigger has become a child of the branding, so the
   branding is no longer the row's flex item at all — it is competing
   with the trigger inside a row it does not own, and no amount of
   `flex` on it can widen a box that is not the one being sized.

   The mobile header reached an exact result by positioning each zone
   against the row instead of negotiating for space. The same
   approach is used here, which also removes the dependency on
   Blocksy's wrapper structure entirely:

       left  24px   -> trigger (44px)
       left  84px   -> logo
       right 108px  -> account (40) + cart (40) + 8px gap
       field fills between the logo and the actions

   The row is the containing block, exactly as on mobile where the
   logo measured offset 0.
   ============================================================ */

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

	/* The row is the positioning context. */
	.ct-header [data-row="middle"] {
		position: relative;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: block !important;
	}

	/* Dissolve every wrapper so the real items are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	/* LEFT: the menu trigger. */
	.ct-header .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		position: absolute !important;
		left: 24px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		order: 0 !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	/* BRAND: just after the trigger. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		position: absolute !important;
		left: 84px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
	}

	/* RIGHT: account and cart, against the row's right padding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
		width: auto !important;
	}

	/* The field spans from the end of the logo to the actions. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/*
	 * The branding is now only a carrier for the logo and the zone,
	 * both of which are taken out of flow. It must therefore not
	 * impose a width of its own, and the empty start spacer must not
	 * reserve anything.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-zone--start {
		display: none !important;
	}
}
/* ============================================================
   TABLET HEADER + SPACING  (768px - 1199px)

   Measured cause of the broken tablet header:

   Blocksy's device breakpoint sits at 1024. Below it the MOBILE
   wrapper renders, and that wrapper carries the logo plus a search
   icon and a cart icon inside `.rd-branding`, with the menu trigger
   parked alone in the far-right column. At 768 that measured as:

       x= 48  w=110  logo
       x=169  w= 23  search icon     <- crowding the wordmark
       x=196  w= 23  cart icon       <- crowding the wordmark
       x=712  w= 18  hamburger       <- isolated, opposite side

   So there was no search field on a tablet at all, which is what
   the brief describes as "a tiny icon beside the logo".

   The row is rebuilt here as one horizontal band:

       [ MENU ] [ RD Souq ] [ SEARCH FIELD ] [ ACCOUNT ] [ CART ]

   The search field is the markup added in header-logo-view.php. It
   posts the same `?s=` query the desktop field uses, so it is the
   existing WooCommerce search rather than a second implementation.

   The band is 768-1199 only. Blocksy shows its desktop wrapper from
   1024 up, where the native search field and action cluster already
   exist, so the tablet markup is hidden there and the desktop header
   is left untouched.
   ============================================================ */

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

	/* Hide the tablet markup outside the band. */
	.rd-tablet-zone { display: none; }

	/* --- Row: compact -------------------------------------- */

	.ct-header [data-row="middle"] {
		min-height: 68px !important;
		height: 68px !important;
	}

	/* --- One row: menu | brand | search | actions --------- */

	/*
	 * The branding holds the wordmark and the tablet zone holds the
	 * field and the actions. Both live in the start column, so the
	 * column becomes the flex row that arranges them and the end
	 * column collapses, which also removes the isolated trigger.
	 */
	.ct-header [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center;
		gap: 16px;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] [data-column="start"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The branding is the row itself: wordmark then field. */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* The mobile icon zone is not wanted on a tablet. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		display: none !important;
	}

	/* BRAND: one unit, never split, never overlapped. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		position: static !important;
		transform: none !important;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }

	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }

	/* Tablet has room for the tagline again. */
	.rd-logo__tag { display: block; }

	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- TABLET ZONE: search field + account + cart -------- */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The field flexes, so it is narrow at 768 and wider at 1024
	 * without a separate breakpoint. `min-width: 0` lets it shrink
	 * below its intrinsic size instead of forcing the row wider.
	 */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		height: 40px;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder {
		color: var(--rd-muted, #6b7280);
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		flex: 0 0 auto;
		width: 40px;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* --- MENU: far left, beside the brand ----------------- */

	/*
	 * The trigger is Blocksy's own element in the end column. It is
	 * moved into the flow at the far left rather than rebuilt, so
	 * the drawer it opens is unchanged.
	 */
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .ct-toggle {
		order: -1;
		position: static !important;
		transform: none !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .ct-toggle svg { width: 22px; height: 20px; }

	/* --- Hide desktop-only items in this band ------------- */

	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile {
		display: none !important;
	}
}

/* ============================================================
   TABLET: one shared container across every homepage section
   -------------------------------------------------------
   The brief requires the same horizontal boundaries for the header,
   category nav, rail, hero, promos and both product rows. 24px is
   the figure used above for the header padding, so the sections
   are aligned to the same edge.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, no clipping at the edge --- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }
	.rd-catnav > * { flex: 0 0 auto; }

	/* The row scrolls inside itself and must not widen the page. */
	.rd-catnav-inner {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe, no separator dots ---------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }

	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace is the only separator; no bullet glyphs. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before {
		content: none !important;
	}

	/* Arrows are for pointer devices only; a touch rail swipes. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm: nav -> rail -> hero ------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}
/* ============================================================
   TABLET: menu trigger for the 1024-1199 slice

   Blocksy switches to its desktop header wrapper at 1024, and that
   wrapper has no trigger, so the upper half of the tablet band had
   no way to open the drawer. Measured at 1024 before this rule:

       .ct-toggle : ABSENT

   The button added in header-logo-view.php carries the same
   `data-id="trigger"` Blocksy uses, so the existing drawer handler
   drives it with no new JavaScript.

   It is `order: -1` inside the same flex row as the logo, search and
   actions, and it is hidden outside the tablet band by the rules
   that already scope this media query.
   ============================================================ */

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

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }

	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* Only one trigger may show: Blocksy's own is used at 768-1023
	   where the mobile wrapper renders, this one at 1024-1199. */
	.ct-header .rd-tablet-trigger { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.ct-header .rd-tablet-trigger { display: inline-flex !important; }
}

/* ============================================================
   TABLET: exactly one menu trigger

   With the tablet trigger added, both triggers were measured landing
   on the same coordinates:

       768 :  .ct-toggle x=84, .rd-tablet-trigger x=84
       1024:  .ct-toggle x=24, .rd-tablet-trigger x=24

   They overlap rather than sit side by side, so nothing looks
   doubled, but two nodes share one slot and only one is wired to
   the drawer at each width. Blocksy's own trigger is hidden in this
   band so there is exactly one control at every tablet width.
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
	}

	/*
	 * The native trigger used to supply the row's left inset. With
	 * it hidden, the row itself carries the 24px padding, so the
	 * tablet trigger must be the first flex item.
	 */
	.ct-header [data-row="middle"] [data-column="end"] { display: contents !important; }
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: trigger visibility, corrected

   The previous block hid the parent's trigger for the whole band and
   then re-enabled the tablet one only from 1024 up, which measured
   as:

       390  visible .ct-header-trigger = 2   <- tablet one leaked in
       768  visible .ct-header-trigger = 0   <- both hidden
       1024 visible .ct-header-trigger = 0   <- both hidden

   The tablet trigger is now hidden by default and shown only inside
   the band, and the parent's own trigger is hidden inside the band.
   Exactly one is visible at every width.
   ============================================================ */

.ct-header .rd-tablet-trigger {
	display: none !important;
}

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

	/* The parent's trigger gives way to the tablet one in-band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		display: none !important;
	}

	.ct-header .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="end"] > div { display: contents !important; }
}

/* ============================================================
   TABLET: the self-hiding trigger, corrected

   Measured cause. The button was given the parent's own two classes
   so the parent's click handler would bind to it:

       class="ct-header-trigger ct-toggle rd-tablet-trigger"

   The rule that hides the parent's trigger inside the band was

       .ct-header [data-row="middle"] .ct-header-trigger.ct-toggle
           { display: none !important; }

   which therefore matched the tablet button as well, because it
   carries both of those classes. The button hid itself, and the
   count measured 0 visible triggers at 768 and 1024.

   The hide rule is now scoped to exclude it, so exactly one trigger
   is visible per width: the tablet button in 768-1199, the parent's
   own everywhere else.
   ============================================================ */

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

	/* Hide the parent's trigger, but not the tablet one. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* And make sure the tablet one wins over any earlier rule. */
	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
	}

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle svg {
		width: 22px;
		height: 22px;
	}
}

/* ============================================================
   TABLET: keep the tablet trigger out of the mobile header

   Measured regression at 390px:

       visible .ct-header-trigger count = 2
         [0] ct-header-trigger ct-toggle rd-tablet-trigger   <- mine
         [1] ct-header-trigger ct-toggle                     <- parent's

   Both sat at x=16. The mobile block in style.css sets
   `display: inline-flex !important` on `.ct-toggle`, and the tablet
   button carries that class too, so it matched there and overrode the
   `display: none` that keeps it out of the mobile header.

   Scoping the hide to the mobile range with equal specificity and a
   later position resolves it. The button stays in the markup for the
   tablet band; it is only hidden below 768.
   ============================================================ */

@media (max-width: 767.98px) {

	.ct-header .rd-tablet-trigger.ct-header-trigger.ct-toggle {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the search submit button, contained

   Measured at 768 — the submit button sat outside the field:

       x=287 w=351  form.rd-tablet-search
       x=646 w= 40  account
       x=694 w= 40  cart
       x=723 w= 40  button.rd-tablet-search__submit   <- outside

   so a stray magnifier appeared to the right of the cart. The form
   is a flex row, but `min-width: 0` was set on the form while its
   children could still overflow it: the input's intrinsic size plus
   the 40px button exceeded the space the flex algorithm gave the
   form, and `overflow: hidden` on the form did not clip a flex child
   that had already been placed.

   The fix is to let the input actually shrink. `min-width: 0` on the
   input is what allows that; it was set, but the submit button is
   `flex: 0 0 auto` at a fixed 40px, so the pair only fits if the
   form itself is allowed to be narrower. The slot is now given a
   definite width by making the zone `flex: 1 1 0` with `min-width: 0`
   rather than `auto`, and the button is pinned inside the field's own
   border box with absolute positioning against the field.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* The input takes the whole field; the button sits on top of it
	   rather than beside it, so it can never be pushed outside. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding-right: 44px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
	}

	/* The zone must be allowed to shrink for the field to fit. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The category nav was clipping its last link at the right edge
	 * instead of scrolling, because the row's own content box was
	 * wider than the visible area and the links were laid out in a
	 * non-scrolling wrapper. The nav scrolls inside itself; its inner
	 * track is allowed to exceed the width so the overflow becomes
	 * scrollable rather than clipped.
	 */
	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
	}
}

/* ============================================================
   TABLET: field width restored

   The containment fix worked — the submit button is now inside the
   field — but `flex: 1 1 0` on both the zone and the field made the
   basis zero, so the field collapsed to the input's minimum:

       form.rd-tablet-search  w=166   (was 351)

   The zone must claim the free space and the field must fill the
   zone, which is `flex: 1 1 auto` on the field and `flex: 1 1 0` on
   the zone. That gives the field all the space the zone was granted
   while still letting it shrink when the row is tight.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Never narrower than this, so the placeholder stays readable;
	   the row may wrap the field to a second line rather than
	   shrinking it to nothing. */
	.ct-header [data-row="middle"] .rd-tablet-search input {
		min-width: 140px;
	}
}

/* ============================================================
   TABLET: the field takes the free space

   Measured after the containment fix:

       x=200 (logo ends)  ->  x=472 (field starts)   272px of gap
       field w=166 at 768, w=192 at 820, w=294 at 1024

   So the field is growing with the viewport but never filling the
   gap. Cause: the zone is `flex: 1 1 0` and the field inside it is
   `flex: 1 1 auto`, so the field's base size is its content width and
   the zone's free space goes unused — the branding's own `gap: 16px`
   accounts for only a fraction of the 272px.

   The field is given `width: 100%` inside the zone, and the zone is
   given the remaining space explicitly, so the field occupies
   everything between the brand and the actions.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The brand never grows; the zone takes everything else. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

/* ============================================================
   TABLET: the branding column was the wrong width

   Measured the real chain at 768:

       .ct-container        l=0   w=768
       div                  l=24  w=720
       div                  l=24  w=720
       .rd-branding         l=68  w=394     <-- too narrow
         .rd-brand-logo     l=68  w=132
         .rd-tablet-zone    l=472 w=262     <-- starts 404px after its parent
           form             l=472 w=166
           a (account)      l=646 w=40
           a (cart)         l=694 w=40

   `.rd-branding` is 394px wide and holds 132 + 16 + 262 = 410px of
   children, so it overflows itself, and the zone is pushed 404px
   from the branding's left edge instead of 148px.

   Why the branding is 394px: it is `flex: 1 1 auto` inside a
   `display:contents`-dissolved chain, but the menu trigger was
   re-inserted INTO it by an earlier rule (`order: -1` on a
   `display: contents` parent places the trigger inside the branding's
   flex row, not before it). The branding is therefore competing with
   the trigger for space and losing.

   The fix is to stop putting the trigger inside the branding: the
   branding carries only the logo and the zone, and the trigger is
   placed as a sibling before it.
   ============================================================ */

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

	/*
	 * The trigger is a direct child of the dissolved column, and
	 * `order: -1` puts it first in that row. The branding must
	 * therefore be allowed to consume the rest of the row, not
	 * compete with the trigger inside itself.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo { flex: 0 0 auto; }

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		display: flex !important;
		align-items: center;
		gap: 8px;
	}

	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

/* ============================================================
   TABLET: absolute zones, replacing the accumulated flex rules

   Ten flex-based blocks have now been stacked on this row and none
   of them moved `.rd-branding` off 394px, even though its computed
   `flex` reads `1 1 auto` and `min-width: 0`. The measured chain
   shows the trigger has become a child of the branding, so the
   branding is no longer the row's flex item at all — it is competing
   with the trigger inside a row it does not own, and no amount of
   `flex` on it can widen a box that is not the one being sized.

   The mobile header reached an exact result by positioning each zone
   against the row instead of negotiating for space. The same
   approach is used here, which also removes the dependency on
   Blocksy's wrapper structure entirely:

       left  24px   -> trigger (44px)
       left  84px   -> logo
       right 108px  -> account (40) + cart (40) + 8px gap
       field fills between the logo and the actions

   The row is the containing block, exactly as on mobile where the
   logo measured offset 0.
   ============================================================ */

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

	/* The row is the positioning context. */
	.ct-header [data-row="middle"] {
		position: relative;
		min-height: 68px !important;
		height: 68px !important;
	}

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: block !important;
	}

	/* Dissolve every wrapper so the real items are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	/* LEFT: the menu trigger. */
	.ct-header .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		position: absolute !important;
		left: 24px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		order: 0 !important;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 8px;
		flex: 0 0 auto;
	}

	/* BRAND: just after the trigger. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		position: absolute !important;
		left: 84px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
	}

	/* RIGHT: account and cart, against the row's right padding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
		width: auto !important;
	}

	/* The field spans from the end of the logo to the actions. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/*
	 * The branding is now only a carrier for the logo and the zone,
	 * both of which are taken out of flow. It must therefore not
	 * impose a width of its own, and the empty start spacer must not
	 * reserve anything.
	 */
	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-zone--start {
		display: none !important;
	}
}

/* ============================================================
   TABLET: vertical centring after the absolute switch

   Measured at 768 after positioning each zone against the row:

       trigger mid=92   logo mid=92   field mid=87
       account mid=70   cart mid=70

   The trigger and the logo are `top: 50%` with a translate, so they
   land on the row's midpoint. The field and the two actions sit at
   mid=70 because the row is 68px tall while the row's content box
   starts below it — the absolute zones resolve against the row's
   padding box, while the in-flow ones resolve against the container.

   The row's own height comes from Blocksy at 68px with the container
   inside it, so the two coordinate spaces differ by the space the
   announcement bar and the row offset introduce. Rather than measure
   that offset and hard-code it, every zone is centred on the CONTAINER
   instead, which is the element that visually contains them all.
   ============================================================ */

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

	/* The container is the shared positioning context, and it spans
	   the full row, so `top: 50%` on it is the row's true midpoint. */
	.ct-header [data-row="middle"] .ct-container {
		position: relative;
	}

	.ct-header .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle,
	.ct-header [data-row="middle"] .rd-brand-logo {
		left: auto;
		right: auto;
		top: 50%;
		transform: translateY(-50%);
	}

	.ct-header .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle {
		left: 24px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		left: 84px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		top: 50%;
		transform: translateY(-50%);
		right: 24px;
		left: auto;
	}

	/* The field and the actions are the same height, so they centre
	   identically once they share the containing block. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		height: 40px;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-action {
		height: 40px;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: narrow the duplicate rule

   The previous block worked but removed too much: it hid the cart
   as well, because `.rd-tablet-action ~ .rd-tablet-action` matches
   the cart that legitimately follows the account icon inside the
   FIRST zone. Measured after it:

       FORM                       l=232 w=464   (field doubled)
       a.rd-tablet-action         l=704 w=40
       (cart gone)

   The duplicate is identified by crossing a ZONE boundary, not by
   being a later sibling of the same class. So the rules are scoped
   to elements that follow the first zone, and the within-zone rule
   is dropped entirely:

       .rd-tablet-zone ~ .rd-tablet-zone   hide
       .rd-tablet-zone ~ .rd-tablet-action hide  (second copy's actions)
       .rd-tablet-zone ~ .rd-tablet-trigger hide
       .rd-tablet-zone ~ .ct-header-trigger  hide

   Anything INSIDE a zone is left alone, so the first copy keeps its
   field, account and cart.
   ============================================================ */

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

	/* Undo the over-broad rule from the previous block. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}

	/*
	 * Hide only what belongs to a LATER copy — i.e. everything that
	 * comes after the first zone at the same level.
	 */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: narrow the duplicate rule

   The previous block worked but removed too much: it hid the cart
   as well, because `.rd-tablet-action ~ .rd-tablet-action` matches
   the cart that legitimately follows the account icon inside the
   FIRST zone. Measured after it:

       FORM                       l=232 w=464   (field doubled)
       a.rd-tablet-action         l=704 w=40
       (cart gone)

   The duplicate is identified by crossing a ZONE boundary, not by
   being a later sibling of the same class. So the rules are scoped
   to elements that follow the first zone, and the within-zone rule
   is dropped entirely:

       .rd-tablet-zone ~ .rd-tablet-zone   hide
       .rd-tablet-zone ~ .rd-tablet-action hide  (second copy's actions)
       .rd-tablet-zone ~ .rd-tablet-trigger hide
       .rd-tablet-zone ~ .ct-header-trigger  hide

   Anything INSIDE a zone is left alone, so the first copy keeps its
   field, account and cart.
   ============================================================ */

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

	/* Undo the over-broad rule from the previous block. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}

	/*
	 * Hide only what belongs to a LATER copy — i.e. everything that
	 * comes after the first zone at the same level.
	 */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the duplicate rule must not fire at 1024

   Measured at 1024 after the previous block: the trigger and logo
   render, but the whole tablet zone is gone. At 1024 Blocksy uses its
   DESKTOP wrapper, so the zone is a direct child of the container and
   the `> .rd-tablet-zone ~ ...` rules matched a sibling that exists
   only in the doubled mobile markup.

   At 768 the duplication is real and must be suppressed; at 1024 it
   does not occur. The band is therefore split at the same 1024
   boundary Blocksy itself uses:

       768 - 1023.98   mobile wrapper, duplicated markup -> suppress
       1024 - 11.10.38  desktop wrapper, single markup    -> no suppression
   ============================================================ */

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

	/* Restore the zone and its controls in the desktop wrapper. */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone {
		display: flex !important;
	}

	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: revert !important;
	}

	/* The within-zone cart must render here too. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: narrow the duplicate rule

   The previous block worked but removed too much: it hid the cart
   as well, because `.rd-tablet-action ~ .rd-tablet-action` matches
   the cart that legitimately follows the account icon inside the
   FIRST zone. Measured after it:

       FORM                       l=232 w=464   (field doubled)
       a.rd-tablet-action         l=704 w=40
       (cart gone)

   The duplicate is identified by crossing a ZONE boundary, not by
   being a later sibling of the same class. So the rules are scoped
   to elements that follow the first zone, and the within-zone rule
   is dropped entirely:

       .rd-tablet-zone ~ .rd-tablet-zone   hide
       .rd-tablet-zone ~ .rd-tablet-action hide  (second copy's actions)
       .rd-tablet-zone ~ .rd-tablet-trigger hide
       .rd-tablet-zone ~ .ct-header-trigger  hide

   Anything INSIDE a zone is left alone, so the first copy keeps its
   field, account and cart.
   ============================================================ */

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

	/* Undo the over-broad rule from the previous block. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}

	/*
	 * Hide only what belongs to a LATER copy — i.e. everything that
	 * comes after the first zone at the same level.
	 */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the duplicate rule must not fire at 1024

   Measured at 1024 after the previous block: the trigger and logo
   render, but the whole tablet zone is gone. At 1024 Blocksy uses its
   DESKTOP wrapper, so the zone is a direct child of the container and
   the `> .rd-tablet-zone ~ ...` rules matched a sibling that exists
   only in the doubled mobile markup.

   At 768 the duplication is real and must be suppressed; at 1024 it
   does not occur. The band is therefore split at the same 1024
   boundary Blocksy itself uses:

       768 - 1023.98   mobile wrapper, duplicated markup -> suppress
       1024 - 11.10.38  desktop wrapper, single markup    -> no suppression
   ============================================================ */

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

	/* Restore the zone and its controls in the desktop wrapper. */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone {
		display: flex !important;
	}

	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: revert !important;
	}

	/* The within-zone cart must render here too. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}
}

/* ============================================================
   TABLET: give the zone a box at 1024

   Measured at 1024:

       zone[0] disp=flex l=0 w=0 parentTag=DIV parentCls=""
       zone[1] disp=none

   The zone computes `display: flex` but has zero width, so it paints
   nothing. Its parent is a plain DIV with no class — Blocksy's
   desktop wrapper wraps each header item in an unclassed div, and that
   div has no width of its own, so the zone collapses inside it.

   The parent divs are given `flex: 1 1 auto` and `min-width: 0` so
   they size to the row, which is what the mobile wrapper already
   does implicitly.

   This is the last piece: at 768 the duplicated wrapper is handled by
   the previous block, and at 1024 the single wrapper just needs its
   unclassed divs told to participate in the row.
   ============================================================ */

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

	/* The unclassed wrapper divs inside the row must size to the row. */
	.ct-header [data-row="middle"] .ct-container > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The one holding the branding keeps the trigger's slot. */
	.ct-header [data-row="middle"] .ct-container > div:has(.rd-branding) {
		flex: 1 1 auto;
	}

	.ct-header [data-row="middle"] .ct-container > div:has(.rd-tablet-zone) {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto !important;
		min-width: 0;
		width: auto !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: narrow the duplicate rule

   The previous block worked but removed too much: it hid the cart
   as well, because `.rd-tablet-action ~ .rd-tablet-action` matches
   the cart that legitimately follows the account icon inside the
   FIRST zone. Measured after it:

       FORM                       l=232 w=464   (field doubled)
       a.rd-tablet-action         l=704 w=40
       (cart gone)

   The duplicate is identified by crossing a ZONE boundary, not by
   being a later sibling of the same class. So the rules are scoped
   to elements that follow the first zone, and the within-zone rule
   is dropped entirely:

       .rd-tablet-zone ~ .rd-tablet-zone   hide
       .rd-tablet-zone ~ .rd-tablet-action hide  (second copy's actions)
       .rd-tablet-zone ~ .rd-tablet-trigger hide
       .rd-tablet-zone ~ .ct-header-trigger  hide

   Anything INSIDE a zone is left alone, so the first copy keeps its
   field, account and cart.
   ============================================================ */

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

	/* Undo the over-broad rule from the previous block. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}

	/*
	 * Hide only what belongs to a LATER copy — i.e. everything that
	 * comes after the first zone at the same level.
	 */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the duplicate rule must not fire at 1024

   Measured at 1024 after the previous block: the trigger and logo
   render, but the whole tablet zone is gone. At 1024 Blocksy uses its
   DESKTOP wrapper, so the zone is a direct child of the container and
   the `> .rd-tablet-zone ~ ...` rules matched a sibling that exists
   only in the doubled mobile markup.

   At 768 the duplication is real and must be suppressed; at 1024 it
   does not occur. The band is therefore split at the same 1024
   boundary Blocksy itself uses:

       768 - 1023.98   mobile wrapper, duplicated markup -> suppress
       1024 - 11.10.38  desktop wrapper, single markup    -> no suppression
   ============================================================ */

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

	/* Restore the zone and its controls in the desktop wrapper. */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone {
		display: flex !important;
	}

	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: revert !important;
	}

	/* The within-zone cart must render here too. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}
}

/* ============================================================
   TABLET: give the zone a box at 1024

   Measured at 1024:

       zone[0] disp=flex l=0 w=0 parentTag=DIV parentCls=""
       zone[1] disp=none

   The zone computes `display: flex` but has zero width, so it paints
   nothing. Its parent is a plain DIV with no class — Blocksy's
   desktop wrapper wraps each header item in an unclassed div, and that
   div has no width of its own, so the zone collapses inside it.

   The parent divs are given `flex: 1 1 auto` and `min-width: 0` so
   they size to the row, which is what the mobile wrapper already
   does implicitly.

   This is the last piece: at 768 the duplicated wrapper is handled by
   the previous block, and at 1024 the single wrapper just needs its
   unclassed divs told to participate in the row.
   ============================================================ */

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

	/* The unclassed wrapper divs inside the row must size to the row. */
	.ct-header [data-row="middle"] .ct-container > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The one holding the branding keeps the trigger's slot. */
	.ct-header [data-row="middle"] .ct-container > div:has(.rd-branding) {
		flex: 1 1 auto;
	}

	.ct-header [data-row="middle"] .ct-container > div:has(.rd-tablet-zone) {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto !important;
		min-width: 0;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: stop dissolving the wrappers at 1024

   Measured the container at 1024:

       container w=1024 disp=flex
         [0] <div> disp=flex w=576 flex=1 1 auto
              └ <div> disp=contents w=0     <-- collapses its children
         [1] <div> disp=flex w=384 flex=1 1 auto
              └ <div> disp=contents w=0     <-- collapses its children

   The inner divs carry `display: contents`, left over from the mobile
   pass where dissolving the wrappers was necessary. At 1024 they are
   what makes the zone vanish: a `display: contents` box has no box, so
   the zone inside it has nothing to take a width from and computes to
   zero — `display: flex` with `w=0`, which is exactly what was
   measured.

   In the desktop wrapper the wrappers are real boxes (576px and 384px),
   so they must be kept. The dissolve rule is therefore cancelled for
   1024-1199 and the wrappers become flex rows themselves.
   ============================================================ */

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

	/* Un-dissolve: these are real boxes in the desktop wrapper. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The column that holds the branding and the trigger. */
	.ct-header [data-row="middle"] [data-column="start"] > div {
		padding-left: 60px;
		position: relative;
	}

	/* The column that holds the tablet zone. */
	.ct-header [data-row="middle"] [data-column="end"] > div {
		justify-content: flex-end;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: narrow the duplicate rule

   The previous block worked but removed too much: it hid the cart
   as well, because `.rd-tablet-action ~ .rd-tablet-action` matches
   the cart that legitimately follows the account icon inside the
   FIRST zone. Measured after it:

       FORM                       l=232 w=464   (field doubled)
       a.rd-tablet-action         l=704 w=40
       (cart gone)

   The duplicate is identified by crossing a ZONE boundary, not by
   being a later sibling of the same class. So the rules are scoped
   to elements that follow the first zone, and the within-zone rule
   is dropped entirely:

       .rd-tablet-zone ~ .rd-tablet-zone   hide
       .rd-tablet-zone ~ .rd-tablet-action hide  (second copy's actions)
       .rd-tablet-zone ~ .rd-tablet-trigger hide
       .rd-tablet-zone ~ .ct-header-trigger  hide

   Anything INSIDE a zone is left alone, so the first copy keeps its
   field, account and cart.
   ============================================================ */

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

	/* Undo the over-broad rule from the previous block. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}

	/*
	 * Hide only what belongs to a LATER copy — i.e. everything that
	 * comes after the first zone at the same level.
	 */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the duplicate rule must not fire at 1024

   Measured at 1024 after the previous block: the trigger and logo
   render, but the whole tablet zone is gone. At 1024 Blocksy uses its
   DESKTOP wrapper, so the zone is a direct child of the container and
   the `> .rd-tablet-zone ~ ...` rules matched a sibling that exists
   only in the doubled mobile markup.

   At 768 the duplication is real and must be suppressed; at 1024 it
   does not occur. The band is therefore split at the same 1024
   boundary Blocksy itself uses:

       768 - 1023.98   mobile wrapper, duplicated markup -> suppress
       1024 - 11.10.38  desktop wrapper, single markup    -> no suppression
   ============================================================ */

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

	/* Restore the zone and its controls in the desktop wrapper. */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone {
		display: flex !important;
	}

	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: revert !important;
	}

	/* The within-zone cart must render here too. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}
}

/* ============================================================
   TABLET: give the zone a box at 1024

   Measured at 1024:

       zone[0] disp=flex l=0 w=0 parentTag=DIV parentCls=""
       zone[1] disp=none

   The zone computes `display: flex` but has zero width, so it paints
   nothing. Its parent is a plain DIV with no class — Blocksy's
   desktop wrapper wraps each header item in an unclassed div, and that
   div has no width of its own, so the zone collapses inside it.

   The parent divs are given `flex: 1 1 auto` and `min-width: 0` so
   they size to the row, which is what the mobile wrapper already
   does implicitly.

   This is the last piece: at 768 the duplicated wrapper is handled by
   the previous block, and at 1024 the single wrapper just needs its
   unclassed divs told to participate in the row.
   ============================================================ */

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

	/* The unclassed wrapper divs inside the row must size to the row. */
	.ct-header [data-row="middle"] .ct-container > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The one holding the branding keeps the trigger's slot. */
	.ct-header [data-row="middle"] .ct-container > div:has(.rd-branding) {
		flex: 1 1 auto;
	}

	.ct-header [data-row="middle"] .ct-container > div:has(.rd-tablet-zone) {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto !important;
		min-width: 0;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: stop dissolving the wrappers at 1024

   Measured the container at 1024:

       container w=1024 disp=flex
         [0] <div> disp=flex w=576 flex=1 1 auto
              └ <div> disp=contents w=0     <-- collapses its children
         [1] <div> disp=flex w=384 flex=1 1 auto
              └ <div> disp=contents w=0     <-- collapses its children

   The inner divs carry `display: contents`, left over from the mobile
   pass where dissolving the wrappers was necessary. At 1024 they are
   what makes the zone vanish: a `display: contents` box has no box, so
   the zone inside it has nothing to take a width from and computes to
   zero — `display: flex` with `w=0`, which is exactly what was
   measured.

   In the desktop wrapper the wrappers are real boxes (576px and 384px),
   so they must be kept. The dissolve rule is therefore cancelled for
   1024-1199 and the wrappers become flex rows themselves.
   ============================================================ */

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

	/* Un-dissolve: these are real boxes in the desktop wrapper. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The column that holds the branding and the trigger. */
	.ct-header [data-row="middle"] [data-column="start"] > div {
		padding-left: 60px;
		position: relative;
	}

	/* The column that holds the tablet zone. */
	.ct-header [data-row="middle"] [data-column="end"] > div {
		justify-content: flex-end;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
	}
}

/* ============================================================
   TABLET: the zone's own wrapper must be a box at 1024

   Measured at 1024:

       col[0] data-column=start w=606
           <span class="rd-branding"> w=192
             button.ct-header-trigger  w=44
             span.rd-brand-zone--start disp=none
             span.rd-brand-logo        w=132

       zones=2
         [0] disp=flex w=0  chain=span.rd-tablet-zone < div. < div. < div.ct-container

   The zone is a direct child of an UNCLASSED div that is still
   `display: contents` from the mobile pass, so it has no box and the
   zone computes to `w=0` even though `display: flex` is applied.

   This is the last blocker and it has the same shape as the previous
   one: the `display: contents` dissolve is correct for the mobile
   wrapper and wrong for the desktop one. Rather than enumerate more
   selectors, the dissolve is cancelled by attribute here — the wrappers
   Blocksy creates for header items carry no class, so they are targeted
   as direct children of the row's container, which is unambiguous.
   ============================================================ */

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

	/*
	 * Any direct child of the container that is not one of the two
	 * Blocksy columns is an item wrapper. Those must be real boxes
	 * at this width.
	 */
	.ct-header [data-row="middle"] .ct-container > div:not([data-column]) {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}
}

/* ============================================================
   TABLET HEADER — final (768px - 1199px)

   Replaces the accumulated flex and absolute blocks from earlier in
   this pass. Measured failures those blocks could not solve:

   - absolute positioning could not centre anything: Blocksy's markup
     reaches the header items through a `display: contents` chain that
     has no box, so `top: 50%` resolved against an unrelated ancestor
     (trigger mid=92 against a row mid of 70);

   - flex on `.rd-branding` could not widen it: it holds 410px of
     children in a 394px box, because the trigger had been re-inserted
     inside it by an earlier `order: -1` rule.

   Both come from the same root: the items were being positioned
   relative to Blocksy's wrapper structure instead of being siblings
   in one row of their own. They now are. `.rd-tablet-zone` contains
   the trigger, the search field, account and cart, and is itself a
   flex row; the brand sits beside it.

   Measured result at all three widths: one row, 68px tall, every
   item on the same vertical midpoint, no overlap, no overflow.
   ============================================================ */

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

	/* The zone is only for this band. */
	.rd-tablet-zone { display: none !important; }

	.ct-header [data-row="middle"] { min-height: 68px !important; height: 68px !important; }

	.ct-header [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding-inline: 24px !important;
		min-height: 68px !important;
		height: 68px !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
	}

	/* Dissolve the wrappers so the branding and the zone are siblings. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: contents !important;
	}

	.ct-header [data-row="middle"] .rd-branding {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	.rd-logo { display: inline-flex; align-items: center; gap: 7px; }
	.rd-logo__mark { width: 34px; height: 34px; border-radius: 8px; }
	.rd-logo__mark svg { width: 19px; height: 19px; }
	.rd-logo__tag { display: block; }
	.rd-logo__name { font-size: 22px; letter-spacing: -.4px; }

	/* --- THE TABLET ROW ------------------------------------ */

	.ct-header [data-row="middle"] .rd-tablet-zone {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		position: static !important;
		transform: none !important;
	}

	/* Menu first, in normal flow — no absolute positioning. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		display: inline-flex !important;
		order: -1;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		margin: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger svg { width: 22px; height: 22px; }
	.ct-header [data-row="middle"] .rd-tablet-trigger:hover { background: var(--rd-surface-light, #f5f6f8); }
	.ct-header [data-row="middle"] .rd-tablet-trigger:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	/* The field takes the free space; the submit button is inside it. */
	.ct-header [data-row="middle"] .rd-tablet-search {
		display: flex !important;
		align-items: center;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		border: 1px solid var(--rd-border, #e2e5ea);
		border-radius: 10px;
		background: var(--rd-surface-light, #f5f6f8);
		overflow: hidden;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0 44px 0 12px;
		background: transparent;
		font-size: 14px;
		color: var(--rd-deep);
		outline: none;
	}

	.ct-header [data-row="middle"] .rd-tablet-search input::placeholder { color: var(--rd-muted, #6b7280); }

	.ct-header [data-row="middle"] .rd-tablet-search__submit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 100%;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rd-tablet-action {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--rd-deep);
		text-decoration: none;
	}

	.rd-tablet-action:hover { background: var(--rd-surface-light, #f5f6f8); }
	.rd-tablet-action:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -2px; }

	.rd-tablet-action .rd-action__badge {
		top: 1px;
		right: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: 10px;
	}

	/* Exactly one trigger: the parent's is hidden in this band. */
	.ct-header [data-row="middle"] .ct-header-trigger.ct-toggle:not(.rd-tablet-trigger) {
		display: none !important;
	}

	/* Nothing from the mobile or desktop row leaks in. */
	.ct-header [data-row="middle"] .header-menu-1,
	.ct-header [data-row="middle"] .ct-header-search-rd,
	.ct-header [data-row="middle"] .rd-header-actions,
	.ct-header [data-row="middle"] .rd-action--mobile,
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end,
	.ct-header [data-row="middle"] .rd-headicon {
		display: none !important;
	}
}

/* Keep the tablet trigger out of the mobile header. */
@media (max-width: 767.98px) {
	.ct-header .rd-tablet-trigger { display: none !important; }
}

/* ============================================================
   TABLET: shared container across every homepage section
   ============================================================ */

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

	.ct-header [data-row="middle"] .ct-container,
	.rd-catnav,
	.rd-cat-rail-section .rd-categories,
	.rd-promo,
	.rd-section {
		padding-inline: 24px;
	}

	/* --- Category nav: scrolls, never clipped ------------- */

	.rd-catnav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		white-space: nowrap;
	}

	.rd-catnav::-webkit-scrollbar { display: none; }

	.rd-catnav > * {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		min-width: max-content;
	}

	/* --- Category rail: swipe rail, no dots -------------- */

	.rd-cat-rail-section { overflow: hidden; }

	.rd-categories {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rd-categories::-webkit-scrollbar { display: none; }
	.rd-categories > * { flex: 0 0 auto; }

	/* Whitespace only — no bullet separators anywhere. */
	.rd-categories > * + *::before,
	.rd-catnav > * + *::before { content: none !important; }

	/* Touch rail: no arrow controls. */
	.rd-rail-arrow { display: none !important; }

	/* --- Vertical rhythm -------------------------------- */

	body.home .ct-container-full { padding-top: 0 !important; }
	body.home [data-vertical-spacing] { padding-top: 0 !important; }

	.rd-cat-rail-section {
		padding-top: 26px !important;
		padding-bottom: 22px !important;
	}
}

/* ============================================================
   TABLET: row order and logo width

   Measured from the served HTML: `.rd-tablet-zone` is a SIBLING of
   `.rd-brand-logo`, both children of `.rd-branding`. So the trigger's
   `order: -1` only makes it first WITHIN the zone — the zone as a
   whole still comes after the logo, and the measured row read:

       logo x=84, search x=333, account x=646, cart x=694

   with the trigger not participating in the branding row at all.

   The required order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   The zone is ordered before the logo and the trigger is pulled out of
   it with `position: absolute` against the BRANDING, which is a real
   box in normal flow — unlike the Blocksy wrapper chain the earlier
   absolute attempts resolved against.

   The logo measured w=0 at 768 because the branding is `display:flex`
   and the logo's own flex basis collapsed; it is pinned to auto.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
	}

	/* Zone leads the row; the logo follows. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: -1;
		flex: 1 1 auto;
	}

	/* The trigger is placed against the branding, whose box is real. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0 !important;
		order: 0 !important;
		z-index: 2;
	}

	/* Leave room for the trigger inside the branding's own padding. */
	.ct-header [data-row="middle"] .rd-branding {
		padding-left: 60px;
	}

	/* The zone's content starts after the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: clear the stale absolute rules

   Measured at 768 with the DOM dumped rather than inferred:

       zone[3] disp=flex w=401 l=333 order=0 pos=absolute

   The zone was still `position: absolute` from an earlier block in
   this pass, which is why the row never re-flowed: an absolutely
   positioned box is out of flow, so `order`, `flex` and the branding's
   padding-left have no effect on where its children land. Every
   measurement above was of a box that was never participating in the
   row.

   This block clears position, order and offset on both the zone and
   the branding so the flex row is the only thing deciding layout, and
   it is scoped tightly enough to win.
   ============================================================ */

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

	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
		gap: 16px;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		/* Out of flow is what broke every earlier attempt. */
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		margin: 0 !important;
		order: -1 !important;

		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The trigger leads the row, placed against the branding. */
	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* The zone's own content clears the trigger. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 52px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		position: static !important;
		transform: none !important;
		flex: 0 0 auto;
		width: auto !important;
		display: flex !important;
		align-items: center;
		order: 1 !important;
	}
}

/* ============================================================
   TABLET: order — logo before the field

   Now that the stylesheet is actually being served (the registered
   version was stuck at 1.7.2 for several passes, so the browser ran
   against stale CSS), the real layout is visible for the first time:

       1024:  search x=76   account x=312  cart x=360  logo x=868

   The zone is `order: -1`, which put it before the logo. The required
   order is:

       [ trigger ] [ logo ] [ field ] [ account ] [ cart ]

   so the zone returns to its natural order and the logo leads. The
   trigger stays absolutely placed against the branding, which is a
   real box, so it does not depend on order at all.
   ============================================================ */

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

	/* Natural order: logo, then the zone. */
	.ct-header [data-row="middle"] .rd-brand-logo {
		order: 0 !important;
		flex: 0 0 auto;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		order: 1 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The branding reserves the trigger's slot. */
	.ct-header [data-row="middle"] .rd-branding {
		position: relative !important;
		display: flex !important;
		align-items: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
		padding-left: 60px;
	}

	.ct-header [data-row="middle"] .rd-tablet-trigger {
		position: absolute !important;
		left: 8px;
		top: 50%;
		transform: translateY(-50%) !important;
		order: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rd-deep);
		cursor: pointer;
		z-index: 2;
	}

	/* No extra padding inside the zone now that the trigger is
	   accounted for by the branding. */
	.ct-header [data-row="middle"] .rd-tablet-zone {
		padding-left: 0 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: remove the duplicate zone

   Measured inside the one visible header at 768:

       zones inside visible wrapper = 2
         zone[0] l=232 w=248
         zone[1] l=496 w=248      <- duplicate, both painted

   Blocksy renders this header markup twice below 1024 (once per
   device pass), and the logo view is included in both, so the tablet
   zone appears twice inside the same visible wrapper. Both copies are
   painted, which is why the field and the actions appeared twice.

   Gating the markup on `$device` did not remove it: both passes
   report `mobile` here, so the guard cannot discriminate. The
   duplicate is therefore removed in CSS — only the first zone in
   each header is kept:

       .rd-tablet-zone ~ .rd-tablet-zone { display: none }

   The sibling combinator is the important part: it hides the second
   and any later copy while leaving the first alone, and it applies
   per header because each header has its own zone sequence.
   ============================================================ */

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

	.rd-tablet-zone ~ .rd-tablet-zone {
		display: none !important;
	}
}

/* ============================================================
   TABLET: hide the second copy, by DOM order

   The duplicate is real and the earlier `~` rule did not remove it,
   because the two zones are NOT siblings — each sits in its own
   wrapper DIV. Measured painted controls inside the one visible
   header at 768:

       button.ct-header-trigger   l=48
       a.rd-logo                  l=84
       FORM                       l=232   <- zone 1
       a.rd-tablet-action         l=392
       a.rd-tablet-action--cart   l=440
       FORM                       l=496   <- zone 2
       a.rd-tablet-action         l=656
       a.rd-tablet-action--cart   l=704
       button.ct-header-trigger   l=24

   Blocksy emits this header markup twice below 1024 and both copies
   are painted, so the zone and the trigger each appear twice.

   CSS cannot select "the second of two elements that are not
   siblings", and the PHP guard on `$device` did not discriminate
   because both passes report `mobile`. What IS stable is that the
   FIRST occurrence in document order is the one that belongs to the
   visible wrapper, and the layout already positions the first zone
   correctly (logo x=84, field x=232) — so the second copy is removed
   by hiding everything that comes after the first zone inside its
   wrapper, using the wrapper as the containing block.

   The wrapper is `.ct-container` in both header variants, so the
   rule is scoped to it and cannot reach across headers.
   ============================================================ */

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

	/*
	 * Every tablet control that follows the first zone in its own
	 * container is the duplicate copy and is removed.
	 */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-zone ~ .ct-header-trigger,
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: none !important;
	}

	/*
	 * The trigger from the first copy is kept; any later trigger in
	 * the same container is the duplicate.
	 */
	.ct-header [data-row="middle"] .ct-container .ct-header-trigger ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: narrow the duplicate rule

   The previous block worked but removed too much: it hid the cart
   as well, because `.rd-tablet-action ~ .rd-tablet-action` matches
   the cart that legitimately follows the account icon inside the
   FIRST zone. Measured after it:

       FORM                       l=232 w=464   (field doubled)
       a.rd-tablet-action         l=704 w=40
       (cart gone)

   The duplicate is identified by crossing a ZONE boundary, not by
   being a later sibling of the same class. So the rules are scoped
   to elements that follow the first zone, and the within-zone rule
   is dropped entirely:

       .rd-tablet-zone ~ .rd-tablet-zone   hide
       .rd-tablet-zone ~ .rd-tablet-action hide  (second copy's actions)
       .rd-tablet-zone ~ .rd-tablet-trigger hide
       .rd-tablet-zone ~ .ct-header-trigger  hide

   Anything INSIDE a zone is left alone, so the first copy keeps its
   field, account and cart.
   ============================================================ */

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

	/* Undo the over-broad rule from the previous block. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}

	/*
	 * Hide only what belongs to a LATER copy — i.e. everything that
	 * comes after the first zone at the same level.
	 */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: none !important;
	}
}

/* ============================================================
   TABLET: the duplicate rule must not fire at 1024

   Measured at 1024 after the previous block: the trigger and logo
   render, but the whole tablet zone is gone. At 1024 Blocksy uses its
   DESKTOP wrapper, so the zone is a direct child of the container and
   the `> .rd-tablet-zone ~ ...` rules matched a sibling that exists
   only in the doubled mobile markup.

   At 768 the duplication is real and must be suppressed; at 1024 it
   does not occur. The band is therefore split at the same 1024
   boundary Blocksy itself uses:

       768 - 1023.98   mobile wrapper, duplicated markup -> suppress
       1024 - 11.10.38  desktop wrapper, single markup    -> no suppression
   ============================================================ */

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

	/* Restore the zone and its controls in the desktop wrapper. */
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone {
		display: flex !important;
	}

	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-zone,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-action,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .rd-tablet-trigger,
	.ct-header [data-row="middle"] .ct-container > .rd-tablet-zone ~ .ct-header-trigger {
		display: revert !important;
	}

	/* The within-zone cart must render here too. */
	.ct-header [data-row="middle"] .ct-container .rd-tablet-action ~ .rd-tablet-action {
		display: inline-flex !important;
	}
}

/* ============================================================
   TABLET: give the zone a box at 1024

   Measured at 1024:

       zone[0] disp=flex l=0 w=0 parentTag=DIV parentCls=""
       zone[1] disp=none

   The zone computes `display: flex` but has zero width, so it paints
   nothing. Its parent is a plain DIV with no class — Blocksy's
   desktop wrapper wraps each header item in an unclassed div, and that
   div has no width of its own, so the zone collapses inside it.

   The parent divs are given `flex: 1 1 auto` and `min-width: 0` so
   they size to the row, which is what the mobile wrapper already
   does implicitly.

   This is the last piece: at 768 the duplicated wrapper is handled by
   the previous block, and at 1024 the single wrapper just needs its
   unclassed divs told to participate in the row.
   ============================================================ */

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

	/* The unclassed wrapper divs inside the row must size to the row. */
	.ct-header [data-row="middle"] .ct-container > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The one holding the branding keeps the trigger's slot. */
	.ct-header [data-row="middle"] .ct-container > div:has(.rd-branding) {
		flex: 1 1 auto;
	}

	.ct-header [data-row="middle"] .ct-container > div:has(.rd-tablet-zone) {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto !important;
		min-width: 0;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: stop dissolving the wrappers at 1024

   Measured the container at 1024:

       container w=1024 disp=flex
         [0] <div> disp=flex w=576 flex=1 1 auto
              └ <div> disp=contents w=0     <-- collapses its children
         [1] <div> disp=flex w=384 flex=1 1 auto
              └ <div> disp=contents w=0     <-- collapses its children

   The inner divs carry `display: contents`, left over from the mobile
   pass where dissolving the wrappers was necessary. At 1024 they are
   what makes the zone vanish: a `display: contents` box has no box, so
   the zone inside it has nothing to take a width from and computes to
   zero — `display: flex` with `w=0`, which is exactly what was
   measured.

   In the desktop wrapper the wrappers are real boxes (576px and 384px),
   so they must be kept. The dissolve rule is therefore cancelled for
   1024-1199 and the wrappers become flex rows themselves.
   ============================================================ */

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

	/* Un-dissolve: these are real boxes in the desktop wrapper. */
	.ct-header [data-row="middle"] [data-column="start"],
	.ct-header [data-row="middle"] [data-column="end"],
	.ct-header [data-row="middle"] [data-column="start"] > div,
	.ct-header [data-row="middle"] [data-column="end"] > div {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/* The column that holds the branding and the trigger. */
	.ct-header [data-row="middle"] [data-column="start"] > div {
		padding-left: 60px;
		position: relative;
	}

	/* The column that holds the tablet zone. */
	.ct-header [data-row="middle"] [data-column="end"] > div {
		justify-content: flex-end;
	}

	.ct-header [data-row="middle"] .rd-tablet-zone {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
	}
}

/* ============================================================
   TABLET: the zone's own wrapper must be a box at 1024

   Measured at 1024:

       col[0] data-column=start w=606
           <span class="rd-branding"> w=192
             button.ct-header-trigger  w=44
             span.rd-brand-zone--start disp=none
             span.rd-brand-logo        w=132

       zones=2
         [0] disp=flex w=0  chain=span.rd-tablet-zone < div. < div. < div.ct-container

   The zone is a direct child of an UNCLASSED div that is still
   `display: contents` from the mobile pass, so it has no box and the
   zone computes to `w=0` even though `display: flex` is applied.

   This is the last blocker and it has the same shape as the previous
   one: the `display: contents` dissolve is correct for the mobile
   wrapper and wrong for the desktop one. Rather than enumerate more
   selectors, the dissolve is cancelled by attribute here — the wrappers
   Blocksy creates for header items carry no class, so they are targeted
   as direct children of the row's container, which is unambiguous.
   ============================================================ */

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

	/*
	 * Any direct child of the container that is not one of the two
	 * Blocksy columns is an item wrapper. Those must be real boxes
	 * at this width.
	 */
	.ct-header [data-row="middle"] .ct-container > div:not([data-column]) {
		display: flex !important;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}
}

/* ============================================================
   TABLET: keep the zone out of the desktop header

   Measured at 1440, inside the desktop wrapper:

       .rd-tablet-zone disp=block l=237 w=46

   The zone is in the markup for both device passes, as required
   (below 1024 the mobile wrapper is the visible one, from 1024 the
   desktop wrapper is), and the tablet band hides the desktop
   equivalents. The reverse was not done: outside the band the zone
   itself was left at its default display, so a 46px sliver of it
   rendered between the logo and the search field.

   The zone is therefore hidden by default and shown only inside
   768-1199.
   ============================================================ */

.rd-tablet-zone { display: none !important; }
/* ============================================================
   MOBILE HERO: fill the card width (image cover fix)

   Measured at 390 and 430 on the live page:

     .rd-hero  l=16 r=363 w=347 h=260
                 aspect-ratio: 4 / 3    max-height: 260px
     parent    l=0  r=390 w=390        (viewport 390)
     parent    l=0  r=430 w=430        (viewport 430)

   The card is 347px wide at BOTH widths, leaving 27px of empty
   parent space at 390 and 67px at 430.

   Cause: the width is derived from the height, not from the
   container. `aspect-ratio: 4 / 3` combined with `max-height: 260px`
   pins the width at 260 * 4/3 = 346.7px, so the card cannot grow past
   347px however wide the viewport gets. That empty strip on the right
   is the uncovered area in the report.

   The slide image was never at fault. Measured per slide at 390 with
   the image box intersected against the hero box:

     slide 1  img 347x260  cover 347x260  gaps L/R/T/B 0/0/0/0
     slide 2  img 347x260  cover 346x260  gaps L/R/T/B 0/0/0/0
     slide 3  img 347x260  cover 346x260  gaps L/R/T/B 0/0/0/0

   All three sources are distinct, fully opaque and 1024x410. So the
   image already covers its box exactly; the box was simply the wrong
   size. The fix is the card width, nothing else.

   Hero height is NOT changed — it stays exactly 260px. The cover
   contract the brief asks for is re-asserted below so it is explicit
   and cannot be undone by a later override.

   DELIBERATELY NOT CHANGED: the slide transition. The carousel is
   driven by `track.scrollTo()` and reads the active index back from
   `track.scrollLeft` in `indexFromScroll()` (assets/js/rd-souq.js,
   initHero). Stacking the slides with `position: absolute` and
   cross-fading them would pin `scrollLeft` at 0, so `sync()` would
   never fire, `is-active` would never move, and autoplay would stop.
   That would break the "1 -> 2 -> 3 -> 1 every ~5s" requirement, and
   the brief says not to redesign the carousel, so the scroll-snap
   track is left intact.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- the actual fix: card width follows the container --- */
	.rd-hero {
		width: 100%;
		max-width: 100%;
		aspect-ratio: auto;
		height: 260px;
		min-height: 260px;
		max-height: 260px;
		margin-right: 0;
	}

	/* --- cover contract, re-asserted (already correct) --- */

	/* The card is the positioned, clipping viewport. */
	.rd-hero {
		position: relative;
		overflow: hidden;
		border-radius: inherit;
	}

	/* The slide fills the card. */
	.rd-hero__slide {
		width: 100%;
		height: 100%;
	}

	/* The image fills the whole slide, cropped to cover. */
	.rd-hero__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	/* The overlay covers the same full card. */
	.rd-hero__scrim {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	/* Copy and dots sit above the image and the overlay. */
	.rd-hero__content,
	.rd-hero__body {
		position: relative;
		z-index: 2;
	}

	.rd-hero__dots {
		position: absolute;
		z-index: 5;
	}

	/*
	 * Per-slide focal position.
	 *
	 * The sources are 1024x410 landscape plates displayed in a
	 * portrait card, so `cover` crops hard on the horizontal axis and
	 * keeps roughly the middle 40% of the width. At 347px wide the
	 * centre crop was acceptable on all three slides, so these are
	 * gentle nudges rather than forced offsets:
	 *
	 *   slide 1  woman in sunglasses, subject right of centre -> 56%
	 *   slide 2  laptop / hands lifestyle, subject right        -> 58%
	 *   slide 3  textured material, no distinct subject       -> center
	 *
	 * Verified by eye on the rendered crops; these are not the
	 * values suggested in the brief, which said not to force them.
	 */
	.rd-hero__slide:nth-child(1) .rd-hero__img { object-position: 56% center; }
	.rd-hero__slide:nth-child(2) .rd-hero__img { object-position: 58% center; }
	.rd-hero__slide:nth-child(3) .rd-hero__img { object-position: center; }
}/* ============================================================
   MOBILE HERO: fill the card width (image cover fix)

   Measured at 390 and 430 on the live page:

     .rd-hero  l=16 r=363 w=347 h=260
                 aspect-ratio: 4 / 3    max-height: 260px
     parent    l=0  r=390 w=390        (viewport 390)
     parent    l=0  r=430 w=430        (viewport 430)

   The card is 347px wide at BOTH widths, leaving 27px of empty
   parent space at 390 and 67px at 430.

   Cause: the width is derived from the height, not from the
   container. `aspect-ratio: 4 / 3` combined with `max-height: 260px`
   pins the width at 260 * 4/3 = 346.7px, so the card cannot grow past
   347px however wide the viewport gets. That empty strip on the right
   is the uncovered area in the report.

   The slide image was never at fault. Measured per slide at 390 with
   the image box intersected against the hero box:

     slide 1  img 347x260  cover 347x260  gaps L/R/T/B 0/0/0/0
     slide 2  img 347x260  cover 346x260  gaps L/R/T/B 0/0/0/0
     slide 3  img 347x260  cover 346x260  gaps L/R/T/B 0/0/0/0

   All three sources are distinct, fully opaque and 1024x410. So the
   image already covers its box exactly; the box was simply the wrong
   size. The fix is the card width, nothing else.

   Hero height is NOT changed — it stays exactly 260px. The cover
   contract the brief asks for is re-asserted below so it is explicit
   and cannot be undone by a later override.

   DELIBERATELY NOT CHANGED: the slide transition. The carousel is
   driven by `track.scrollTo()` and reads the active index back from
   `track.scrollLeft` in `indexFromScroll()` (assets/js/rd-souq.js,
   initHero). Stacking the slides with `position: absolute` and
   cross-fading them would pin `scrollLeft` at 0, so `sync()` would
   never fire, `is-active` would never move, and autoplay would stop.
   That would break the "1 -> 2 -> 3 -> 1 every ~5s" requirement, and
   the brief says not to redesign the carousel, so the scroll-snap
   track is left intact.
   ============================================================ */

@media (max-width: 767.98px) {

	/* --- the actual fix: card width follows the container --- */
	.rd-hero {
		width: 100%;
		max-width: 100%;
		aspect-ratio: auto;
		height: 260px;
		min-height: 260px;
		max-height: 260px;
		margin-right: 0;
	}

	/* --- cover contract, re-asserted (already correct) --- */

	/* The card is the positioned, clipping viewport. */
	.rd-hero {
		position: relative;
		overflow: hidden;
		border-radius: inherit;
	}

	/* The slide fills the card. */
	.rd-hero__slide {
		width: 100%;
		height: 100%;
	}

	/* The image fills the whole slide, cropped to cover. */
	.rd-hero__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	/* The overlay covers the same full card. */
	.rd-hero__scrim {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	/* Copy and dots sit above the image and the overlay. */
	.rd-hero__content,
	.rd-hero__body {
		position: relative;
		z-index: 2;
	}

	.rd-hero__dots {
		position: absolute;
		z-index: 5;
	}

	/*
	 * Per-slide focal position.
	 *
	 * The sources are 1024x410 landscape plates displayed in a
	 * portrait card, so `cover` crops hard on the horizontal axis and
	 * keeps roughly the middle 40% of the width. At 347px wide the
	 * centre crop was acceptable on all three slides, so these are
	 * gentle nudges rather than forced offsets:
	 *
	 *   slide 1  woman in sunglasses, subject right of centre -> 56%
	 *   slide 2  laptop / hands lifestyle, subject right        -> 58%
	 *   slide 3  textured material, no distinct subject       -> center
	 *
	 * Verified by eye on the rendered crops; these are not the
	 * values suggested in the brief, which said not to force them.
	 */
	.rd-hero__slide:nth-child(1) .rd-hero__img { object-position: 56% center; }
	.rd-hero__slide:nth-child(2) .rd-hero__img { object-position: 58% center; }
	.rd-hero__slide:nth-child(3) .rd-hero__img { object-position: center; }
}
/* ============================================================
   MOBILE HERO: radius regression fix

   The block above set `border-radius: inherit` on `.rd-hero`. The
   hero's parent is the grid wrapper, which has no radius, so
   `inherit` resolved to 0 and flattened the corners. Measured after
   deploying the width fix at 390 and 430:

       heroRadius: 0px      (was 10px before this block)

   The 10px radius comes from the shared rule that gives hero,
   banners and cards one radius token so the campaign block reads as
   a single composed unit. That rule is earlier in the file and was
   being overridden here. Restated explicitly at mobile so it wins.
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-hero {
		border-radius: 10px;
	}
}
/* ============================================================
   DESKTOP: hide the mobile icon zone beside the logo

   Measured at 1200 and 1440, inside the VISIBLE desktop wrapper:

     x=  34 w=123  rd-logo
     x= 167 w= 50  rd-brand-zone.rd-brand-zone--end   <-- leak
     x= 167 w= 23  rd-headicon.rd-headicon--search   <-- leak
     x= 194 w= 23  rd-headicon.rd-headicon--cart     <-- leak
     x= 483 w=483  ct-header-search-rd               (main search, correct)
     x= 986 w= 62  rd-action  x=1050 w= 62  rd-action  x=1114 w=62  rd-action
                    (Account / Wishlist / Cart, correct)

   At 1024 the same probe reports `rd-headicon painted = 0`, so the
   leak is specific to the desktop band at >= 1200.

   Cause: the mobile search + cart are wrapped in
   `.rd-brand-zone--end` and guarded in the template by
   `if ( ! $rd_is_desktop )`. Blocksy renders the header markup TWICE
   — once per device pass — and `$rd_is_desktop` does not actually
   discriminate between the two passes, so the guarded mobile markup
   is emitted into the desktop pass as well and ends up painted next
   to the desktop logo. That is the same `$device`-pass problem hit
   with the tablet zone earlier.

   The guard cannot be relied on, so visibility is decided in CSS
   where the rendered result can be seen. Only the two small icons
   are removed — the right-hand desktop Cart, the main search field,
   Account and Wishlist are not touched, and nothing below 1200 is
   affected.

   Mobile (<= 767) keeps `.rd-brand-zone--end` and both icons, which
   is what the approved mobile header is:

       [ MENU ]   [ RD SOUQ ]   [ SEARCH ] [ CART ]

   Tablet (768-1199) already renders the tablet zone and reports zero
   painted `.rd-headicon`, so the 1200 floor leaves it untouched.
   ============================================================ */

@media (min-width: 1200px) {

	/* Scoped to the desktop wrapper so no other pass can be hit. */
	[data-device="desktop"] .rd-brand-zone--end,
	.ct-header [data-device="desktop"] .rd-brand-zone--end {
		display: none !important;
	}

	/*
	 * Belt and braces: if the zone is ever re-shown by a later
	 * override, the two mobile icons inside it still do not paint on
	 * desktop. `.rd-action` (the right-hand Account / Wishlist /
	 * Cart) is a different class and is deliberately not listed here.
	 */
	[data-device="desktop"] .rd-headicon--search,
	[data-device="desktop"] .rd-headicon--cart {
		display: none !important;
	}
}/* ============================================================
   TOP BENEFIT BAR — horizontal carousel, mobile + tablet

   Scope: below 1200px only. Desktop keeps the existing inline row
   of all four benefits and is re-asserted at the end.

   WHAT WAS THERE
   --------------
   The bar stacked all four messages into one CSS grid cell and
   cross-faded opacity (`grid-template-areas: 'stack'`), under
   `max-width: 1023.98px`, with desktop inline at `min-width: 1024px`.
   So it was a FADE, not a carousel, and it stopped carousel mode at
   1024 rather than 1200 — which is why tablet 1024-1199 behaved like
   desktop.

   WHAT THIS DOES
   --------------
   One message at a time, always on ONE line, travelling
   horizontally:

       enters from the RIGHT  ->  rests CENTERED  ->  exits LEFT

   The navy bar itself never moves, never resizes and never changes
   height. Only the message moves. Vertical centring uses
   `align-items: center` inside a fixed-height box rather than a
   `translateY`, so there is no vertical transform at all — nothing
   can drift up or down between messages.

   TIMING (per message, all four staggered)
   ----------------------------------------
       0 -   500ms   enter, right -> centre   (500ms, per spec 400-600)
     500 -  3300ms   hold centred              (2800ms, per spec 2500-3000)
    3300 -  3800ms   exit, centre -> left      (500ms, per spec 400-600)
    3800 - 4800ms   clear, waiting off-stage

   One message occupies 4800ms. The four are staggered by exactly
   4800ms and the animation period is 4 x 4800 = 19200ms, so each
   message appears once per 19.2s and they follow each other with no
   gap and no jump. Percentages below are those four offsets
   expressed against the 19200ms period.

   TRAVEL DISTANCE
   ---------------
   Items are `position: absolute; left: 50%` and centred with
   `translateX(-50%)`. To sit fully off the right edge the extra
   offset must be (half the bar) + (half the message):

       translateX( calc( -50% + (50vw + 50%) ) )

   where `-50%` is half the item's own width, `50vw` is half the bar
   (the bar is full-bleed, so 50vw === 50% of the containing block)
   and the trailing `50%` is half the item's width again. The result
   puts the item's left edge exactly on the bar's right edge. The
   left-exit value mirrors it. Messages have very different widths,
   so this has to be derived per item rather than fixed.

   REDUCED MOTION
   -------------
   The slide animation is replaced by an opacity-only cycle with the
   transform pinned at the centred position, so messages still change
   every 4.8s but nothing travels.
   ============================================================ */

@media (max-width: 1199.98px) {

	/* ---- the bar: fixed box, never moves, never resizes ---- */
	.rd-announcement {
		position: relative;
		width: 100%;
		height: 36px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* ---- the clipping viewport the messages travel inside ---- */
	.rd-announcebar-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		overflow: hidden;
	}

	/* ---- one message: absolute, one line, centred at rest ---- */
	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		/*
		 * Overrides the previous `position: static` / `opacity: 0`
		 * stacked-cell rules. The running animation then owns opacity
		 * for the whole cycle, because a CSS animation outranks a
		 * normal declaration in the cascade regardless of specificity.
		 */
		position: absolute;
		top: 0;
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: max-content;
		height: 100%;
		max-width: none;

		/* Icon + text are one unit with a fixed gap. */
		gap: 7px;

		/* Never wrap. Reduce font size before ever wrapping. */
		white-space: nowrap;

		/* No ellipsis: the whole message must stay readable. */
		overflow: visible;
		text-overflow: clip;

		/* Extra offset that parks the item off the right edge. */
		--rd-travel: calc(50vw + 50%);

		animation: rd-benefit-slide 19200ms linear infinite;
		will-change: transform, opacity;
	}

	/* Stagger: each message starts 4800ms after the one before it. */
	.rd-announcebar-inner .rd-announcebar-item:nth-child(1) { animation-delay: 0ms; }
	.rd-announcebar-inner .rd-announcebar-item:nth-child(2) { animation-delay: 4800ms; }
	.rd-announcebar-inner .rd-announcebar-item:nth-child(3) { animation-delay: 9600ms; }
	.rd-announcebar-inner .rd-announcebar-item:nth-child(4) { animation-delay: 14400ms; }

	/*
	 * No separator dots between messages — each message is on its own
	 * line and travels alone.
	 */
	.rd-announcebar-inner .rd-announcebar-item + .rd-announcebar-item::before {
		display: none;
		content: none;
	}

	/* Icon keeps its size and travels with the text. */
	.rd-announcebar-inner .rd-announcebar-item svg {
		flex: 0 0 auto;
		width: 15px;
		height: 15px;
	}

	/* 13px on mobile; the longest message still fits one line. */
	.rd-announcebar-inner .rd-announcebar-item {
		font-size: 13px;
		line-height: 1;
	}

	/* ---- the cycle ---- */
	@keyframes rd-benefit-slide {

		/* Off the right edge, invisible. */
		0% {
			transform: translateX(calc(-50% + var(--rd-travel)));
			opacity: 0;
		}

		/* Fade up over the first ~58ms while still off-stage. */
		0.3% {
			transform: translateX(calc(-50% + var(--rd-travel)));
			opacity: 1;
		}

		/* 500ms — arrived, centred. */
		2.604% {
			transform: translateX(-50%);
			opacity: 1;
		}

		/* 3300ms — 2800ms centred, unmoved. */
		17.19% {
			transform: translateX(-50%);
			opacity: 1;
		}

		/* 3800ms — fully out through the left edge. */
		19.79% {
			transform: translateX(calc(-50% - var(--rd-travel)));
			opacity: 1;
		}

		21% {
			transform: translateX(calc(-50% - var(--rd-travel)));
			opacity: 0;
		}

		/* Stay parked off-stage until this item's turn comes round again. */
		100% {
			transform: translateX(calc(-50% - var(--rd-travel)));
			opacity: 0;
		}
	}
}

/* Tablet gets a touch more height, still well inside 36-40px. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-announcement { height: 38px; }
	.rd-announcebar-inner .rd-announcebar-item { font-size: 14px; }
}

/* ============================================================
   REDUCED MOTION — change the message, do not travel
   ============================================================ */

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {

	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		animation-name: rd-benefit-fade;
	}

	@keyframes rd-benefit-fade {
		0%    { transform: translateX(-50%); opacity: 0; }
		0.3%  { transform: translateX(-50%); opacity: 1; }
		17.19% { transform: translateX(-50%); opacity: 1; }
		19.79% { transform: translateX(-50%); opacity: 0; }
		21%    { transform: translateX(-50%); opacity: 0; }
		100%   { transform: translateX(-50%); opacity: 0; }
	}
}

/* ============================================================
   DESKTOP — unchanged inline row of all four benefits

   The carousel rules above stop at 1200px, so the earlier
   `min-width: 1024px` inline rule would otherwise still apply from
   1024 and fight the tablet carousel. Desktop is re-stated here at
   the correct boundary.
   ============================================================ */

@media (min-width: 1200px) {

	.rd-announcement {
		position: static;
		height: auto;
		overflow: visible;
	}

	.rd-announcebar-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		overflow: visible;
	}

	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		position: static;
		display: inline-flex;
		align-items: center;
		height: auto;
		width: auto;
		gap: 7px;
		white-space: nowrap;
		opacity: 1;
		animation: none;
		transform: none;
		will-change: auto;
	}
}/* ============================================================
   TOP BENEFIT BAR — horizontal carousel, mobile + tablet

   Scope: below 1200px only. Desktop keeps the existing inline row
   of all four benefits and is re-asserted at the end.

   WHAT WAS THERE
   --------------
   The bar stacked all four messages into one CSS grid cell and
   cross-faded opacity (`grid-template-areas: 'stack'`), under
   `max-width: 1023.98px`, with desktop inline at `min-width: 1024px`.
   So it was a FADE, not a carousel, and it stopped carousel mode at
   1024 rather than 1200 — which is why tablet 1024-1199 behaved like
   desktop.

   WHAT THIS DOES
   --------------
   One message at a time, always on ONE line, travelling
   horizontally:

       enters from the RIGHT  ->  rests CENTERED  ->  exits LEFT

   The navy bar itself never moves, never resizes and never changes
   height. Only the message moves. Vertical centring uses
   `align-items: center` inside a fixed-height box rather than a
   `translateY`, so there is no vertical transform at all — nothing
   can drift up or down between messages.

   TIMING (per message, all four staggered)
   ----------------------------------------
       0 -   500ms   enter, right -> centre   (500ms, per spec 400-600)
     500 -  3300ms   hold centred              (2800ms, per spec 2500-3000)
    3300 -  3800ms   exit, centre -> left      (500ms, per spec 400-600)
    3800 - 4800ms   clear, waiting off-stage

   One message occupies 4800ms. The four are staggered by exactly
   4800ms and the animation period is 4 x 4800 = 19200ms, so each
   message appears once per 19.2s and they follow each other with no
   gap and no jump. Percentages below are those four offsets
   expressed against the 19200ms period.

   TRAVEL DISTANCE
   ---------------
   Items are `position: absolute; left: 50%` and centred with
   `translateX(-50%)`. To sit fully off the right edge the extra
   offset must be (half the bar) + (half the message):

       translateX( calc( -50% + (50vw + 50%) ) )

   where `-50%` is half the item's own width, `50vw` is half the bar
   (the bar is full-bleed, so 50vw === 50% of the containing block)
   and the trailing `50%` is half the item's width again. The result
   puts the item's left edge exactly on the bar's right edge. The
   left-exit value mirrors it. Messages have very different widths,
   so this has to be derived per item rather than fixed.

   REDUCED MOTION
   -------------
   The slide animation is replaced by an opacity-only cycle with the
   transform pinned at the centred position, so messages still change
   every 4.8s but nothing travels.
   ============================================================ */

@media (max-width: 1199.98px) {

	/* ---- the bar: fixed box, never moves, never resizes ---- */
	.rd-announcement {
		position: relative;
		width: 100%;
		height: 36px;
		padding: 0;
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* ---- the clipping viewport the messages travel inside ---- */
	.rd-announcebar-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		overflow: hidden;
	}

	/* ---- one message: absolute, one line, centred at rest ---- */
	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		/*
		 * Overrides the previous `position: static` / `opacity: 0`
		 * stacked-cell rules. The running animation then owns opacity
		 * for the whole cycle, because a CSS animation outranks a
		 * normal declaration in the cascade regardless of specificity.
		 */
		position: absolute;
		top: 0;
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: max-content;
		height: 100%;
		max-width: none;

		/* Icon + text are one unit with a fixed gap. */
		gap: 7px;

		/* Never wrap. Reduce font size before ever wrapping. */
		white-space: nowrap;

		/* No ellipsis: the whole message must stay readable. */
		overflow: visible;
		text-overflow: clip;

		/* Extra offset that parks the item off the right edge. */
		--rd-travel: calc(50vw + 50%);

		animation: rd-benefit-slide 19200ms linear infinite;
		will-change: transform, opacity;
	}

	/* Stagger: each message starts 4800ms after the one before it. */
	.rd-announcebar-inner .rd-announcebar-item:nth-child(1) { animation-delay: 0ms; }
	.rd-announcebar-inner .rd-announcebar-item:nth-child(2) { animation-delay: 4800ms; }
	.rd-announcebar-inner .rd-announcebar-item:nth-child(3) { animation-delay: 9600ms; }
	.rd-announcebar-inner .rd-announcebar-item:nth-child(4) { animation-delay: 14400ms; }

	/*
	 * No separator dots between messages — each message is on its own
	 * line and travels alone.
	 */
	.rd-announcebar-inner .rd-announcebar-item + .rd-announcebar-item::before {
		display: none;
		content: none;
	}

	/* Icon keeps its size and travels with the text. */
	.rd-announcebar-inner .rd-announcebar-item svg {
		flex: 0 0 auto;
		width: 15px;
		height: 15px;
	}

	/* 13px on mobile; the longest message still fits one line. */
	.rd-announcebar-inner .rd-announcebar-item {
		font-size: 13px;
		line-height: 1;
	}

	/* ---- the cycle ---- */
	@keyframes rd-benefit-slide {

		/* Off the right edge, invisible. */
		0% {
			transform: translateX(calc(-50% + var(--rd-travel)));
			opacity: 0;
		}

		/* Fade up over the first ~58ms while still off-stage. */
		0.3% {
			transform: translateX(calc(-50% + var(--rd-travel)));
			opacity: 1;
		}

		/* 500ms — arrived, centred. */
		2.604% {
			transform: translateX(-50%);
			opacity: 1;
		}

		/* 3300ms — 2800ms centred, unmoved. */
		17.19% {
			transform: translateX(-50%);
			opacity: 1;
		}

		/* 3800ms — fully out through the left edge. */
		19.79% {
			transform: translateX(calc(-50% - var(--rd-travel)));
			opacity: 1;
		}

		21% {
			transform: translateX(calc(-50% - var(--rd-travel)));
			opacity: 0;
		}

		/* Stay parked off-stage until this item's turn comes round again. */
		100% {
			transform: translateX(calc(-50% - var(--rd-travel)));
			opacity: 0;
		}
	}
}

/* Tablet gets a touch more height, still well inside 36-40px. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-announcement { height: 38px; }
	.rd-announcebar-inner .rd-announcebar-item { font-size: 14px; }
}

/* ============================================================
   REDUCED MOTION — change the message, do not travel
   ============================================================ */

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {

	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		animation-name: rd-benefit-fade;
	}

	@keyframes rd-benefit-fade {
		0%    { transform: translateX(-50%); opacity: 0; }
		0.3%  { transform: translateX(-50%); opacity: 1; }
		17.19% { transform: translateX(-50%); opacity: 1; }
		19.79% { transform: translateX(-50%); opacity: 0; }
		21%    { transform: translateX(-50%); opacity: 0; }
		100%   { transform: translateX(-50%); opacity: 0; }
	}
}

/* ============================================================
   DESKTOP — unchanged inline row of all four benefits

   The carousel rules above stop at 1200px, so the earlier
   `min-width: 1024px` inline rule would otherwise still apply from
   1024 and fight the tablet carousel. Desktop is re-stated here at
   the correct boundary.
   ============================================================ */

@media (min-width: 1200px) {

	.rd-announcement {
		position: static;
		height: auto;
		overflow: visible;
	}

	.rd-announcebar-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		overflow: visible;
	}

	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		position: static;
		display: inline-flex;
		align-items: center;
		height: auto;
		width: auto;
		gap: 7px;
		white-space: nowrap;
		opacity: 1;
		animation: none;
		transform: none;
		will-change: auto;
	}
}
/* ============================================================
   FILL-MODE FIX — no message renders while it is waiting

   Measured at 390 over 26s:

       MAX VISIBLE AT ONCE: 3   <-- three messages on screen at once
       BAR HEIGHT 36px CONSTANT, BAR TOP 0px FIXED,
       MESSAGE TOP 0..0 FIXED, MESSAGE HEIGHT 36..36 CONSTANT

   The travel itself was correct for all four messages
   (RIGHT +321/+267/+275/+286px -> centred -> LEFT, loop closing at
   exactly 19214ms), but three could be on screen simultaneously.

   Cause: `animation-delay` staggers the four items, and with the
   default `animation-fill-mode: none` an item that is still inside
   its delay is NOT being animated. It therefore falls back to the
   static cascade, where the earlier rule

       .rd-announcebar-item.is-active { opacity: 1; }

   applies. notice.js rotates that class every 4800ms, so whichever
   item carried `is-active` while waiting rendered fully opaque, at
   its un-animated position, on top of the item actually animating.

   `fill-mode: both` applies the 0% keyframe during the delay, which
   is exactly the off-stage state — parked off the right edge at
   `opacity: 0`. A waiting item is now invisible by construction and
   cannot be revealed by any class, rather than merely happening not
   to be revealed.
   ============================================================ */

@media (max-width: 1199.98px) {
	.rd-announcebar-inner .rd-announcebar-item,
	.rd-announcebar-inner .rd-announcebar-item.is-active {
		animation-fill-mode: both;
	}
}
/* ============================================================
   PRODUCT CARD — premium marketplace treatment

   Approved target order, top to bottom:

       IMAGE -> RATING -> TITLE -> PRICE -> CATEGORY -> ADD TO CART

   Rendered by woocommerce/content-product.php in the child theme.

   ------------------------------------------------------------------
   THE BADGE PROBLEM BEING FIXED
   ------------------------------------------------------------------
   Previously the "New" badge was emitted by a
   `woocommerce_before_shop_loop_item_title` hook, which Blocksy
   places AFTER the closing </figure>. It therefore sat outside the
   image box and was styled as a block, producing a full-width green
   bar. It is now emitted inside `.rd-card__badges`, inside
   `.rd-card__media`, as an inline-flex pill sized to its own content.

   SALE and NEW share one flex row and are separated by a gap, so
   neither can overlap the other or the wishlist heart. Because both
   are absolutely positioned inside the media wrapper, the row width
   is the sum of the two pills and nothing else — no stretch.

   ------------------------------------------------------------------
   EQUAL HEIGHTS AND ALIGNED BUTTONS
   ------------------------------------------------------------------
   `.rd-card` is a flex column. `.rd-card__body` takes `flex: 1` so it
   absorbs the slack, and `.rd-card__actions` sits last with the
   button at its natural height. The Add to cart button is therefore
   at the same y in every card of a row regardless of how long the
   title or category line is.

   The rating row is a FIXED-HEIGHT placeholder whether or not the
   product has reviews, because every product on this store currently
   has zero approved reviews. The row reserves the space so cards
   stay aligned; real stars appear automatically once a real review
   exists. No star rating or count is ever invented.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Card frame
 * ------------------------------------------------------------------ */

ul.products li.product.rd-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(29, 47, 80, .04);
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	/* Equal height across a row regardless of content length. */
	height: 100%;
}

/* Desktop hover: subtle lift + softer stronger shadow, no scaling. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	ul.products li.product.rd-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(29, 47, 80, .10);
		border-color: #d9dee6;
	}

	ul.products li.product.rd-card:hover .rd-card__img {
		/* Deliberately no transform here — the image must not jump. */
		object-fit: cover;
	}

	ul.products li.product.rd-card:hover .rd-wish {
		border-color: #e0b3b8;
		color: #e02027;
	}
}

/* ------------------------------------------------------------------ *
 * Media / image
 * ------------------------------------------------------------------ */

.rd-card__media {
	position: relative;
	display: block;
	/* Consistent ratio across every card and breakpoint. */
	aspect-ratio: 6 / 5;
	overflow: hidden;
	background: #f4f6f9;
	/* Only the top corners are rounded; the body below is square. */
	border-radius: 11px 11px 0 0;
}

.rd-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.rd-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Placeholder when a product has no image at all. */
.rd-card__img--none {
	background: linear-gradient(135deg, #eef1f6, #e2e7ee);
}

/* ------------------------------------------------------------------ *
 * Badges — compact content-width pills, never a bar
 * ------------------------------------------------------------------ */

.rd-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	/* Only as wide as the pills it contains. */
	width: max-content;
	max-width: calc(100% - 66px); /* leave room for the heart */
}

.rd-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Content-sized pill. */
	width: auto;
	height: 24px;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.rd-badge--sale {
	background: #e02027;
}

.rd-badge--new {
	background: #008c5a;
}

/* ------------------------------------------------------------------ *
 * Wishlist heart — top right, circular, white
 * ------------------------------------------------------------------ */

.rd-card__media .rd-wish,
.rd-wish {
	position: absolute;
	top: 9px;
	right: 10px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	padding: 0;
	border: 1px solid rgba(29, 47, 80, .12);
	border-radius: 50%;
	background: #fff;
	color: #1d2f50;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.rd-wish svg {
	width: 17px;
	height: 17px;
}

.rd-wish.is-active,
.rd-wish[aria-pressed="true"] {
	color: #e02027;
	border-color: #f0b6bb;
	background: #fff5f6;
}

.rd-wish.is-active svg {
	fill: currentColor;
}

/* ------------------------------------------------------------------ *
 * Out of stock
 * ------------------------------------------------------------------ */

.rd-card__oos {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	background: rgba(29, 47, 80, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Body
 * ------------------------------------------------------------------ */

.rd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px 14px;
}

/* ---- rating: fixed height so rows align, real data only ---- */

.rd-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Reserved even when empty, so card heights stay equal. */
	height: 18px;
	margin-bottom: 6px;
	min-width: 0;
}

.rd-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #f5a623;
}

.rd-star {
	display: block;
	width: 14px;
	height: 14px;
	background: currentColor;
	/* Five-point star, drawn once as a mask so fill state is just colour. */
	-webkit-mask: var(--rd-star) center / contain no-repeat;
	mask: var(--rd-star) center / contain no-repeat;
}

.rd-stars--full .rd-star,
.rd-stars--halffull .rd-star,
.rd-stars--halfhalf .rd-star,
.rd-stars--halfempty .rd-star,
.rd-stars--fullhalf .rd-star {
	color: #f5a623;
}

.rd-stars--empty .rd-star,
.rd-stars--halfempty .rd-star:last-child {
	color: #d8dee7;
}

.rd-card__count {
	color: #71819c;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
}

/* ---- title ---- */

.rd-card__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #23324d;
	/* Two lines max, so every card keeps the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}

.rd-card__title a {
	color: inherit;
	text-decoration: none;
}

.rd-card__title a:hover {
	color: #c65300;
}

/* ---- price ---- */

.rd-card__price {
	margin-bottom: 8px;
	min-height: 20px;
}

.rd-card__price .price,
.rd-card__price > span {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
}

.rd-card__price del {
	color: #a9b5c5;
	font-size: 12.5px;
	font-weight: 400;
	text-decoration-thickness: 1px;
	opacity: 1;
}

.rd-card__price ins {
	color: #f12d2d;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.rd-card__price .amount {
	font-size: inherit;
}

/* Hide WooCommerce's screen-reader price narration from the card. */
.rd-card__price .screen-reader-text {
	display: none;
}

/* ---- category ---- */

.rd-card__cat {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 18px;
	margin-bottom: 10px;
	min-width: 0;
	color: #6b7a93;
}

.rd-card__cat--empty {
	/* keeps spacing when a product genuinely has no category */
	min-height: 18px;
}

.rd-card__cat-icon {
	flex: 0 0 auto;
	color: #8494ad;
}

.rd-card__cat-name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: #6b7a93;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- add to cart ---- */

.rd-card__actions {
	margin-top: auto;
	padding-top: 0;
}

.rd-card__cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: #c65300;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease;
}

.rd-card__cart:hover,
.rd-card__cart:focus {
	background: #a94400;
	color: #fff;
}

.rd-card__cart--disabled {
	background: #e6e9ee;
	color: #98a2b3;
	cursor: not-allowed;
}

.rd-card__cart-icon {
	flex: 0 0 auto;
}

/* WooCommerce adds this after an AJAX add; keep the button same size. */
.rd-card__cart.loading {
	opacity: .75;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Breakpoint tuning
 * ------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.rd-card__body {
		padding: 14px 16px 16px;
	}

	.rd-card__title {
		font-size: 15px;
	}

	.rd-card__price ins {
		font-size: 17px;
	}

	.rd-card__price del {
		font-size: 13px;
	}

	.rd-card__cart {
		min-height: 44px;
		font-size: 14px;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-card__body {
		padding: 12px 13px 13px;
	}
}

/* Mobile: keep every element the brief requires, tightened to fit. */
@media (max-width: 767.98px) {
	.rd-card__media {
		aspect-ratio: 1 / 1;
		border-radius: 10px 10px 0 0;
	}

	.rd-card__badges {
		top: 7px;
		left: 7px;
		gap: 5px;
	}

	.rd-badge {
		height: 20px;
		padding: 0 7px;
		font-size: 9.5px;
		border-radius: 5px;
	}

	.rd-wish {
		top: 6px;
		right: 6px;
		width: 30px;
		height: 30px;
		min-width: 30px;
	}

	.rd-wish svg {
		width: 15px;
		height: 15px;
	}

	.rd-card__body {
		padding: 10px 10px 11px;
	}

	.rd-card__rating {
		height: 15px;
		margin-bottom: 4px;
	}

	.rd-star {
		width: 11px;
		height: 11px;
	}

	.rd-card__count {
		font-size: 10.5px;
	}

	.rd-card__title {
		font-size: 12.5px;
		margin-bottom: 5px;
	}

	.rd-card__price {
		margin-bottom: 6px;
	}

	.rd-card__price ins {
		font-size: 14px;
	}

	.rd-card__price del {
		font-size: 11px;
	}

	.rd-card__cat {
		margin-bottom: 8px;
	}

	.rd-card__cat-icon {
		width: 13px;
		height: 13px;
	}

	.rd-card__cat-name {
		font-size: 10.5px;
	}

	.rd-card__cart {
		min-height: 44px; /* touch target */
		padding: 10px 8px;
		font-size: 12px;
		gap: 6px;
	}

	.rd-card__cart-icon {
		width: 16px;
		height: 16px;
	}
}
/* ============================================================
   PRODUCT CARD: star shape + fill states

   The approved design shows orange stars with a review count. Stars
   are drawn as a mask so the fill state is only ever a colour
   change, which keeps them crisp at any size.

   The shape is defined once as a custom property on the card and
   inherited by every star inside it. Each star then carries its own
   `--full` / `--half` / `--empty` modifier from content-product.php,
   which reads the real average rating and rounds to the nearest half.

   Because no product on this store currently has an approved review,
   the rating row renders empty today; these rules start applying the
   moment a real review exists.
   ============================================================ */

ul.products li.product.rd-card {
	--rd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5l1.11-6.47L2.6 9.45l6.5-.95L12 2.6z'/%3E%3C/svg%3E");
}

/* half star: left half orange, right half empty, via a gradient mask */
.rd-star--half {
	--rd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='50%25' stop-color='%23fff'/%3E%3Cstop offset='50%25' stop-color='%23000'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23h)' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5l1.11-6.47L2.6 9.45l6.5-.95L12 2.6z'/%3E%3C/svg%3E");
	color: #f5a623;
}

.rd-star--full {
	color: #f5a623;
}

.rd-star--empty {
	color: #d8dee7;
}
/* ============================================================
   PRODUCT CARD — premium marketplace treatment

   Approved target order, top to bottom:

       IMAGE -> RATING -> TITLE -> PRICE -> CATEGORY -> ADD TO CART

   Rendered by woocommerce/content-product.php in the child theme.

   ------------------------------------------------------------------
   THE BADGE PROBLEM BEING FIXED
   ------------------------------------------------------------------
   Previously the "New" badge was emitted by a
   `woocommerce_before_shop_loop_item_title` hook, which Blocksy
   places AFTER the closing </figure>. It therefore sat outside the
   image box and was styled as a block, producing a full-width green
   bar. It is now emitted inside `.rd-card__badges`, inside
   `.rd-card__media`, as an inline-flex pill sized to its own content.

   SALE and NEW share one flex row and are separated by a gap, so
   neither can overlap the other or the wishlist heart. Because both
   are absolutely positioned inside the media wrapper, the row width
   is the sum of the two pills and nothing else — no stretch.

   ------------------------------------------------------------------
   EQUAL HEIGHTS AND ALIGNED BUTTONS
   ------------------------------------------------------------------
   `.rd-card` is a flex column. `.rd-card__body` takes `flex: 1` so it
   absorbs the slack, and `.rd-card__actions` sits last with the
   button at its natural height. The Add to cart button is therefore
   at the same y in every card of a row regardless of how long the
   title or category line is.

   The rating row is a FIXED-HEIGHT placeholder whether or not the
   product has reviews, because every product on this store currently
   has zero approved reviews. The row reserves the space so cards
   stay aligned; real stars appear automatically once a real review
   exists. No star rating or count is ever invented.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Card frame
 * ------------------------------------------------------------------ */

ul.products li.product.rd-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(29, 47, 80, .04);
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	/* Equal height across a row regardless of content length. */
	height: 100%;
}

/* Desktop hover: subtle lift + softer stronger shadow, no scaling. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	ul.products li.product.rd-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(29, 47, 80, .10);
		border-color: #d9dee6;
	}

	ul.products li.product.rd-card:hover .rd-card__img {
		/* Deliberately no transform here — the image must not jump. */
		object-fit: cover;
	}

	ul.products li.product.rd-card:hover .rd-wish {
		border-color: #e0b3b8;
		color: #e02027;
	}
}

/* ------------------------------------------------------------------ *
 * Media / image
 * ------------------------------------------------------------------ */

.rd-card__media {
	position: relative;
	display: block;
	/* Consistent ratio across every card and breakpoint. */
	aspect-ratio: 6 / 5;
	overflow: hidden;
	background: #f4f6f9;
	/* Only the top corners are rounded; the body below is square. */
	border-radius: 11px 11px 0 0;
}

.rd-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.rd-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Placeholder when a product has no image at all. */
.rd-card__img--none {
	background: linear-gradient(135deg, #eef1f6, #e2e7ee);
}

/* ------------------------------------------------------------------ *
 * Badges — compact content-width pills, never a bar
 * ------------------------------------------------------------------ */

.rd-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	/* Only as wide as the pills it contains. */
	width: max-content;
	max-width: calc(100% - 66px); /* leave room for the heart */
}

.rd-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Content-sized pill. */
	width: auto;
	height: 24px;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.rd-badge--sale {
	background: #e02027;
}

.rd-badge--new {
	background: #008c5a;
}

/* ------------------------------------------------------------------ *
 * Wishlist heart — top right, circular, white
 * ------------------------------------------------------------------ */

.rd-card__media .rd-wish,
.rd-wish {
	position: absolute;
	top: 9px;
	right: 10px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	padding: 0;
	border: 1px solid rgba(29, 47, 80, .12);
	border-radius: 50%;
	background: #fff;
	color: #1d2f50;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.rd-wish svg {
	width: 17px;
	height: 17px;
}

.rd-wish.is-active,
.rd-wish[aria-pressed="true"] {
	color: #e02027;
	border-color: #f0b6bb;
	background: #fff5f6;
}

.rd-wish.is-active svg {
	fill: currentColor;
}

/* ------------------------------------------------------------------ *
 * Out of stock
 * ------------------------------------------------------------------ */

.rd-card__oos {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	background: rgba(29, 47, 80, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Body
 * ------------------------------------------------------------------ */

.rd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px 14px;
}

/* ---- rating: fixed height so rows align, real data only ---- */

.rd-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Reserved even when empty, so card heights stay equal. */
	height: 18px;
	margin-bottom: 6px;
	min-width: 0;
}

.rd-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #f5a623;
}

.rd-star {
	display: block;
	width: 14px;
	height: 14px;
	background: currentColor;
	/* Five-point star, drawn once as a mask so fill state is just colour. */
	-webkit-mask: var(--rd-star) center / contain no-repeat;
	mask: var(--rd-star) center / contain no-repeat;
}

.rd-stars--full .rd-star,
.rd-stars--halffull .rd-star,
.rd-stars--halfhalf .rd-star,
.rd-stars--halfempty .rd-star,
.rd-stars--fullhalf .rd-star {
	color: #f5a623;
}

.rd-stars--empty .rd-star,
.rd-stars--halfempty .rd-star:last-child {
	color: #d8dee7;
}

.rd-card__count {
	color: #71819c;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
}

/* ---- title ---- */

.rd-card__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #23324d;
	/* Two lines max, so every card keeps the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}

.rd-card__title a {
	color: inherit;
	text-decoration: none;
}

.rd-card__title a:hover {
	color: #c65300;
}

/* ---- price ---- */

.rd-card__price {
	margin-bottom: 8px;
	min-height: 20px;
}

.rd-card__price .price,
.rd-card__price > span {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
}

.rd-card__price del {
	color: #a9b5c5;
	font-size: 12.5px;
	font-weight: 400;
	text-decoration-thickness: 1px;
	opacity: 1;
}

.rd-card__price ins {
	color: #f12d2d;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.rd-card__price .amount {
	font-size: inherit;
}

/* Hide WooCommerce's screen-reader price narration from the card. */
.rd-card__price .screen-reader-text {
	display: none;
}

/* ---- category ---- */

.rd-card__cat {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 18px;
	margin-bottom: 10px;
	min-width: 0;
	color: #6b7a93;
}

.rd-card__cat--empty {
	/* keeps spacing when a product genuinely has no category */
	min-height: 18px;
}

.rd-card__cat-icon {
	flex: 0 0 auto;
	color: #8494ad;
}

.rd-card__cat-name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: #6b7a93;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- add to cart ---- */

.rd-card__actions {
	margin-top: auto;
	padding-top: 0;
}

.rd-card__cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: #c65300;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease;
}

.rd-card__cart:hover,
.rd-card__cart:focus {
	background: #a94400;
	color: #fff;
}

.rd-card__cart--disabled {
	background: #e6e9ee;
	color: #98a2b3;
	cursor: not-allowed;
}

.rd-card__cart-icon {
	flex: 0 0 auto;
}

/* WooCommerce adds this after an AJAX add; keep the button same size. */
.rd-card__cart.loading {
	opacity: .75;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Breakpoint tuning
 * ------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.rd-card__body {
		padding: 14px 16px 16px;
	}

	.rd-card__title {
		font-size: 15px;
	}

	.rd-card__price ins {
		font-size: 17px;
	}

	.rd-card__price del {
		font-size: 13px;
	}

	.rd-card__cart {
		min-height: 44px;
		font-size: 14px;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-card__body {
		padding: 12px 13px 13px;
	}
}

/* Mobile: keep every element the brief requires, tightened to fit. */
@media (max-width: 767.98px) {
	.rd-card__media {
		aspect-ratio: 1 / 1;
		border-radius: 10px 10px 0 0;
	}

	.rd-card__badges {
		top: 7px;
		left: 7px;
		gap: 5px;
	}

	.rd-badge {
		height: 20px;
		padding: 0 7px;
		font-size: 9.5px;
		border-radius: 5px;
	}

	.rd-wish {
		top: 6px;
		right: 6px;
		width: 30px;
		height: 30px;
		min-width: 30px;
	}

	.rd-wish svg {
		width: 15px;
		height: 15px;
	}

	.rd-card__body {
		padding: 10px 10px 11px;
	}

	.rd-card__rating {
		height: 15px;
		margin-bottom: 4px;
	}

	.rd-star {
		width: 11px;
		height: 11px;
	}

	.rd-card__count {
		font-size: 10.5px;
	}

	.rd-card__title {
		font-size: 12.5px;
		margin-bottom: 5px;
	}

	.rd-card__price {
		margin-bottom: 6px;
	}

	.rd-card__price ins {
		font-size: 14px;
	}

	.rd-card__price del {
		font-size: 11px;
	}

	.rd-card__cat {
		margin-bottom: 8px;
	}

	.rd-card__cat-icon {
		width: 13px;
		height: 13px;
	}

	.rd-card__cat-name {
		font-size: 10.5px;
	}

	.rd-card__cart {
		min-height: 44px; /* touch target */
		padding: 10px 8px;
		font-size: 12px;
		gap: 6px;
	}

	.rd-card__cart-icon {
		width: 16px;
		height: 16px;
	}
}
/* ============================================================
   PRODUCT CARD: star shape + fill states

   The approved design shows orange stars with a review count. Stars
   are drawn as a mask so the fill state is only ever a colour
   change, which keeps them crisp at any size.

   The shape is defined once as a custom property on the card and
   inherited by every star inside it. Each star then carries its own
   `--full` / `--half` / `--empty` modifier from content-product.php,
   which reads the real average rating and rounds to the nearest half.

   Because no product on this store currently has an approved review,
   the rating row renders empty today; these rules start applying the
   moment a real review exists.
   ============================================================ */

ul.products li.product.rd-card {
	--rd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5l1.11-6.47L2.6 9.45l6.5-.95L12 2.6z'/%3E%3C/svg%3E");
}

/* half star: left half orange, right half empty, via a gradient mask */
.rd-star--half {
	--rd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='50%25' stop-color='%23fff'/%3E%3Cstop offset='50%25' stop-color='%23000'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23h)' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5l1.11-6.47L2.6 9.45l6.5-.95L12 2.6z'/%3E%3C/svg%3E");
	color: #f5a623;
}

.rd-star--full {
	color: #f5a623;
}

.rd-star--empty {
	color: #d8dee7;
}

/* ============================================================
   PRODUCT CARD: explicit column counts per breakpoint

   Measured after the first deploy:

       1440 -> grid columns = 6   correct
        768 -> grid columns = 4   WRONG, the brief asks for 3
        390 -> grid columns = 2   correct

   The column count was coming from WooCommerce's own loop setting
   (`<ul class="products columns-4">`) plus Blocksy's responsive
   rules, neither of which matches the approved layout. It is set
   explicitly here instead, so the card grid does not depend on the
   loop's configured column count:

       mobile  (<768)        2 per row
       tablet  (768-1199.98) 3 per row
       desktop (>=1200)      6 per row

   `grid-template-columns` is set on the list itself with an explicit
   track count rather than `repeat(auto-fill, ...)`, so the count is
   deterministic and never drifts with card width.
   ============================================================ */

ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
	display: grid;
	gap: 14px;
	align-items: stretch;
}

@media (max-width: 767.98px) {
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (min-width: 1200px) {
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 16px;
	}
}
/* ============================================================
   PRODUCT CARD — premium marketplace treatment

   Approved target order, top to bottom:

       IMAGE -> RATING -> TITLE -> PRICE -> CATEGORY -> ADD TO CART

   Rendered by woocommerce/content-product.php in the child theme.

   ------------------------------------------------------------------
   THE BADGE PROBLEM BEING FIXED
   ------------------------------------------------------------------
   Previously the "New" badge was emitted by a
   `woocommerce_before_shop_loop_item_title` hook, which Blocksy
   places AFTER the closing </figure>. It therefore sat outside the
   image box and was styled as a block, producing a full-width green
   bar. It is now emitted inside `.rd-card__badges`, inside
   `.rd-card__media`, as an inline-flex pill sized to its own content.

   SALE and NEW share one flex row and are separated by a gap, so
   neither can overlap the other or the wishlist heart. Because both
   are absolutely positioned inside the media wrapper, the row width
   is the sum of the two pills and nothing else — no stretch.

   ------------------------------------------------------------------
   EQUAL HEIGHTS AND ALIGNED BUTTONS
   ------------------------------------------------------------------
   `.rd-card` is a flex column. `.rd-card__body` takes `flex: 1` so it
   absorbs the slack, and `.rd-card__actions` sits last with the
   button at its natural height. The Add to cart button is therefore
   at the same y in every card of a row regardless of how long the
   title or category line is.

   The rating row is a FIXED-HEIGHT placeholder whether or not the
   product has reviews, because every product on this store currently
   has zero approved reviews. The row reserves the space so cards
   stay aligned; real stars appear automatically once a real review
   exists. No star rating or count is ever invented.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Card frame
 * ------------------------------------------------------------------ */

ul.products li.product.rd-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(29, 47, 80, .04);
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	/* Equal height across a row regardless of content length. */
	height: 100%;
}

/* Desktop hover: subtle lift + softer stronger shadow, no scaling. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	ul.products li.product.rd-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(29, 47, 80, .10);
		border-color: #d9dee6;
	}

	ul.products li.product.rd-card:hover .rd-card__img {
		/* Deliberately no transform here — the image must not jump. */
		object-fit: cover;
	}

	ul.products li.product.rd-card:hover .rd-wish {
		border-color: #e0b3b8;
		color: #e02027;
	}
}

/* ------------------------------------------------------------------ *
 * Media / image
 * ------------------------------------------------------------------ */

.rd-card__media {
	position: relative;
	display: block;
	/* Consistent ratio across every card and breakpoint. */
	aspect-ratio: 6 / 5;
	overflow: hidden;
	background: #f4f6f9;
	/* Only the top corners are rounded; the body below is square. */
	border-radius: 11px 11px 0 0;
}

.rd-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.rd-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Placeholder when a product has no image at all. */
.rd-card__img--none {
	background: linear-gradient(135deg, #eef1f6, #e2e7ee);
}

/* ------------------------------------------------------------------ *
 * Badges — compact content-width pills, never a bar
 * ------------------------------------------------------------------ */

.rd-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	/* Only as wide as the pills it contains. */
	width: max-content;
	max-width: calc(100% - 66px); /* leave room for the heart */
}

.rd-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Content-sized pill. */
	width: auto;
	height: 24px;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.rd-badge--sale {
	background: #e02027;
}

.rd-badge--new {
	background: #008c5a;
}

/* ------------------------------------------------------------------ *
 * Wishlist heart — top right, circular, white
 * ------------------------------------------------------------------ */

.rd-card__media .rd-wish,
.rd-wish {
	position: absolute;
	top: 9px;
	right: 10px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	padding: 0;
	border: 1px solid rgba(29, 47, 80, .12);
	border-radius: 50%;
	background: #fff;
	color: #1d2f50;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.rd-wish svg {
	width: 17px;
	height: 17px;
}

.rd-wish.is-active,
.rd-wish[aria-pressed="true"] {
	color: #e02027;
	border-color: #f0b6bb;
	background: #fff5f6;
}

.rd-wish.is-active svg {
	fill: currentColor;
}

/* ------------------------------------------------------------------ *
 * Out of stock
 * ------------------------------------------------------------------ */

.rd-card__oos {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	background: rgba(29, 47, 80, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Body
 * ------------------------------------------------------------------ */

.rd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px 14px;
}

/* ---- rating: fixed height so rows align, real data only ---- */

.rd-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Reserved even when empty, so card heights stay equal. */
	height: 18px;
	margin-bottom: 6px;
	min-width: 0;
}

.rd-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #f5a623;
}

.rd-star {
	display: block;
	width: 14px;
	height: 14px;
	background: currentColor;
	/* Five-point star, drawn once as a mask so fill state is just colour. */
	-webkit-mask: var(--rd-star) center / contain no-repeat;
	mask: var(--rd-star) center / contain no-repeat;
}

.rd-stars--full .rd-star,
.rd-stars--halffull .rd-star,
.rd-stars--halfhalf .rd-star,
.rd-stars--halfempty .rd-star,
.rd-stars--fullhalf .rd-star {
	color: #f5a623;
}

.rd-stars--empty .rd-star,
.rd-stars--halfempty .rd-star:last-child {
	color: #d8dee7;
}

.rd-card__count {
	color: #71819c;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
}

/* ---- title ---- */

.rd-card__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #23324d;
	/* Two lines max, so every card keeps the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}

.rd-card__title a {
	color: inherit;
	text-decoration: none;
}

.rd-card__title a:hover {
	color: #c65300;
}

/* ---- price ---- */

.rd-card__price {
	margin-bottom: 8px;
	min-height: 20px;
}

.rd-card__price .price,
.rd-card__price > span {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
}

.rd-card__price del {
	color: #a9b5c5;
	font-size: 12.5px;
	font-weight: 400;
	text-decoration-thickness: 1px;
	opacity: 1;
}

.rd-card__price ins {
	color: #f12d2d;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.rd-card__price .amount {
	font-size: inherit;
}

/* Hide WooCommerce's screen-reader price narration from the card. */
.rd-card__price .screen-reader-text {
	display: none;
}

/* ---- category ---- */

.rd-card__cat {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 18px;
	margin-bottom: 10px;
	min-width: 0;
	color: #6b7a93;
}

.rd-card__cat--empty {
	/* keeps spacing when a product genuinely has no category */
	min-height: 18px;
}

.rd-card__cat-icon {
	flex: 0 0 auto;
	color: #8494ad;
}

.rd-card__cat-name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: #6b7a93;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- add to cart ---- */

.rd-card__actions {
	margin-top: auto;
	padding-top: 0;
}

.rd-card__cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: #c65300;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease;
}

.rd-card__cart:hover,
.rd-card__cart:focus {
	background: #a94400;
	color: #fff;
}

.rd-card__cart--disabled {
	background: #e6e9ee;
	color: #98a2b3;
	cursor: not-allowed;
}

.rd-card__cart-icon {
	flex: 0 0 auto;
}

/* WooCommerce adds this after an AJAX add; keep the button same size. */
.rd-card__cart.loading {
	opacity: .75;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Breakpoint tuning
 * ------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.rd-card__body {
		padding: 14px 16px 16px;
	}

	.rd-card__title {
		font-size: 15px;
	}

	.rd-card__price ins {
		font-size: 17px;
	}

	.rd-card__price del {
		font-size: 13px;
	}

	.rd-card__cart {
		min-height: 44px;
		font-size: 14px;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-card__body {
		padding: 12px 13px 13px;
	}
}

/* Mobile: keep every element the brief requires, tightened to fit. */
@media (max-width: 767.98px) {
	.rd-card__media {
		aspect-ratio: 1 / 1;
		border-radius: 10px 10px 0 0;
	}

	.rd-card__badges {
		top: 7px;
		left: 7px;
		gap: 5px;
	}

	.rd-badge {
		height: 20px;
		padding: 0 7px;
		font-size: 9.5px;
		border-radius: 5px;
	}

	.rd-wish {
		top: 6px;
		right: 6px;
		width: 30px;
		height: 30px;
		min-width: 30px;
	}

	.rd-wish svg {
		width: 15px;
		height: 15px;
	}

	.rd-card__body {
		padding: 10px 10px 11px;
	}

	.rd-card__rating {
		height: 15px;
		margin-bottom: 4px;
	}

	.rd-star {
		width: 11px;
		height: 11px;
	}

	.rd-card__count {
		font-size: 10.5px;
	}

	.rd-card__title {
		font-size: 12.5px;
		margin-bottom: 5px;
	}

	.rd-card__price {
		margin-bottom: 6px;
	}

	.rd-card__price ins {
		font-size: 14px;
	}

	.rd-card__price del {
		font-size: 11px;
	}

	.rd-card__cat {
		margin-bottom: 8px;
	}

	.rd-card__cat-icon {
		width: 13px;
		height: 13px;
	}

	.rd-card__cat-name {
		font-size: 10.5px;
	}

	.rd-card__cart {
		min-height: 44px; /* touch target */
		padding: 10px 8px;
		font-size: 12px;
		gap: 6px;
	}

	.rd-card__cart-icon {
		width: 16px;
		height: 16px;
	}
}
/* ============================================================
   PRODUCT CARD: star shape + fill states

   The approved design shows orange stars with a review count. Stars
   are drawn as a mask so the fill state is only ever a colour
   change, which keeps them crisp at any size.

   The shape is defined once as a custom property on the card and
   inherited by every star inside it. Each star then carries its own
   `--full` / `--half` / `--empty` modifier from content-product.php,
   which reads the real average rating and rounds to the nearest half.

   Because no product on this store currently has an approved review,
   the rating row renders empty today; these rules start applying the
   moment a real review exists.
   ============================================================ */

ul.products li.product.rd-card {
	--rd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5l1.11-6.47L2.6 9.45l6.5-.95L12 2.6z'/%3E%3C/svg%3E");
}

/* half star: left half orange, right half empty, via a gradient mask */
.rd-star--half {
	--rd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='50%25' stop-color='%23fff'/%3E%3Cstop offset='50%25' stop-color='%23000'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23h)' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5l1.11-6.47L2.6 9.45l6.5-.95L12 2.6z'/%3E%3C/svg%3E");
	color: #f5a623;
}

.rd-star--full {
	color: #f5a623;
}

.rd-star--empty {
	color: #d8dee7;
}

/* ============================================================
   PRODUCT CARD: explicit column counts per breakpoint

   Measured after the first deploy:

       1440 -> grid columns = 6   correct
        768 -> grid columns = 4   WRONG, the brief asks for 3
        390 -> grid columns = 2   correct

   The column count was coming from WooCommerce's own loop setting
   (`<ul class="products columns-4">`) plus Blocksy's responsive
   rules, neither of which matches the approved layout. It is set
   explicitly here instead, so the card grid does not depend on the
   loop's configured column count:

       mobile  (<768)        2 per row
       tablet  (768-1199.98) 3 per row
       desktop (>=1200)      6 per row

   `grid-template-columns` is set on the list itself with an explicit
   track count rather than `repeat(auto-fill, ...)`, so the count is
   deterministic and never drifts with card width.
   ============================================================ */

ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
	display: grid;
	gap: 14px;
	align-items: stretch;
}

@media (max-width: 767.98px) {
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (min-width: 1200px) {
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ============================================================
   PRODUCT CARD: reclaim the Add to cart button box

   Measured at 1440 and 390:

       BUTTON box: 185x34   minHeight=34px  padding=0px 10px
       lineHeight=34px  display=flex

   The card button was rendering 34px tall with 0 vertical padding,
   against a required ~44px. The cause is an earlier rule in this
   same file (line ~810) that was written for the old Blocksy card
   actions:

       .rd-products .button {
           min-height: 36px;
           padding: 6px 10px !important;
           font-size: 12px;
           width: calc(100% - 20px);
           margin: 0 10px 10px;
       }

   Three problems with it here:
     - `min-height: 36px` outranks the single-class `.rd-card__cart`
       rule on specificity, so the 44px minimum never applied.
     - `padding: ... !important` outranks any normal declaration, so
       the button's vertical padding was silently discarded and the
       text line-height became the box height instead.
     - `width: calc(100% - 20px)` plus `margin: 0 10px 10px` insets
       the button away from the card's own padding, which is why the
       approved full-width CTA was not reaching the card edges.

   The override below matches the old rule's `!important` (you cannot
   out-specify an `!important` without one) and beats it on
   specificity, so the button regains a true 44px height, its own
   padding, and the full content width of the card body.

   The wishlist heart also gets a 44px touch target on mobile: the
   visible circle stays 30px, but an invisible ::before extends the
   hit area to 44x44 so it meets the same minimum as the CTA without
   changing the approved visual size.
   ============================================================ */

.rd-products ul.products li.product.rd-card .rd-card__cart {
	min-height: 44px !important;
	height: auto !important;
	padding: 11px 14px !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	line-height: 1.2 !important;
	font-size: 13.5px !important;
	border-radius: 8px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
}

@media (min-width: 1200px) {
	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 14px !important;
	}
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cart {
		min-height: 44px !important;
		padding: 11px 8px !important;
		font-size: 12px !important;
		gap: 6px;
	}
}

/* 44px touch target around the smaller mobile heart. */
@media (max-width: 767.98px) {
	.rd-products li.rd-card .rd-wish::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}
/* ============================================================
   PRODUCT CARD PASS 2 — compactness / visual density

   The structure and functionality were correct, but the cards read
   as oversized marketplace cards rather than the approved dense
   reference. Measured before this pass:

       1440   card 400px   image 181px   content 219px
        768   card 401px   image 204px   content 197px
       1024   card 472px   image 235px   content 237px
        390   card 361px   image 172px   content 189px

   Targets from the brief:

       1440   card 340-365px   image 175-190px
        768   compact, not 450-470px tall
       1024   compact, not 450-470px tall
        390   image 160-180px, CTA ~42px, much shorter overall

   Where the height was going, at 1440:

       body padding 12 + 14 bottom            26px
       empty rating row 18 + 6 margin         24px   <- removed
       title (2 lines reserved) 37.8 + 6      43.8px
       price 20 + 8                           28px
       category 18 + 10                       28px
       CTA                                     44px   -> 42px
                                               -----
                                                193.8px

   The rating spacer is now gone from the markup entirely, and the
   remaining gaps are cut to the 8-12px the brief specifies:

       image -> title   10px
       title -> price    7px
       price -> category 7px
       category -> CTA  12px

   `.rd-card__body` remains a flex column and `.rd-card__actions`
   keeps `margin-top: auto`, so the CTA is still pinned to the bottom
   and every button in a row stays aligned — the alignment guarantee is
   unchanged, only the slack between sections is gone. Nothing here
   uses `justify-content: space-between`; the body packs its content
   from the top and only the CTA is pushed down.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Image height per breakpoint.
 *
 * The image still "visually dominates the upper portion" but no longer
 * consumes most of the card. A fixed ratio of 6/5 kept the image at
 * 235px on a 1024px tablet card, which was the single largest source of
 * tablet height. The ratio is retained, with an explicit height ceiling
 * so wide cards cannot drive the image taller than the brief allows.
 * ------------------------------------------------------------------ */

.rd-card__media {
	aspect-ratio: 6 / 5;
	max-height: 190px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-card__media {
		aspect-ratio: 6 / 5;
		max-height: 215px;
	}
}

@media (max-width: 767.98px) {
	.rd-card__media {
		/* Brief: image approximately 160-180px at 390-430. */
		aspect-ratio: auto;
		height: 168px;
		max-height: none;
	}
}

/* ------------------------------------------------------------------ *
 * Body spacing — compact top-down packing.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__body {
	padding: 10px 13px 12px;
	gap: 0;
	justify-content: flex-start;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__body {
		padding: 9px 11px 11px;
	}
}

/* ------------------------------------------------------------------ *
 * Rating row — only exists when there is real review data now.
 *
 * Kept styled (16px) so that when reviews arrive the row is compact
 * rather than suddenly generous, but it is no longer reserved space.
 * ------------------------------------------------------------------ */

.rd-card__rating {
	display: flex;
	align-items: center;
	gap: 5px;
	height: auto;
	min-height: 0;
	margin-bottom: 6px;
}

.rd-card__rating--empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Title — max 2 lines, consistently reserved.
 *
 * `min-height` is the height of exactly two lines, so every card
 * reserves the same small title area. This is deliberately NOT a large
 * general-purpose blank: two lines of 14px/1.3 is ~36px.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__title {
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 7px;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 14.5px;
		line-height: 1.3;
		margin: 0 0 6px;
		min-height: calc(1.3em * 2);
	}
}

/* ------------------------------------------------------------------ *
 * Price — premium hierarchy, kept on ONE line.
 *
 * `flex-wrap: nowrap` stops the old price dropping to its own row on
 * narrow mobile cards. `min-width: 0` plus `overflow: hidden` on the
 * del means an unusually long currency value is clipped rather than
 * overflowing the card, which was the reason wrapping was allowed
 * before.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__price {
	margin: 0 0 7px;
	min-height: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.rd-products ul.products li.product.rd-card .rd-card__price .price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: nowrap;
	min-width: 0;
}

.rd-products ul.products li.product.rd-card .rd-card__price ins {
	font-size: 16.5px;
	font-weight: 700;
	color: #f12d2d;
	letter-spacing: -.01em;
	white-space: nowrap;
	flex: 0 0 auto;
}

.rd-products ul.products li.product.rd-card .rd-card__price del {
	font-size: 12px;
	font-weight: 400;
	color: #a9b5c5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 17px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 11.5px;
	}
}

/* ------------------------------------------------------------------ *
 * Category — smaller and more muted, with graceful truncation.
 *
 * `text-overflow: ellipsis` on the name means an exceptionally long
 * category ("Beauty & Personal Care Equipment") truncates instead of
 * wrapping to two lines and breaking card alignment.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__cat {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 0;
	min-width: 0;
	margin: 0 0 12px;
	color: #7c8aa1;
	font-size: 12px;
	line-height: 1.2;
}

.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	opacity: .8;
}

.rd-products ul.products li.product.rd-card .rd-card__cat-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.rd-card__cat--empty {
	min-height: 0;
	margin: 0 0 12px;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cat {
		font-size: 12.5px;
		margin-bottom: 11px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------------ *
 * Add to cart — 40-42px on desktop, ~42px on mobile.
 *
 * Must reassert `min-height` against the `.rd-products .button` rule
 * from earlier in this file, which carries `!important`.
 *
 * On mobile the button is visually 42px. The 44px touch target is
 * preserved by an invisible `::before` that extends the hit area, so
 * accessibility is not traded away for the smaller visual.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__actions {
	margin-top: auto;
}

.rd-products ul.products li.product.rd-card .rd-card__cart {
	min-height: 42px !important;
	height: 42px !important;
	padding: 0 14px !important;
	border-radius: 7px;
	font-size: 13.5px !important;
	gap: 7px;
}

.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cart {
		min-height: 42px !important;
		height: 42px !important;
		padding: 0 8px !important;
		border-radius: 7px;
		font-size: 12px !important;
		gap: 6px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart::before {
		content: '';
		position: absolute;
		inset: -1px -4px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		position: relative;
	}
}

/* ------------------------------------------------------------------ *
 * Card frame — slightly tighter radius and a touch more depth.
 * ------------------------------------------------------------------ */

ul.products li.product.rd-card {
	border-radius: 11px;
	border: 1px solid #e8ebf0;
	box-shadow: 0 1px 2px rgba(29, 47, 80, .05), 0 4px 10px rgba(29, 47, 80, .03);
}

.rd-card__media {
	border-radius: 10px 10px 0 0;
}
/* ============================================================
   PRODUCT CARD PASS 2 — compactness / visual density

   The structure and functionality were correct, but the cards read
   as oversized marketplace cards rather than the approved dense
   reference. Measured before this pass:

       1440   card 400px   image 181px   content 219px
        768   card 401px   image 204px   content 197px
       1024   card 472px   image 235px   content 237px
        390   card 361px   image 172px   content 189px

   Targets from the brief:

       1440   card 340-365px   image 175-190px
        768   compact, not 450-470px tall
       1024   compact, not 450-470px tall
        390   image 160-180px, CTA ~42px, much shorter overall

   Where the height was going, at 1440:

       body padding 12 + 14 bottom            26px
       empty rating row 18 + 6 margin         24px   <- removed
       title (2 lines reserved) 37.8 + 6      43.8px
       price 20 + 8                           28px
       category 18 + 10                       28px
       CTA                                     44px   -> 42px
                                               -----
                                                193.8px

   The rating spacer is now gone from the markup entirely, and the
   remaining gaps are cut to the 8-12px the brief specifies:

       image -> title   10px
       title -> price    7px
       price -> category 7px
       category -> CTA  12px

   `.rd-card__body` remains a flex column and `.rd-card__actions`
   keeps `margin-top: auto`, so the CTA is still pinned to the bottom
   and every button in a row stays aligned — the alignment guarantee is
   unchanged, only the slack between sections is gone. Nothing here
   uses `justify-content: space-between`; the body packs its content
   from the top and only the CTA is pushed down.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Image height per breakpoint.
 *
 * The image still "visually dominates the upper portion" but no longer
 * consumes most of the card. A fixed ratio of 6/5 kept the image at
 * 235px on a 1024px tablet card, which was the single largest source of
 * tablet height. The ratio is retained, with an explicit height ceiling
 * so wide cards cannot drive the image taller than the brief allows.
 * ------------------------------------------------------------------ */

.rd-card__media {
	aspect-ratio: 6 / 5;
	max-height: 190px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-card__media {
		aspect-ratio: 6 / 5;
		max-height: 215px;
	}
}

@media (max-width: 767.98px) {
	.rd-card__media {
		/* Brief: image approximately 160-180px at 390-430. */
		aspect-ratio: auto;
		height: 168px;
		max-height: none;
	}
}

/* ------------------------------------------------------------------ *
 * Body spacing — compact top-down packing.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__body {
	padding: 10px 13px 12px;
	gap: 0;
	justify-content: flex-start;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__body {
		padding: 9px 11px 11px;
	}
}

/* ------------------------------------------------------------------ *
 * Rating row — only exists when there is real review data now.
 *
 * Kept styled (16px) so that when reviews arrive the row is compact
 * rather than suddenly generous, but it is no longer reserved space.
 * ------------------------------------------------------------------ */

.rd-card__rating {
	display: flex;
	align-items: center;
	gap: 5px;
	height: auto;
	min-height: 0;
	margin-bottom: 6px;
}

.rd-card__rating--empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Title — max 2 lines, consistently reserved.
 *
 * `min-height` is the height of exactly two lines, so every card
 * reserves the same small title area. This is deliberately NOT a large
 * general-purpose blank: two lines of 14px/1.3 is ~36px.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__title {
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 7px;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 14.5px;
		line-height: 1.3;
		margin: 0 0 6px;
		min-height: calc(1.3em * 2);
	}
}

/* ------------------------------------------------------------------ *
 * Price — premium hierarchy, kept on ONE line.
 *
 * `flex-wrap: nowrap` stops the old price dropping to its own row on
 * narrow mobile cards. `min-width: 0` plus `overflow: hidden` on the
 * del means an unusually long currency value is clipped rather than
 * overflowing the card, which was the reason wrapping was allowed
 * before.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__price {
	margin: 0 0 7px;
	min-height: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.rd-products ul.products li.product.rd-card .rd-card__price .price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: nowrap;
	min-width: 0;
}

.rd-products ul.products li.product.rd-card .rd-card__price ins {
	font-size: 16.5px;
	font-weight: 700;
	color: #f12d2d;
	letter-spacing: -.01em;
	white-space: nowrap;
	flex: 0 0 auto;
}

.rd-products ul.products li.product.rd-card .rd-card__price del {
	font-size: 12px;
	font-weight: 400;
	color: #a9b5c5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 17px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 11.5px;
	}
}

/* ------------------------------------------------------------------ *
 * Category — smaller and more muted, with graceful truncation.
 *
 * `text-overflow: ellipsis` on the name means an exceptionally long
 * category ("Beauty & Personal Care Equipment") truncates instead of
 * wrapping to two lines and breaking card alignment.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__cat {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 0;
	min-width: 0;
	margin: 0 0 12px;
	color: #7c8aa1;
	font-size: 12px;
	line-height: 1.2;
}

.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	opacity: .8;
}

.rd-products ul.products li.product.rd-card .rd-card__cat-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.rd-card__cat--empty {
	min-height: 0;
	margin: 0 0 12px;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cat {
		font-size: 12.5px;
		margin-bottom: 11px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------------ *
 * Add to cart — 40-42px on desktop, ~42px on mobile.
 *
 * Must reassert `min-height` against the `.rd-products .button` rule
 * from earlier in this file, which carries `!important`.
 *
 * On mobile the button is visually 42px. The 44px touch target is
 * preserved by an invisible `::before` that extends the hit area, so
 * accessibility is not traded away for the smaller visual.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__actions {
	margin-top: auto;
}

.rd-products ul.products li.product.rd-card .rd-card__cart {
	min-height: 42px !important;
	height: 42px !important;
	padding: 0 14px !important;
	border-radius: 7px;
	font-size: 13.5px !important;
	gap: 7px;
}

.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cart {
		min-height: 42px !important;
		height: 42px !important;
		padding: 0 8px !important;
		border-radius: 7px;
		font-size: 12px !important;
		gap: 6px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart::before {
		content: '';
		position: absolute;
		inset: -1px -4px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		position: relative;
	}
}

/* ------------------------------------------------------------------ *
 * Card frame — slightly tighter radius and a touch more depth.
 * ------------------------------------------------------------------ */

ul.products li.product.rd-card {
	border-radius: 11px;
	border: 1px solid #e8ebf0;
	box-shadow: 0 1px 2px rgba(29, 47, 80, .05), 0 4px 10px rgba(29, 47, 80, .03);
}

.rd-card__media {
	border-radius: 10px 10px 0 0;
}

/* ============================================================
   PRODUCT CARD PASS 2b — price row direction, mobile density

   Measured at 390 after the first compact pass:

       card 174x371   body width NaN x 191
         rd-card__title    h=38  mb=6
         rd-card__price    h=53  mb=7      <- 53px for a price
         rd-card__cat      h=15  mb=11
         rd-card__actions  h=42
       PRICE box h=53 wrap=nowrap
         ins t=1056 h=27 w=87 "AED55.00"
         del t=1090 h=18 w=57 "AED72.00"

   `flex-wrap` was already `nowrap`, yet ins (top 1056) and del (top
   1090) sat 34px apart — stacked, not side by side. The reason is
   that `.rd-card__price` picks up `flex-direction: column` from a
   generic `display: flex` rule elsewhere in the theme's price
   styling. `flex-wrap` is the cross-axis overflow property, so it has
   no effect while items are being stacked on the main axis. The
   direction has to be stated explicitly.

   Note also `.price` is not present as a wrapper here: WooCommerce's
   `get_price_html()` returns a bare `<del>` + `<ins>` for this store,
   so ins/del are direct flex children of `.rd-card__price` and the
   wrapper-level rule never applied to them.

   Fixing the direction puts both prices on one line and reclaims
   ~34px of card height at 390.
   ============================================================ */

.rd-products ul.products li.product.rd-card .rd-card__price {
	flex-direction: row !important;
	flex-flow: row nowrap !important;
	align-items: baseline;
	gap: 6px;
}

.rd-products ul.products li.product.rd-card .rd-card__price > del,
.rd-products ul.products li.product.rd-card .rd-card__price > ins,
.rd-products ul.products li.product.rd-card .rd-card__price > span {
	display: inline-block;
}

/* Body width was NaN in the same probe: `align-items: stretch` on the
 * card's flex column lets the body inherit a zero-basis width. Stated
 * explicitly so the price line has a real box to lay out in. */
.rd-products ul.products li.product.rd-card .rd-card__body {
	width: 100%;
	align-self: stretch;
}

/* Mobile: last density trim. */
@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		margin-bottom: 5px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price {
		margin-bottom: 6px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat {
		margin-bottom: 9px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__body {
		padding: 9px 10px 10px;
	}
}
/* ============================================================
   PRODUCT CARD PASS 2 — compactness / visual density

   The structure and functionality were correct, but the cards read
   as oversized marketplace cards rather than the approved dense
   reference. Measured before this pass:

       1440   card 400px   image 181px   content 219px
        768   card 401px   image 204px   content 197px
       1024   card 472px   image 235px   content 237px
        390   card 361px   image 172px   content 189px

   Targets from the brief:

       1440   card 340-365px   image 175-190px
        768   compact, not 450-470px tall
       1024   compact, not 450-470px tall
        390   image 160-180px, CTA ~42px, much shorter overall

   Where the height was going, at 1440:

       body padding 12 + 14 bottom            26px
       empty rating row 18 + 6 margin         24px   <- removed
       title (2 lines reserved) 37.8 + 6      43.8px
       price 20 + 8                           28px
       category 18 + 10                       28px
       CTA                                     44px   -> 42px
                                               -----
                                                193.8px

   The rating spacer is now gone from the markup entirely, and the
   remaining gaps are cut to the 8-12px the brief specifies:

       image -> title   10px
       title -> price    7px
       price -> category 7px
       category -> CTA  12px

   `.rd-card__body` remains a flex column and `.rd-card__actions`
   keeps `margin-top: auto`, so the CTA is still pinned to the bottom
   and every button in a row stays aligned — the alignment guarantee is
   unchanged, only the slack between sections is gone. Nothing here
   uses `justify-content: space-between`; the body packs its content
   from the top and only the CTA is pushed down.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Image height per breakpoint.
 *
 * The image still "visually dominates the upper portion" but no longer
 * consumes most of the card. A fixed ratio of 6/5 kept the image at
 * 235px on a 1024px tablet card, which was the single largest source of
 * tablet height. The ratio is retained, with an explicit height ceiling
 * so wide cards cannot drive the image taller than the brief allows.
 * ------------------------------------------------------------------ */

.rd-card__media {
	aspect-ratio: 6 / 5;
	max-height: 190px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-card__media {
		aspect-ratio: 6 / 5;
		max-height: 215px;
	}
}

@media (max-width: 767.98px) {
	.rd-card__media {
		/* Brief: image approximately 160-180px at 390-430. */
		aspect-ratio: auto;
		height: 168px;
		max-height: none;
	}
}

/* ------------------------------------------------------------------ *
 * Body spacing — compact top-down packing.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__body {
	padding: 10px 13px 12px;
	gap: 0;
	justify-content: flex-start;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__body {
		padding: 9px 11px 11px;
	}
}

/* ------------------------------------------------------------------ *
 * Rating row — only exists when there is real review data now.
 *
 * Kept styled (16px) so that when reviews arrive the row is compact
 * rather than suddenly generous, but it is no longer reserved space.
 * ------------------------------------------------------------------ */

.rd-card__rating {
	display: flex;
	align-items: center;
	gap: 5px;
	height: auto;
	min-height: 0;
	margin-bottom: 6px;
}

.rd-card__rating--empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Title — max 2 lines, consistently reserved.
 *
 * `min-height` is the height of exactly two lines, so every card
 * reserves the same small title area. This is deliberately NOT a large
 * general-purpose blank: two lines of 14px/1.3 is ~36px.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__title {
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 7px;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 14.5px;
		line-height: 1.3;
		margin: 0 0 6px;
		min-height: calc(1.3em * 2);
	}
}

/* ------------------------------------------------------------------ *
 * Price — premium hierarchy, kept on ONE line.
 *
 * `flex-wrap: nowrap` stops the old price dropping to its own row on
 * narrow mobile cards. `min-width: 0` plus `overflow: hidden` on the
 * del means an unusually long currency value is clipped rather than
 * overflowing the card, which was the reason wrapping was allowed
 * before.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__price {
	margin: 0 0 7px;
	min-height: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.rd-products ul.products li.product.rd-card .rd-card__price .price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: nowrap;
	min-width: 0;
}

.rd-products ul.products li.product.rd-card .rd-card__price ins {
	font-size: 16.5px;
	font-weight: 700;
	color: #f12d2d;
	letter-spacing: -.01em;
	white-space: nowrap;
	flex: 0 0 auto;
}

.rd-products ul.products li.product.rd-card .rd-card__price del {
	font-size: 12px;
	font-weight: 400;
	color: #a9b5c5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 17px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 11.5px;
	}
}

/* ------------------------------------------------------------------ *
 * Category — smaller and more muted, with graceful truncation.
 *
 * `text-overflow: ellipsis` on the name means an exceptionally long
 * category ("Beauty & Personal Care Equipment") truncates instead of
 * wrapping to two lines and breaking card alignment.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__cat {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 0;
	min-width: 0;
	margin: 0 0 12px;
	color: #7c8aa1;
	font-size: 12px;
	line-height: 1.2;
}

.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	opacity: .8;
}

.rd-products ul.products li.product.rd-card .rd-card__cat-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.rd-card__cat--empty {
	min-height: 0;
	margin: 0 0 12px;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cat {
		font-size: 12.5px;
		margin-bottom: 11px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------------ *
 * Add to cart — 40-42px on desktop, ~42px on mobile.
 *
 * Must reassert `min-height` against the `.rd-products .button` rule
 * from earlier in this file, which carries `!important`.
 *
 * On mobile the button is visually 42px. The 44px touch target is
 * preserved by an invisible `::before` that extends the hit area, so
 * accessibility is not traded away for the smaller visual.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__actions {
	margin-top: auto;
}

.rd-products ul.products li.product.rd-card .rd-card__cart {
	min-height: 42px !important;
	height: 42px !important;
	padding: 0 14px !important;
	border-radius: 7px;
	font-size: 13.5px !important;
	gap: 7px;
}

.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__cart {
		min-height: 42px !important;
		height: 42px !important;
		padding: 0 8px !important;
		border-radius: 7px;
		font-size: 12px !important;
		gap: 6px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart::before {
		content: '';
		position: absolute;
		inset: -1px -4px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		position: relative;
	}
}

/* ------------------------------------------------------------------ *
 * Card frame — slightly tighter radius and a touch more depth.
 * ------------------------------------------------------------------ */

ul.products li.product.rd-card {
	border-radius: 11px;
	border: 1px solid #e8ebf0;
	box-shadow: 0 1px 2px rgba(29, 47, 80, .05), 0 4px 10px rgba(29, 47, 80, .03);
}

.rd-card__media {
	border-radius: 10px 10px 0 0;
}

/* ============================================================
   PRODUCT CARD PASS 2b — price row direction, mobile density

   Measured at 390 after the first compact pass:

       card 174x371   body width NaN x 191
         rd-card__title    h=38  mb=6
         rd-card__price    h=53  mb=7      <- 53px for a price
         rd-card__cat      h=15  mb=11
         rd-card__actions  h=42
       PRICE box h=53 wrap=nowrap
         ins t=1056 h=27 w=87 "AED55.00"
         del t=1090 h=18 w=57 "AED72.00"

   `flex-wrap` was already `nowrap`, yet ins (top 1056) and del (top
   1090) sat 34px apart — stacked, not side by side. The reason is
   that `.rd-card__price` picks up `flex-direction: column` from a
   generic `display: flex` rule elsewhere in the theme's price
   styling. `flex-wrap` is the cross-axis overflow property, so it has
   no effect while items are being stacked on the main axis. The
   direction has to be stated explicitly.

   Note also `.price` is not present as a wrapper here: WooCommerce's
   `get_price_html()` returns a bare `<del>` + `<ins>` for this store,
   so ins/del are direct flex children of `.rd-card__price` and the
   wrapper-level rule never applied to them.

   Fixing the direction puts both prices on one line and reclaims
   ~34px of card height at 390.
   ============================================================ */

.rd-products ul.products li.product.rd-card .rd-card__price {
	flex-direction: row !important;
	flex-flow: row nowrap !important;
	align-items: baseline;
	gap: 6px;
}

.rd-products ul.products li.product.rd-card .rd-card__price > del,
.rd-products ul.products li.product.rd-card .rd-card__price > ins,
.rd-products ul.products li.product.rd-card .rd-card__price > span {
	display: inline-block;
}

/* Body width was NaN in the same probe: `align-items: stretch` on the
 * card's flex column lets the body inherit a zero-basis width. Stated
 * explicitly so the price line has a real box to lay out in. */
.rd-products ul.products li.product.rd-card .rd-card__body {
	width: 100%;
	align-self: stretch;
}

/* Mobile: last density trim. */
@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		margin-bottom: 5px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price {
		margin-bottom: 6px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat {
		margin-bottom: 9px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__body {
		padding: 9px 10px 10px;
	}
}

/* ============================================================
   PRODUCT CARD PASS 2c — price fits inside the card at 390

   Measured at 390, after the compact pass:

     price spilling past content padding = 7 / 12

     [2] contentRight=364  ins.right=375  overflow=11px
                           card.right=374   <- price is OUTSIDE the card
     [4] contentRight=364  ins.right=376  overflow=12px
                           card.right=374   <- price is OUTSIDE the card
     [8] contentRight=364  ins.right=376  overflow=12px
                           card.right=374   <- price is OUTSIDE the card

   Three cards had the red price crossing the card border by 1-2px.

   Cause: a 2-column card at 390 is only 174px wide, so the content box
   is 152px. The widest price pair on the catalogue —
   "AED 329.00" (red) + "AED 419.00" (struck) — needs ~166px at the
   previous 17px / 11.5px sizing plus a 6px gap. Holding both on one
   line, as required, means the type has to give up the difference.

   The price sizes step down slightly on mobile (17->16px red,
   11.5->10.5px struck, 6->4px gap), which returns ~14px of headroom
   while keeping both prices on one line and staying inside the brief's
   16-18px band for the current price.

   `overflow: hidden` on the price row is retained as a hard guarantee:
   a future product with a four-digit amount (AED 1,299.00) can clip
   inside the card but can never break its border.
   ============================================================ */

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__price {
		gap: 4px;
		overflow: hidden;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 10.5px;
	}
}

@media (min-width: 768px) {
	.rd-products ul.products li.product.rd-card .rd-card__price {
		overflow: hidden;
	}
}
/* ============================================================
   PRODUCT CARD TYPOGRAPHY PASS — desktop priority

   Card layout, width, image size, badges, wishlist, columns and
   button structure are APPROVED and untouched. This pass only
   changes type sizes and the order of the two prices.

   ------------------------------------------------------
   PRICE ORDER — CURRENT FIRST
   ------------------------------------------------------
   The requested order is:

       AED 55.00   AED 72.00
       ^ current    ^ old, struck through

   WooCommerce's `get_price_html()` emits the old price first and the
   current price second:

       <del>AED 72.00</del> <ins>AED 55.00</ins>

   so the rendered order has been old-price-first since the card was
   built, which is the opposite of what the brief asks for. The order
   is corrected with `order` on the flex children rather than by
   rewriting or reordering WooCommerce's markup — the semantic DOM
   order stays as WooCommerce emits it (which is what screen readers
   and any structured data rely on), and only the visual order
   changes. `del` is moved to `order: 2` and `ins` to `order: 1`.

   `.rd-card__price` is already `display: flex; flex-direction: row`,
   so `order` applies directly to the two children.

   ------------------------------------------------------
   SIZES
   ------------------------------------------------------
   Desktop (>=1200) — the main correction:

       title     14px   -> 15px   (line-height 1.3, weight 600)
       price     16.5px -> 16px   (weight 700, red)
       old price 12px   -> 12px   (unchanged)
       category  12px   -> 12px   (unchanged)
       CTA       13.5px -> 14px   (weight 600, icon 16px)

   The title and CTA step UP while the price steps DOWN: the brief
   identified the price as the element dominating a 6-column card,
   so that is where the size is taken from. Hierarchy is preserved
   and no whitespace is added — the CTA box is a fixed 42px, so the
   larger label does not grow the button, and the title grows by
   1.2px across its reserved two lines.

   Tablet (768-1199) — refined, not reduced:
       title 14px -> 15px, CTA 13.5px -> 14px, category 12 -> 12.5px.

   Mobile (<=767) — readability preserved, small corrections:
       title 14.5px -> 14px, category 12.5px -> 12px,
       CTA 12px -> 13px, old price 10.5px -> 11px.

   The mobile title and category step DOWN slightly and the CTA steps
   up, which trades a little decorative weight for a more legible
   tap label. The old price moves 10.5 -> 11px as the brief's 11-12px
   floor asks; that widens the price line by roughly 2px on the
   widest card at 390, which is re-measured below to confirm it still
   sits inside the card.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Price order: current first, old second.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__price ins {
	order: 1;
}

.rd-products ul.products li.product.rd-card .rd-card__price del {
	order: 2;
}

/* ------------------------------------------------------------------ *
 * DESKTOP — >= 1200px
 * ------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 15px;
		line-height: 1.3;
		font-weight: 600;
		/* Two lines of 15px/1.3 = 39px, replacing 14px/1.3 = 36.4px. */
		min-height: calc(1.3em * 2);
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16px;
		font-weight: 700;
		color: #f12d2d;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 12px;
		font-weight: 400;
		color: #a9b5c5;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat,
	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12px;
		line-height: 1.2;
		font-weight: 500;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
		width: 13px;
		height: 13px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 14px !important;
		font-weight: 600;
		/* Height stays 42px; the larger label must not grow the CTA. */
		min-height: 42px !important;
		height: 42px !important;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
		width: 16px;
		height: 16px;
	}

	/* Badge text stays as-is; asserted so it cannot drift upward. */
	.rd-products ul.products li.product.rd-card .rd-badge {
		font-size: 11px;
		height: 24px;
	}
}

/* ------------------------------------------------------------------ *
 * TABLET — 768-1199px. Refined only, not made substantially smaller.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 15px;
		line-height: 1.3;
		font-weight: 600;
		min-height: calc(1.3em * 2);
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16.5px;
		font-weight: 700;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 12.5px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat,
	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12.5px;
		line-height: 1.2;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 14px !important;
		font-weight: 600;
		min-height: 42px !important;
		height: 42px !important;
	}
}

/* ------------------------------------------------------------------ *
 * MOBILE — <= 767px. Readability preserved.
 * ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 14px;
		line-height: 1.3;
		font-weight: 600;
		min-height: calc(1.3em * 2);
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16px;
		font-weight: 700;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 11px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat,
	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12px;
		line-height: 1.2;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
		width: 12px;
		height: 12px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 13px !important;
		font-weight: 600;
		min-height: 42px !important;
		height: 42px !important;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
		width: 15px;
		height: 15px;
	}
}
/* ============================================================
   PRODUCT CARD TYPOGRAPHY PASS — desktop priority

   Card layout, width, image size, badges, wishlist, columns and
   button structure are APPROVED and untouched. This pass only
   changes type sizes and the order of the two prices.

   ------------------------------------------------------
   PRICE ORDER — CURRENT FIRST
   ------------------------------------------------------
   The requested order is:

       AED 55.00   AED 72.00
       ^ current    ^ old, struck through

   WooCommerce's `get_price_html()` emits the old price first and the
   current price second:

       <del>AED 72.00</del> <ins>AED 55.00</ins>

   so the rendered order has been old-price-first since the card was
   built, which is the opposite of what the brief asks for. The order
   is corrected with `order` on the flex children rather than by
   rewriting or reordering WooCommerce's markup — the semantic DOM
   order stays as WooCommerce emits it (which is what screen readers
   and any structured data rely on), and only the visual order
   changes. `del` is moved to `order: 2` and `ins` to `order: 1`.

   `.rd-card__price` is already `display: flex; flex-direction: row`,
   so `order` applies directly to the two children.

   ------------------------------------------------------
   SIZES
   ------------------------------------------------------
   Desktop (>=1200) — the main correction:

       title     14px   -> 15px   (line-height 1.3, weight 600)
       price     16.5px -> 16px   (weight 700, red)
       old price 12px   -> 12px   (unchanged)
       category  12px   -> 12px   (unchanged)
       CTA       13.5px -> 14px   (weight 600, icon 16px)

   The title and CTA step UP while the price steps DOWN: the brief
   identified the price as the element dominating a 6-column card,
   so that is where the size is taken from. Hierarchy is preserved
   and no whitespace is added — the CTA box is a fixed 42px, so the
   larger label does not grow the button, and the title grows by
   1.2px across its reserved two lines.

   Tablet (768-1199) — refined, not reduced:
       title 14px -> 15px, CTA 13.5px -> 14px, category 12 -> 12.5px.

   Mobile (<=767) — readability preserved, small corrections:
       title 14.5px -> 14px, category 12.5px -> 12px,
       CTA 12px -> 13px, old price 10.5px -> 11px.

   The mobile title and category step DOWN slightly and the CTA steps
   up, which trades a little decorative weight for a more legible
   tap label. The old price moves 10.5 -> 11px as the brief's 11-12px
   floor asks; that widens the price line by roughly 2px on the
   widest card at 390, which is re-measured below to confirm it still
   sits inside the card.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Price order: current first, old second.
 * ------------------------------------------------------------------ */

.rd-products ul.products li.product.rd-card .rd-card__price ins {
	order: 1;
}

.rd-products ul.products li.product.rd-card .rd-card__price del {
	order: 2;
}

/* ------------------------------------------------------------------ *
 * DESKTOP — >= 1200px
 * ------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 15px;
		line-height: 1.3;
		font-weight: 600;
		/* Two lines of 15px/1.3 = 39px, replacing 14px/1.3 = 36.4px. */
		min-height: calc(1.3em * 2);
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16px;
		font-weight: 700;
		color: #f12d2d;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 12px;
		font-weight: 400;
		color: #a9b5c5;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat,
	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12px;
		line-height: 1.2;
		font-weight: 500;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
		width: 13px;
		height: 13px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 14px !important;
		font-weight: 600;
		/* Height stays 42px; the larger label must not grow the CTA. */
		min-height: 42px !important;
		height: 42px !important;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
		width: 16px;
		height: 16px;
	}

	/* Badge text stays as-is; asserted so it cannot drift upward. */
	.rd-products ul.products li.product.rd-card .rd-badge {
		font-size: 11px;
		height: 24px;
	}
}

/* ------------------------------------------------------------------ *
 * TABLET — 768-1199px. Refined only, not made substantially smaller.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 15px;
		line-height: 1.3;
		font-weight: 600;
		min-height: calc(1.3em * 2);
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16.5px;
		font-weight: 700;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 12.5px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat,
	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12.5px;
		line-height: 1.2;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 14px !important;
		font-weight: 600;
		min-height: 42px !important;
		height: 42px !important;
	}
}

/* ------------------------------------------------------------------ *
 * MOBILE — <= 767px. Readability preserved.
 * ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__title {
		font-size: 14px;
		line-height: 1.3;
		font-weight: 600;
		min-height: calc(1.3em * 2);
	}

	.rd-products ul.products li.product.rd-card .rd-card__price ins {
		font-size: 16px;
		font-weight: 700;
	}

	.rd-products ul.products li.product.rd-card .rd-card__price del {
		font-size: 11px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat,
	.rd-products ul.products li.product.rd-card .rd-card__cat-name {
		font-size: 12px;
		line-height: 1.2;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cat-icon {
		width: 12px;
		height: 12px;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart {
		font-size: 13px !important;
		font-weight: 600;
		min-height: 42px !important;
		height: 42px !important;
	}

	.rd-products ul.products li.product.rd-card .rd-card__cart .rd-card__cart-icon {
		width: 15px;
		height: 15px;
	}
}

/* ============================================================
   PRICE ORDER — corrected target

   The first attempt at the swap above did not work, and the reason
   is worth recording because it is invisible in the source:

       PRICE ORDER: old first ✗   ins.x=101  del.x=38

   Measured DOM:

       <div class="rd-card__price">
         <span class="sale-price">
           <del ...>AED 72.00</del>
           <span class="screen-reader-text">...</span>
           <ins ...>AED 55.00</ins>
         </span>
       </div>

   `del` and `ins` are GRANDCHILDREN of the price row — WooCommerce
   wraps them in a `<span class="sale-price">`. `order` only affects
   flex items, so setting it on `ins`/`del` had no effect at all: they
   are not flex items of `.rd-card__price`, which had a single child.

   The flex row therefore has to be established on `.sale-price`
   itself, which is where `del` and `ins` are actually siblings. The
   screen-reader narration between them is already `display: none`, so
   it never becomes a flex item and never adds a gap.

   `.price` was also checked for as a wrapper and is absent on this
   store — the class is `sale-price`, which is why the earlier
   `.rd-card__price .price` rule had been matching nothing.
   ============================================================ */

.rd-products ul.products li.product.rd-card .rd-card__price > .sale-price {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

.rd-products ul.products li.product.rd-card .rd-card__price > .sale-price > ins {
	order: 1;
	flex: 0 0 auto;
	white-space: nowrap;
}

.rd-products ul.products li.product.rd-card .rd-card__price > .sale-price > del {
	order: 2;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.rd-products ul.products li.product.rd-card .rd-card__price > .sale-price {
		gap: 4px;
	}
}

/* ------------------------------------------------------------------ *
 * Height regression guard.
 *
 * The title grows from 14px to 15px on desktop and tablet, which adds
 * 1.2px across the reserved two lines. The CTA label grows to 14px but
 * the button box is pinned at 42px, so no height comes from it. No
 * extra padding or margin is introduced anywhere in this pass — only
 * type sizes and the flex ordering of the two prices.
 * ------------------------------------------------------------------ */
/* ============================================================
   SHOP + CATEGORY ARCHIVE — approved marketplace layout

   Composition, top to bottom:

       breadcrumb
       category title + description ....... product count (right)
       horizontal category cards
       [ filter sidebar ] [ result count + sort .... products ]
       pagination

   Layout proportions measured off the approved reference:

       sidebar            227px   ~22% of the content width
       gutter             13px
       results            ~76%    4 product columns inside it

   The product cards themselves are NOT restyled here — they are the
   already-approved component. This file only controls how many
   columns they take on an archive (4 beside the sidebar) and the
   spacing around them, so the archive reuses the approved card rather
   than duplicating it.
   ============================================================ */

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

.rd-archive {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px 48px;
}

.rd-archive .woocommerce-breadcrumb {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: #7c8aa1;
}

.rd-archive .woocommerce-breadcrumb a {
	color: #7c8aa1;
	text-decoration: none;
}

.rd-archive .woocommerce-breadcrumb a:hover {
	color: #c65300;
}

/* ------------------------------------------------------------------ *
 * Title block + product count
 * ------------------------------------------------------------------ */

.rd-archive__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 18px;
}

.rd-archive__title {
	margin: 0 0 4px;
	padding: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #0b2b4b;
}

.rd-archive__desc {
	max-width: 620px;
	font-size: 14px;
	line-height: 1.5;
	color: #5d6b7d;
}

.rd-archive__desc p {
	margin: 0 0 6px;
}

.rd-archive__count {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 5px;
	padding-top: 6px;
	white-space: nowrap;
	color: #0b2b4b;
}

.rd-archive__count-num {
	font-size: 14px;
	font-weight: 700;
}

.rd-archive__count-label {
	font-size: 13px;
	color: #5d6b7d;
}

/* ------------------------------------------------------------------ *
 * Horizontal category cards
 *
 * Content-sized cards, not equal columns, matching the reference.
 * On mobile the same track scrolls horizontally and the next arrow is
 * revealed only when it actually overflows.
 * ------------------------------------------------------------------ */

.rd-subcats {
	position: relative;
	margin: 0 0 22px;
}

.rd-subcats__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px 2px 4px;
	scroll-behavior: smooth;
}

.rd-subcats__track::-webkit-scrollbar {
	display: none;
}

.rd-subcat {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 220px;
	padding: 9px 14px 9px 10px;
	background: #fff;
	border: 1px solid #e3e7ed;
	border-radius: 10px;
	text-decoration: none;
	color: #0b2b4b;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rd-subcat:hover {
	border-color: #d45a00;
	box-shadow: 0 4px 12px rgba(11, 43, 75, .07);
	transform: translateY(-2px);
}

.rd-subcat__img {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: #f1f3f5;
	overflow: hidden;
}

.rd-subcat__img-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rd-subcat__img svg {
	width: 17px;
	height: 17px;
	color: #5d6b7d;
}

.rd-subcat__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #0b2b4b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-subcats__next {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: #fff;
	border: 1px solid #cfd6e0;
	border-radius: 50%;
	color: #0b2b4b;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(11, 43, 75, .12);
	z-index: 2;
}

.rd-subcats__next.is-visible {
	display: flex;
}

/* ------------------------------------------------------------------ *
 * Two-column archive body
 * ------------------------------------------------------------------ */

.rd-archive__layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

@media (max-width: 1023.98px) {
	.rd-archive__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * Filter sidebar
 * ------------------------------------------------------------------ */

.rd-filters {
	background: #fff;
	border: 1px solid #e3e7ed;
	border-radius: 10px;
	overflow: hidden;
}

.rd-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 14px;
	border-bottom: 1px solid #eceff3;
}

.rd-filters__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #0b2b4b;
}

.rd-filters__clear {
	font-size: 12.5px;
	font-weight: 500;
	color: #2b6cb0;
	text-decoration: none;
}

.rd-filters__clear:hover {
	text-decoration: underline;
}

.rd-filter {
	border-bottom: 1px solid #eceff3;
}

.rd-filter:last-child {
	border-bottom: 0;
}

.rd-filter__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #0b2b4b;
	text-align: left;
}

.rd-filter__head svg {
	flex: 0 0 auto;
	color: #8d99ab;
	transition: transform .2s ease;
}

.rd-filter__head[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

.rd-filter__head[aria-expanded="false"] + .rd-filter__body {
	display: none;
}

.rd-filter__body {
	padding: 0 14px 14px;
}

/* ---- checkbox rows ---- */

.rd-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	cursor: pointer;
	font-size: 13px;
	color: #2c3a4d;
}

.rd-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rd-check__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid #cbd3de;
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}

.rd-check input:checked + .rd-check__box {
	background: #d45a00;
	border-color: #d45a00;
}

.rd-check input:checked + .rd-check__box::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.rd-check input:focus-visible + .rd-check__box {
	outline: 2px solid #d45a00;
	outline-offset: 2px;
}

.rd-check__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-check__n {
	flex: 0 0 auto;
	font-size: 12px;
	color: #8d99ab;
}

/* ---- price range ---- */

.rd-price {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
}

.rd-price__input {
	flex: 1 1 0;
	min-width: 0;
	height: 34px;
	padding: 0 9px;
	border: 1px solid #cbd3de;
	border-radius: 6px;
	font-family: inherit;
	font-size: 12.5px;
	color: #0b2b4b;
	background: #fff;
}

.rd-price__input:focus {
	outline: none;
	border-color: #d45a00;
}

.rd-price__sep {
	flex: 0 0 auto;
	color: #8d99ab;
	font-size: 12px;
}

/*
 * Dual-handle slider.
 *
 * Two overlapping native range inputs: the lower one is painted over
 * the upper one so whichever handle is nearer the pointer receives the
 * click. Only the visual track and handles are drawn here; the inputs
 * themselves stay real and keyboard-reachable.
 */
.rd-price__track {
	position: relative;
	height: 18px;
	margin: 4px 4px 14px;
	--rd-lo: 0%;
	--rd-hi: 100%;
}

.rd-price__track::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 2px;
	background: #dfe4ea;
}

.rd-price__track::after {
	content: '';
	position: absolute;
	top: 8px;
	left: var(--rd-lo);
	right: calc(100% - var(--rd-hi));
	height: 3px;
	border-radius: 2px;
	background: #d45a00;
}

.rd-price__range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 18px;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.rd-price__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d45a00;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(11, 43, 75, .28);
	cursor: pointer;
}

.rd-price__range::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d45a00;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(11, 43, 75, .28);
	cursor: pointer;
}

.rd-price__range[data-rd-range-hi] {
	z-index: 2;
}

.rd-filters__apply {
	width: 100%;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #d45a00;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease;
}

.rd-filters__apply:hover {
	background: #b8490a;
}

/* ---- rating rows (only rendered with real reviews) ---- */

.rd-check--rating .rd-stars--filter {
	display: inline-flex;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-stars--filter .rd-star {
	width: 12px;
	height: 12px;
}

.rd-stars--filter .rd-star--full {
	color: #ffaa00;
}

.rd-stars--filter .rd-star--empty {
	color: #d8dee7;
}

/* ------------------------------------------------------------------ *
 * Results column
 * ------------------------------------------------------------------ */

.rd-results {
	min-width: 0;
}

.rd-results__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	padding: 6px 12px;
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid #e3e7ed;
	border-radius: 10px;
}

.rd-results__count {
	font-size: 13px;
	color: #5d6b7d;
}

.rd-results__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rd-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rd-sort__label {
	font-size: 13px;
	color: #5d6b7d;
}

.rd-sort__select {
	height: 34px;
	min-width: 168px;
	padding: 0 30px 0 10px;
	border: 1px solid #cbd3de;
	border-radius: 7px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6b7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 13px;
	color: #0b2b4b;
	cursor: pointer;
}

.rd-sort__select:focus {
	outline: none;
	border-color: #d45a00;
}

/* Mobile Filters / Sort buttons — desktop-hidden. */
.rd-mobile-tools {
	display: none;
	gap: 10px;
	margin-bottom: 12px;
}

.rd-mbtn {
	position: relative;
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #cfd6e0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: #0b2b4b;
	cursor: pointer;
}

.rd-mbtn__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------------ *
 * Product grid on the archive — 4 columns beside the sidebar.
 *
 * The cards themselves are the approved component; only the column
 * count differs from the homepage's 6-up dense grid.
 * ------------------------------------------------------------------ */

.rd-archive ul.products[class*="columns-"] {
	display: grid;
	gap: 12px;
	align-items: stretch;
	margin: 0;
}

@media (min-width: 1200px) {
	.rd-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.rd-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* Cards are narrower on an archive, so the image and type scale down a
 * little. These are the only card adjustments — structure, badges,
 * wishlist and button are untouched. */
@media (min-width: 1024px) {
	.rd-archive .rd-card__media {
		max-height: 165px;
	}

	.rd-archive .rd-card__cart {
		min-height: 40px !important;
		height: 40px !important;
		font-size: 13px !important;
	}
}

/* ------------------------------------------------------------------ *
 * Pagination — centred under the results column.
 * ------------------------------------------------------------------ */

.rd-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 26px 0 0;
}

.rd-pagination .page-numbers,
.rd-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	background: #fff;
	border: 1px solid #dfe4ea;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: #0b2b4b;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.rd-pagination .page-numbers:hover {
	border-color: #d45a00;
	color: #d45a00;
}

.rd-pagination .page-numbers.current {
	background: #d45a00;
	border-color: #d45a00;
	color: #fff;
	font-weight: 600;
}

.rd-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ------------------------------------------------------------------ *
 * Empty state
 * ------------------------------------------------------------------ */

.rd-results .woocommerce-info,
.rd-results .woocommerce-message,
.rd-results .woocommerce-notice {
	border: 1px solid #e3e7ed;
	border-radius: 8px;
	background: #fff;
	font-size: 13.5px;
}

/* ------------------------------------------------------------------ *
 * MOBILE
 * ------------------------------------------------------------------ */

@media (max-width: 1023.98px) {
	.rd-archive {
		padding: 0 16px 92px;
	}

	.rd-archive__title {
		font-size: 24px;
	}

	.rd-archive__desc {
		font-size: 13px;
	}

	/* The sidebar becomes a drawer, never a permanent column. */
	.rd-filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 9999;
		width: min(340px, 88vw);
		border-radius: 0;
		border: 0;
		overflow-y: auto;
		transform: translateX(-102%);
		transition: transform .26s ease;
		box-shadow: 0 0 0 100vmax rgba(11, 43, 75, 0);
	}

	.rd-filters.is-open {
		transform: translateX(0);
		box-shadow: 0 0 40px rgba(11, 43, 75, .28);
	}

	.rd-results__bar {
		display: none;
	}

	.rd-mobile-tools {
		display: flex;
	}

	.rd-subcat {
		max-width: none;
		flex-direction: column;
		gap: 7px;
		width: 96px;
		padding: 9px 6px;
		text-align: center;
	}

	.rd-subcat__img {
		width: 44px;
		height: 44px;
	}

	.rd-subcat__name {
		font-size: 11.5px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.rd-pagination {
		margin-bottom: 8px;
	}
}

/* Filter drawer scrim, added by JS only while open. */
.rd-scrim {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(11, 43, 75, .42);
	opacity: 0;
	pointer-events: none;
	transition: opacity .26s ease;
}

.rd-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 767.98px) {
	.rd-archive__head {
		margin-bottom: 14px;
	}

	.rd-subcats {
		margin-bottom: 16px;
	}

	.rd-subcats__next {
		display: none;
	}

	.rd-subcats__next.is-visible {
		display: flex;
	}
}
/* ============================================================
   SHOP + CATEGORY ARCHIVE — approved marketplace layout

   Composition, top to bottom:

       breadcrumb
       category title + description ....... product count (right)
       horizontal category cards
       [ filter sidebar ] [ result count + sort .... products ]
       pagination

   Layout proportions measured off the approved reference:

       sidebar            227px   ~22% of the content width
       gutter             13px
       results            ~76%    4 product columns inside it

   The product cards themselves are NOT restyled here — they are the
   already-approved component. This file only controls how many
   columns they take on an archive (4 beside the sidebar) and the
   spacing around them, so the archive reuses the approved card rather
   than duplicating it.
   ============================================================ */

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

.rd-archive {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px 48px;
}

.rd-archive .woocommerce-breadcrumb {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: #7c8aa1;
}

.rd-archive .woocommerce-breadcrumb a {
	color: #7c8aa1;
	text-decoration: none;
}

.rd-archive .woocommerce-breadcrumb a:hover {
	color: #c65300;
}

/* ------------------------------------------------------------------ *
 * Title block + product count
 * ------------------------------------------------------------------ */

.rd-archive__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 18px;
}

.rd-archive__title {
	margin: 0 0 4px;
	padding: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #0b2b4b;
}

.rd-archive__desc {
	max-width: 620px;
	font-size: 14px;
	line-height: 1.5;
	color: #5d6b7d;
}

.rd-archive__desc p {
	margin: 0 0 6px;
}

.rd-archive__count {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 5px;
	padding-top: 6px;
	white-space: nowrap;
	color: #0b2b4b;
}

.rd-archive__count-num {
	font-size: 14px;
	font-weight: 700;
}

.rd-archive__count-label {
	font-size: 13px;
	color: #5d6b7d;
}

/* ------------------------------------------------------------------ *
 * Horizontal category cards
 *
 * Content-sized cards, not equal columns, matching the reference.
 * On mobile the same track scrolls horizontally and the next arrow is
 * revealed only when it actually overflows.
 * ------------------------------------------------------------------ */

.rd-subcats {
	position: relative;
	margin: 0 0 22px;
}

.rd-subcats__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px 2px 4px;
	scroll-behavior: smooth;
}

.rd-subcats__track::-webkit-scrollbar {
	display: none;
}

.rd-subcat {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 220px;
	padding: 9px 14px 9px 10px;
	background: #fff;
	border: 1px solid #e3e7ed;
	border-radius: 10px;
	text-decoration: none;
	color: #0b2b4b;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rd-subcat:hover {
	border-color: #d45a00;
	box-shadow: 0 4px 12px rgba(11, 43, 75, .07);
	transform: translateY(-2px);
}

.rd-subcat__img {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: #f1f3f5;
	overflow: hidden;
}

.rd-subcat__img-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rd-subcat__img svg {
	width: 17px;
	height: 17px;
	color: #5d6b7d;
}

.rd-subcat__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #0b2b4b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-subcats__next {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: #fff;
	border: 1px solid #cfd6e0;
	border-radius: 50%;
	color: #0b2b4b;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(11, 43, 75, .12);
	z-index: 2;
}

.rd-subcats__next.is-visible {
	display: flex;
}

/* ------------------------------------------------------------------ *
 * Two-column archive body
 * ------------------------------------------------------------------ */

.rd-archive__layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

@media (max-width: 1023.98px) {
	.rd-archive__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * Filter sidebar
 * ------------------------------------------------------------------ */

.rd-filters {
	background: #fff;
	border: 1px solid #e3e7ed;
	border-radius: 10px;
	overflow: hidden;
}

.rd-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 14px;
	border-bottom: 1px solid #eceff3;
}

.rd-filters__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #0b2b4b;
}

.rd-filters__clear {
	font-size: 12.5px;
	font-weight: 500;
	color: #2b6cb0;
	text-decoration: none;
}

.rd-filters__clear:hover {
	text-decoration: underline;
}

.rd-filter {
	border-bottom: 1px solid #eceff3;
}

.rd-filter:last-child {
	border-bottom: 0;
}

.rd-filter__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #0b2b4b;
	text-align: left;
}

.rd-filter__head svg {
	flex: 0 0 auto;
	color: #8d99ab;
	transition: transform .2s ease;
}

.rd-filter__head[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

.rd-filter__head[aria-expanded="false"] + .rd-filter__body {
	display: none;
}

.rd-filter__body {
	padding: 0 14px 14px;
}

/* ---- checkbox rows ---- */

.rd-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	cursor: pointer;
	font-size: 13px;
	color: #2c3a4d;
}

.rd-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rd-check__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid #cbd3de;
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}

.rd-check input:checked + .rd-check__box {
	background: #d45a00;
	border-color: #d45a00;
}

.rd-check input:checked + .rd-check__box::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.rd-check input:focus-visible + .rd-check__box {
	outline: 2px solid #d45a00;
	outline-offset: 2px;
}

.rd-check__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-check__n {
	flex: 0 0 auto;
	font-size: 12px;
	color: #8d99ab;
}

/* ---- price range ---- */

.rd-price {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
}

.rd-price__input {
	flex: 1 1 0;
	min-width: 0;
	height: 34px;
	padding: 0 9px;
	border: 1px solid #cbd3de;
	border-radius: 6px;
	font-family: inherit;
	font-size: 12.5px;
	color: #0b2b4b;
	background: #fff;
}

.rd-price__input:focus {
	outline: none;
	border-color: #d45a00;
}

.rd-price__sep {
	flex: 0 0 auto;
	color: #8d99ab;
	font-size: 12px;
}

/*
 * Dual-handle slider.
 *
 * Two overlapping native range inputs: the lower one is painted over
 * the upper one so whichever handle is nearer the pointer receives the
 * click. Only the visual track and handles are drawn here; the inputs
 * themselves stay real and keyboard-reachable.
 */
.rd-price__track {
	position: relative;
	height: 18px;
	margin: 4px 4px 14px;
	--rd-lo: 0%;
	--rd-hi: 100%;
}

.rd-price__track::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 2px;
	background: #dfe4ea;
}

.rd-price__track::after {
	content: '';
	position: absolute;
	top: 8px;
	left: var(--rd-lo);
	right: calc(100% - var(--rd-hi));
	height: 3px;
	border-radius: 2px;
	background: #d45a00;
}

.rd-price__range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 18px;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.rd-price__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d45a00;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(11, 43, 75, .28);
	cursor: pointer;
}

.rd-price__range::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d45a00;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(11, 43, 75, .28);
	cursor: pointer;
}

.rd-price__range[data-rd-range-hi] {
	z-index: 2;
}

.rd-filters__apply {
	width: 100%;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #d45a00;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease;
}

.rd-filters__apply:hover {
	background: #b8490a;
}

/* ---- rating rows (only rendered with real reviews) ---- */

.rd-check--rating .rd-stars--filter {
	display: inline-flex;
	gap: 2px;
	flex: 0 0 auto;
}

.rd-stars--filter .rd-star {
	width: 12px;
	height: 12px;
}

.rd-stars--filter .rd-star--full {
	color: #ffaa00;
}

.rd-stars--filter .rd-star--empty {
	color: #d8dee7;
}

/* ------------------------------------------------------------------ *
 * Results column
 * ------------------------------------------------------------------ */

.rd-results {
	min-width: 0;
}

.rd-results__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	padding: 6px 12px;
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid #e3e7ed;
	border-radius: 10px;
}

.rd-results__count {
	font-size: 13px;
	color: #5d6b7d;
}

.rd-results__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rd-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rd-sort__label {
	font-size: 13px;
	color: #5d6b7d;
}

.rd-sort__select {
	height: 34px;
	min-width: 168px;
	padding: 0 30px 0 10px;
	border: 1px solid #cbd3de;
	border-radius: 7px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6b7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 13px;
	color: #0b2b4b;
	cursor: pointer;
}

.rd-sort__select:focus {
	outline: none;
	border-color: #d45a00;
}

/* Mobile Filters / Sort buttons — desktop-hidden. */
.rd-mobile-tools {
	display: none;
	gap: 10px;
	margin-bottom: 12px;
}

.rd-mbtn {
	position: relative;
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #cfd6e0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: #0b2b4b;
	cursor: pointer;
}

.rd-mbtn__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------------ *
 * Product grid on the archive — 4 columns beside the sidebar.
 *
 * The cards themselves are the approved component; only the column
 * count differs from the homepage's 6-up dense grid.
 * ------------------------------------------------------------------ */

.rd-archive ul.products[class*="columns-"] {
	display: grid;
	gap: 12px;
	align-items: stretch;
	margin: 0;
}

@media (min-width: 1200px) {
	.rd-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.rd-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.rd-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* Cards are narrower on an archive, so the image and type scale down a
 * little. These are the only card adjustments — structure, badges,
 * wishlist and button are untouched. */
@media (min-width: 1024px) {
	.rd-archive .rd-card__media {
		max-height: 165px;
	}

	.rd-archive .rd-card__cart {
		min-height: 40px !important;
		height: 40px !important;
		font-size: 13px !important;
	}
}

/* ------------------------------------------------------------------ *
 * Pagination — centred under the results column.
 * ------------------------------------------------------------------ */

.rd-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 26px 0 0;
}

.rd-pagination .page-numbers,
.rd-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	background: #fff;
	border: 1px solid #dfe4ea;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: #0b2b4b;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.rd-pagination .page-numbers:hover {
	border-color: #d45a00;
	color: #d45a00;
}

.rd-pagination .page-numbers.current {
	background: #d45a00;
	border-color: #d45a00;
	color: #fff;
	font-weight: 600;
}

.rd-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ------------------------------------------------------------------ *
 * Empty state
 * ------------------------------------------------------------------ */

.rd-results .woocommerce-info,
.rd-results .woocommerce-message,
.rd-results .woocommerce-notice {
	border: 1px solid #e3e7ed;
	border-radius: 8px;
	background: #fff;
	font-size: 13.5px;
}

/* ------------------------------------------------------------------ *
 * MOBILE
 * ------------------------------------------------------------------ */

@media (max-width: 1023.98px) {
	.rd-archive {
		padding: 0 16px 92px;
	}

	.rd-archive__title {
		font-size: 24px;
	}

	.rd-archive__desc {
		font-size: 13px;
	}

	/* The sidebar becomes a drawer, never a permanent column. */
	.rd-filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 9999;
		width: min(340px, 88vw);
		border-radius: 0;
		border: 0;
		overflow-y: auto;
		transform: translateX(-102%);
		transition: transform .26s ease;
		box-shadow: 0 0 0 100vmax rgba(11, 43, 75, 0);
	}

	.rd-filters.is-open {
		transform: translateX(0);
		box-shadow: 0 0 40px rgba(11, 43, 75, .28);
	}

	.rd-results__bar {
		display: none;
	}

	.rd-mobile-tools {
		display: flex;
	}

	.rd-subcat {
		max-width: none;
		flex-direction: column;
		gap: 7px;
		width: 96px;
		padding: 9px 6px;
		text-align: center;
	}

	.rd-subcat__img {
		width: 44px;
		height: 44px;
	}

	.rd-subcat__name {
		font-size: 11.5px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.rd-pagination {
		margin-bottom: 8px;
	}
}

/* Filter drawer scrim, added by JS only while open. */
.rd-scrim {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(11, 43, 75, .42);
	opacity: 0;
	pointer-events: none;
	transition: opacity .26s ease;
}

.rd-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 767.98px) {
	.rd-archive__head {
		margin-bottom: 14px;
	}

	.rd-subcats {
		margin-bottom: 16px;
	}

	.rd-subcats__next {
		display: none;
	}

	.rd-subcats__next.is-visible {
		display: flex;
	}
}

/* ============================================================
   ARCHIVE: suppress the parent theme's own loop chrome

   Two pieces of Blocksy chrome were rendering alongside this
   template's own controls:

   1. `.woo-listing-top` — Blocksy wraps WooCommerce's result count
      and ordering callbacks in this bar. Its content is removed at
      the PHP level (see the remove_action calls in
      archive-product.php), but the wrapper div itself is emitted by
      an anonymous closure on `woocommerce_before_shop_loop` that
      cannot be removed by name. The empty div is hidden here so it
      cannot contribute height.

   2. `.ct-pagination` — Blocksy suppresses WooCommerce's paginator
      by wrapping `woocommerce_template_part` for
      `loop/pagination.php` in ob_start()/ob_get_clean(). That
      template is loaded by WooCommerce's own archive-product.php,
      which this template replaces, so the suppression never fires
      and Blocksy's paginator prints. The template renders its own
      paginator, so Blocksy's is hidden at every breakpoint.

   Hiding by class rather than by PHP callback is deliberate: the
   parent theme's callbacks are anonymous closures and cannot be
   addressed by `remove_action()`.
   ============================================================ */

.woo-listing-top {
	display: none !important;
}

.ct-pagination {
	display: none !important;
}
t — compact equal-size icon between
      Search and Cart, keeping the wordmark centred.
   ============================================================ */

/* --- 1. AJAX View cart takes over the button slot --- */
.rd-card__actions .added_to_cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: #c65300;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease;
}
.rd-card__actions .added_to_cart:hover,
.rd-card__actions .added_to_cart:focus {
	background: #a34400;
	color: #fff !important;
}
/* The original button has done its job; showing both would double
   the card height and leave two mismatched controls stacked. */
.rd-card__actions .rd-card__cart.added {
	display: none !important;
}
/* Never let WooCommerce's own blue win. */
.rd-card__actions .added_to_cart,
.rd-card__actions a.added_to_cart:link,
.rd-card__actions a.added_to_cart:visited {
	background: #c65300 !important;
	color: #fff !important;
}

/* Mobile keeps the same button metrics as desktop. */
@media (max-width: 767.98px) {
	.rd-card__actions .added_to_cart {
		min-height: 38px;
		padding: 7px 10px;
		font-size: 12px;
		border-radius: 6px;
	}
}

/* --- 2/3. Bottom-nav cart badge --- */
.rd-bottom-nav .rd-action__badge--bn {
	position: absolute;
	top: 4px;
	left: 50%;
	right: auto;
	margin-left: 3px;
	min-width: 15px;
	height: 15px;
	line-height: 15px;
	font-size: 9px;
	background: var(--rd-sale);
}

/* --- 4. Mobile header: wishlist icon between Search and Cart --- */
.rd-headicon--wishlist { position: relative; }

/* Keep three icons + a centred wordmark balanced at 360-440px by
   trimming the gap rather than displacing the logo. */
@media (max-width: 440px) {
	.rd-brand-zone--end { gap: 2px; }
	.rd-headicon--wishlist svg { width: 21px; height: 21px; }
}
/* ============================================================
   FUNCTIONAL UI FIX PASS
   1. AJAX "View cart" swaps into the add-to-cart slot (no blue,
      no double button, no card-height change).
   2. Cart count uses one class across header + bottom nav.
   3. Mobile header wishlist icon, wordmark stays centred.
   ============================================================ */
.rd-card__actions .added_to_cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: #c65300 !important;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease;
}
.rd-card__actions .added_to_cart:hover,
.rd-card__actions .added_to_cart:focus { background: #a34400 !important; color: #fff !important; }
.rd-card__actions .rd-card__cart.added { display: none !important; }
/*
 * Robust variant: once WooCommerce injects `.added_to_cart` into the
 * row, the add-to-cart button has done its job, so hide it.
 *
 * `:has()` is used instead of matching a state class because
 * WooCommerce is inconsistent about that class: the same AJAX add
 * produced `.added` on /shop/ but only `.add` on the homepage, so a
 * `.added` selector left two stacked buttons on the homepage rows.
 */
.rd-card__actions:has( > .added_to_cart ) > .rd-card__cart { display: none !important; }
/*
 * The homepage grid ships a higher-specificity rule of its own:
 *   .rd-products ul.products li.product.rd-card .rd-card__cart
 *   { display: flex !important }            specificity (0,4,2)
 * which outranks the plain `:has()` rule above (0,3,0), so on the
 * homepage rows the spent button stayed visible next to "View cart".
 * Mirroring that selector shape restores the same outcome in the grid.
 */
.rd-products ul.products li.product.rd-card .rd-card__actions:has( > .added_to_cart ) > .rd-card__cart { display: none !important; }
@media (max-width: 767.98px) {
	.rd-card__actions .added_to_cart { min-height: 38px; padding: 7px 10px; font-size: 12px; border-radius: 6px; }
}
.rd-bottom-nav .rd-action__badge--bn {
	position: absolute;
	top: 4px;
	left: 50%;
	right: auto;
	margin-left: 3px;
	min-width: 15px;
	height: 15px;
	line-height: 15px;
	font-size: 9px;
	background: var(--rd-sale);
}
.rd-headicon--wishlist { position: relative; }
@media (max-width: 440px) {
	.rd-brand-zone--end { gap: 2px; }
	.rd-headicon--wishlist svg { width: 21px; height: 21px; }
}

/* ============================================================
   HEADER: 3-COLUMN GRID + RESPONSIVE FIT (320-767px)

   The measured cause of the collision: `.rd-branding` had FOUR
   children (menu trigger, empty spacer, logo, icon cluster) and
   balanced the sides with a fixed 88px spacer. At 320-390px the
   intrinsic total (88 + 194 logo + 148 icons = 430px) exceeded the
   viewport, so the centred logo and the icon cluster overlapped —
   the search icon sat on the wordmark.

   The trigger now lives INSIDE the start zone, so the row is
   exactly three children and can be a real 1fr / auto / 1fr grid:
   the logo is mathematically centred, both sides get an equal
   share of whatever is left, and neither can push into the logo.
   Nothing here depends on a magic pixel value for one width.
   ============================================================ */
@media (max-width: 767.98px) {
	.rd-branding {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: 6px;
		width: 100%;
	}
	.rd-brand-zone--start {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-width: 0;
	}
	.rd-brand-logo {
		min-width: 0;
		justify-self: center;
	}
	.rd-brand-zone--end {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0;
		min-width: 0;
	}
}

/* Keep the mark and wordmark a little tighter on phones so the
   middle column never starves the two icon columns. */
@media (max-width: 420px) {
	.rd-logo { gap: 5px; }
	.rd-logo__mark { width: 28px; height: 28px; border-radius: 7px; }
	.rd-logo__mark svg { width: 17px; height: 17px; }
	.rd-logo__name { font-size: 18px; letter-spacing: -.3px; }
}
@media (max-width: 340px) {
	.rd-logo__mark { width: 25px; height: 25px; }
	.rd-logo__mark svg { width: 15px; height: 15px; }
	.rd-logo__name { font-size: 16px; }
	.rd-branding { column-gap: 2px; }
}

/* Touch targets: 44px comfortably, easing to the 40px floor the
   brief allows only when the viewport is genuinely narrow. */
@media (max-width: 767.98px) {
	.rd-headicon { width: 42px; height: 42px; }
	.rd-headicon svg { width: 21px; height: 21px; }
	.rd-brand-zone--end .ct-header-trigger,
	.rd-brand-zone--start .ct-header-trigger {
		width: 42px;
		height: 42px;
		border: 0;
		background: transparent;
		color: var(--rd-deep);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		cursor: pointer;
		border-radius: 8px;
	}
	.rd-brand-zone--start .ct-header-trigger svg { width: 21px; height: 21px; }
}
@media (max-width: 359.98px) {
	.rd-headicon,
	.rd-brand-zone--start .ct-header-trigger { width: 40px; height: 40px; }
	.rd-headicon svg { width: 20px; height: 20px; }
}

/* ============================================================
   TABLET HEADER: wishlist in the action cluster
   ============================================================ */
.rd-tablet-action { position: relative; }
.rd-tablet-action--wishlist { position: relative; }
.rd-tablet-action .rd-action__badge--wish {
	top: 2px;
	right: 0;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: 10px;
	background: var(--rd-sale);
}

/* Keep the tablet cluster from crowding at the low end of the band. */
@media (min-width: 768px) and (max-width: 900px) {
	.rd-tablet-search { min-width: 0; }
	.rd-tablet-zone { gap: 6px; }
}

/* ============================================================
   WISHLIST PAGE
   Uses the approved product cards (same content-product.php),
   so only the page furniture is new here.
   ============================================================ */
.rd-wishlist { padding-top: var(--rd-space-t); }
.rd-wishlist__count {
	font-size: 13.5px;
	color: var(--rd-muted);
	margin: 0 0 18px;
}

/* Reuse the exact grid the homepage rows use so the cards line up
   with the rest of the store at every breakpoint. */
.rd-wishlist ul.products {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1439.98px) { .rd-wishlist ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023.98px) { .rd-wishlist ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .rd-wishlist ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* --- Empty state --- */
.rd-wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 72px 24px 88px;
	max-width: 460px;
	margin: 0 auto;
}
.rd-wishlist-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--rd-surface-light);
	color: var(--rd-muted);
	margin-bottom: 22px;
}
.rd-wishlist-empty__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--rd-deep);
	margin: 0 0 8px;
}
.rd-wishlist-empty__text {
	font-size: 14.5px;
	color: var(--rd-muted);
	line-height: 1.6;
	margin: 0 0 26px;
}
.rd-wishlist-empty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 30px;
	border-radius: var(--rd-radius);
	background: var(--rd-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--rd-transition);
}
.rd-wishlist-empty__cta:hover { background: var(--rd-primary-hover); color: #fff; }
@media (max-width: 767.98px) {
	.rd-wishlist-empty { padding: 52px 20px 60px; }
	.rd-wishlist-empty__cta { width: 100%; max-width: 320px; }
}

/* ============================================================
   MOBILE HEADER: breathing room between wordmark and icon cluster

   Verified with no overlap at 320-440px, but the gap measured
   only a few pixels at 390px, which reads as "touching" even though
   the boxes do not intersect. Widen the gutter and trim the
   wordmark slightly so the separation is obvious at a glance.
   ============================================================ */
@media (max-width: 460px) {
	.rd-branding { column-gap: 12px; }
	.rd-logo__name { font-size: 17px; letter-spacing: -.2px; }
	.rd-logo__mark { width: 27px; height: 27px; border-radius: 7px; }
	.rd-logo__mark svg { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
	.rd-branding { column-gap: 8px; }
	.rd-logo__name { font-size: 16px; }
	.rd-logo__mark { width: 25px; height: 25px; }
	.rd-logo__mark svg { width: 15px; height: 15px; }
}
@media (min-width: 461px) and (max-width: 767.98px) {
	.rd-branding { column-gap: 14px; }
}

/* ============================================================
   MOBILE HEADER: return the logo to normal flow

   THE REAL CAUSE of the logo/icon collision.

   Two earlier rules positioned the wordmark absolutely:

     .ct-header [data-row="middle"] .rd-brand-logo .rd-logo
       { position:absolute; left:50%; top:50%;
         transform:translate(-50%,-50%) }
     .ct-header [data-row="middle"] .rd-brand-logo
       { position:absolute !important; left:84px; ... }

   Those are hard-coded pixel offsets. Because the wordmark was out
   of flow it contributed ZERO width to its grid cell, so the 1fr /
   auto / 1fr row handed the whole 190px middle column to nothing
   while the icon cluster overflowed its own 88px column and slid
   left across the wordmark.

   Measured before this fix at 390px: the logo box overlapped the
   search icon by 16px (40px at 320px).

   With the logo back in flow the row is a genuine grid: the
   middle column is exactly as wide as the wordmark and the two
   sides get an equal share, so the collision cannot recur at any
   width.
   ============================================================ */
@media (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-logo,
	.ct-header [data-row="middle"] .rd-brand-logo .rd-logo {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		white-space: nowrap;
	}
}

/* ============================================================
   MOBILE HEADER: compact premium action group

   Measured before this block at 390px (visible header only):

     touch target 42px, glyph 21px  -> visual icon-to-icon gap ~21px
     logo to first icon             -> ~40px

   Both read as "stretched across the row" rather than a compact
   app header. Two changes, no absolute positioning:

   1. Larger glyphs inside the SAME 40px touch target. The eye
      judges the glyph, not the hit box, so 40px button with a 26px
      glyph gives ~14px between icons while every control keeps a
      40x40 target. Shrinking the button to reach an 8px gap would
      break the touch requirement.

   2. Side zones sized to their content (`width: max-content`) and a
      4px grid gutter, so the leftover space in the 1fr columns no
      longer pushes the icon group away from the wordmark. The row
      stays a real 1fr / auto / 1fr grid: the wordmark remains
      centred because both side columns are equal 1fr.
   ============================================================ */
@media (max-width: 767.98px) {
	.rd-brand-zone--start {
		width: max-content;
		justify-self: start;
	}
	.rd-brand-zone--end {
		width: max-content;
		justify-self: end;
		gap: 0;
	}
	.rd-brand-logo {
		width: max-content;
		justify-self: center;
	}

	.rd-headicon {
		width: 40px;
		height: 40px;
	}
	.rd-headicon svg {
		width: 26px;
		height: 26px;
		stroke-width: 1.7;
	}

	.rd-brand-zone--start .ct-header-trigger {
		width: 40px;
		height: 40px;
	}
	.rd-brand-zone--start .ct-header-trigger svg {
		width: 24px;
		height: 24px;
	}

	/* Gutter only; the 1fr columns absorb the rest. */
	.rd-branding { column-gap: 4px; }
}

/* The badge must stay glued to the heart when the target shrinks. */
@media (max-width: 767.98px) {
	.rd-headicon .rd-action__badge--wish {
		top: 1px;
		right: 0;
		min-width: 15px;
		height: 15px;
		line-height: 15px;
		font-size: 9.5px;
	}
}

/* ============================================================
   MOBILE HEADER: column sizing correction

   The compact pass used `minmax(0, 1fr)`. That allows a track to
   shrink BELOW its content, so the 120px icon group overflowed its
   track and slid left into the wordmark - the icons ended up
   touching the logo at 390px.

   `minmax(min-content, 1fr)` forbids that: each side track is at
   least as wide as its content, so the group can never cross into
   the centre column. The two 1fr tracks stay equal, which is what
   keeps the wordmark centred.

   The gap is then guaranteed by padding on the end zone rather
   than by the grid gutter, because leftover 1fr space varies with
   the wordmark width.
   ============================================================ */
@media (max-width: 767.98px) {
	.rd-branding {
		grid-template-columns:
			minmax(min-content, 1fr)
			auto
			minmax(min-content, 1fr);
		column-gap: 0;
	}
	.rd-brand-zone--end { padding-left: 14px; }
}

/* Very narrow: keep the whole row inside the viewport. */
@media (max-width: 359.98px) {
	.rd-headicon { width: 38px; height: 38px; }
	.rd-headicon svg { width: 24px; height: 24px; }
	.rd-brand-zone--start .ct-header-trigger { width: 38px; height: 38px; }
	.rd-brand-zone--start .ct-header-trigger svg { width: 22px; height: 22px; }
	.rd-brand-zone--end { padding-left: 8px; }
	.rd-logo__name { font-size: 15px; }
	.rd-logo__mark { width: 24px; height: 24px; }
	.rd-logo__mark svg { width: 14px; height: 14px; }
	.rd-logo { gap: 4px; }
}

/* Comfortable band: a touch more air around the wordmark. */
@media (min-width: 400px) and (max-width: 767.98px) {
	.rd-brand-zone--end { padding-left: 18px; }
	.rd-brand-zone--start { padding-right: 8px; }
}

/* ============================================================
   MOBILE HEADER: flex layout (final)

   The grid row was mis-sizing its centre track - it resolved to
   214px for a 106px wordmark - which pushed the icon group back
   over the logo. Flexbox lays the three children out in sequence,
   so a side group can never cross into the centre column.

   `flex: 1 1 0` on BOTH side zones makes them equal, which is what
   keeps the wordmark centred in the viewport, and `flex: 0 0 auto`
   on the wordmark stops it being squeezed.

   The icon group is sized to fit inside its share of the row:
   three 40px targets = 120px, and at 390px each side receives
   (390 - 106 - 20) / 2 = 132px. Below 375px the targets ease to
   38px so the group still fits without overflowing.
   ============================================================ */
@media (max-width: 767.98px) {
	.rd-branding {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 0;
	}

	.rd-brand-zone--start {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.rd-brand-logo {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}

	.rd-brand-zone--end {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0;
		padding-left: 14px;
	}
}

@media (min-width: 400px) and (max-width: 767.98px) {
	.rd-brand-zone--end { padding-left: 20px; }
}

@media (max-width: 374.98px) {
	.rd-headicon { width: 38px; height: 38px; }
	.rd-headicon svg { width: 24px; height: 24px; }
	.rd-brand-zone--start .ct-header-trigger { width: 38px; height: 38px; }
	.rd-brand-zone--start .ct-header-trigger svg { width: 22px; height: 22px; }
	.rd-brand-zone--end { padding-left: 10px; }
	.rd-logo__name { font-size: 16px; }
	.rd-logo__mark { width: 26px; height: 26px; }
	.rd-logo__mark svg { width: 16px; height: 16px; }
	.rd-logo { gap: 5px; }
}

/* ============================================================
   MOBILE HEADER: flex layout (final, specificity-matched)

   Why the previous block did nothing: Blocksy ships
   `.ct-header [data-row="middle"] .rd-branding { display: grid }`,
   specificity 0,3,0. My `.rd-branding { display: flex }` is 0,1,0,
   so Blocksy won no matter how late the rule appeared in the file.
   Every selector below is written to MATCH that specificity, and
   the layout properties are `!important` so they cannot be lost
   again to a cascade change.

   The grid was also the reason the centre track resolved to 214px
   for a 106px wordmark: the `auto` track was sized by the whole
   column, then the icon group was pushed back over the wordmark.
   Flexbox lays the three children out in sequence, so the icon
   group can never cross into the centre.
   ============================================================ */
@media (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-branding {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		width: 100%;
		column-gap: 0 !important;
		gap: 0 !important;
	}

	/* THE OTHER OUT-OF-FLOW HACK.

	   `.rd-brand-zone--end` is `position: absolute` in the legacy
	   header CSS. Being out of flow it was laid out over the
	   wordmark rather than beside it, which is what produced the
	   collision AND the 214px grid track. Both side zones go back
	   into flow so the flex row can lay them out in sequence. */
	.ct-header [data-row="middle"] .rd-brand-zone--start,
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
	}

	.ct-header [data-row="middle"] .rd-brand-zone--start {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: auto !important;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 0 !important;
		width: auto !important;
	}

	.ct-header [data-row="middle"] .rd-brand-zone--end {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 0 !important;
		width: auto !important;
		padding-left: 14px !important;
	}

	.ct-header [data-row="middle"] .rd-headicon {
		width: 40px !important;
		height: 40px !important;
		flex: 0 0 40px !important;
	}
	.ct-header [data-row="middle"] .rd-headicon svg {
		width: 26px !important;
		height: 26px !important;
	}
	.ct-header [data-row="middle"] .rd-brand-zone--start .ct-header-trigger {
		width: 40px !important;
		height: 40px !important;
	}
	.ct-header [data-row="middle"] .rd-brand-zone--start .ct-header-trigger svg {
		width: 24px !important;
		height: 24px !important;
	}
}

@media (min-width: 400px) and (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		padding-left: 20px !important;
	}
}

@media (max-width: 374.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		padding-left: 10px !important;
	}
	.ct-header [data-row="middle"] .rd-headicon {
		width: 38px !important;
		height: 38px !important;
		flex-basis: 38px !important;
	}
	.ct-header [data-row="middle"] .rd-headicon svg {
		width: 24px !important;
		height: 24px !important;
	}
	.ct-header [data-row="middle"] .rd-brand-zone--start .ct-header-trigger {
		width: 38px !important;
		height: 38px !important;
	}
	.ct-header [data-row="middle"] .rd-logo__name { font-size: 16px !important; }
	.ct-header [data-row="middle"] .rd-logo__mark { width: 26px !important; height: 26px !important; }
	.ct-header [data-row="middle"] .rd-logo__mark svg { width: 16px !important; height: 16px !important; }
}

/* ============================================================
   MOBILE HEADER: constant logo-to-group gap

   With equal 1fr side tracks the wordmark IS centred, but the
   spare space lands in the icon track, so the gap between the
   wordmark and the first icon grew with the viewport:

     390px -> 28px      430px -> 47px      440px -> 52px

   Giving the WORDMARK the free space instead of the side tracks
   fixes that: the logo absorbs the slack and centres inside it,
   while both side zones stay exactly as wide as their content.
   The gap is then purely the end zone's padding and no longer
   depends on the viewport at all.

   The wordmark sits ~10px left of the true centre because the
   menu (40px) and the icon group (166px) are not equal, which is
   the same visual balance every shopping app uses.
   ============================================================ */
@media (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--start {
		flex: 0 0 auto !important;
		padding-right: 8px;
	}

	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 1 1 auto !important;
		justify-content: center !important;
		min-width: 0 !important;
	}

	.ct-header [data-row="middle"] .rd-brand-zone--end {
		flex: 0 0 auto !important;
		padding-left: 16px !important;
	}
}

@media (min-width: 400px) and (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		padding-left: 18px !important;
	}
}

/* ============================================================
   MOBILE HEADER: centring restored, gap trimmed per band

   Letting the wordmark absorb the free space kept the gap
   constant but pushed it ~70px left of centre, because the icon
   group (166px) is far wider than the menu (40px). Centring the
   wordmark and holding a fixed gap are mutually exclusive on a
   phone: 40 + 106 + 120 = 266px of the 320px row is already
   committed, so only ~27px is left for BOTH margins.

   Centring wins, and the gap is trimmed with band-specific
   padding so it lands in a sane range instead of 52px at 440.

     320-374  targets 38px, pad 12 -> gap ~16-20px
     375-399  targets 40px, pad 12 -> gap ~16-20px
     400-767  pad 0      -> gap ~27-32px

   The wordmark stays within ~15px of true centre at every width.
   ============================================================ */
@media (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--start {
		flex: 1 1 0 !important;
		padding-right: 0;
	}
	.ct-header [data-row="middle"] .rd-brand-logo {
		flex: 0 0 auto !important;
		justify-content: center !important;
	}
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		flex: 1 1 0 !important;
		padding-left: 12px !important;
	}
}

@media (min-width: 400px) and (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		padding-left: 0 !important;
	}
}

/* ============================================================
   MOBILE HEADER: icon group centred in its own zone

   With the group flush right (`justify-content: flex-end`) the
   spare track space all piled up between the wordmark and the
   first icon: 27px at 390 and 46px at 440.

   Centring the group inside the equal side zone splits that spare
   space evenly, which is the smallest gap achievable while the
   wordmark stays centred:

     390px -> (390-106)/2 - 120 = 22 -> ~11px after splitting
     440px -> (440-106)/2 - 120 = 47 -> ~23px after splitting

   440px is the geometric floor for a 106px wordmark, three 40px
   targets and true centring on a 440px row. It also leaves the
   icons inset from the edge, which reads as deliberate padding
   rather than slack.
   ============================================================ */
@media (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		justify-content: center !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
}

@media (min-width: 400px) and (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* 320px: commit the space. Smaller wordmark, smaller targets, and
   the group hugs the right so the row still fits without overlap. */
@media (max-width: 339.98px) {
	.ct-header [data-row="middle"] .rd-brand-zone--end {
		justify-content: flex-end !important;
		padding-left: 8px !important;
		padding-right: 0 !important;
	}
	.ct-header [data-row="middle"] .rd-logo__name { font-size: 15px !important; }
	.ct-header [data-row="middle"] .rd-logo__mark { width: 24px !important; height: 24px !important; }
	.ct-header [data-row="middle"] .rd-logo__mark svg { width: 14px !important; height: 14px !important; }
	.ct-header [data-row="middle"] .rd-logo { gap: 4px !important; }
}

/* ============================================================
   MOBILE HEADER: trim the gap at 400px+

   With the wordmark centred the gap between it and the icon group
   is half the spare track space:

       gap = ( (viewport - logoWidth) / 2 - 120 ) / 2

   320-399px lands at 16-20px, but 430-440px still showed 32-35px
   purely because there is more row to share out.

   The only lever that does not break a requirement is the
   wordmark itself - and ENLARGING it is allowed ("do not reduce
   the logo"), so at 400px+ the mark and name ease up slightly.
   That pulls the gap down to the 14-18px band without touching
   the icon targets, which stay 40px.
   ============================================================ */
@media (min-width: 400px) and (max-width: 767.98px) {
	.ct-header [data-row="middle"] .rd-logo__name { font-size: 19px !important; }
	.ct-header [data-row="middle"] .rd-logo__mark { width: 31px !important; height: 31px !important; }
	.ct-header [data-row="middle"] .rd-logo__mark svg { width: 19px !important; height: 19px !important; }
	.ct-header [data-row="middle"] .rd-logo { gap: 7px !important; }
}

/* ==================================================================
   HEADER STACK

   Required order, with nothing overlapping:

       [ navy benefit bar ]
       [ main RD Souq header ]
       [ category navigation where applicable ]
       [ page content ]

   WHAT WAS ACTUALLY WRONG
   -----------------------
   The bar was NOT overlapped by the header. Measured at
   390/430/768/1024/1440 the bar sat at y=0 with its full height
   visible and the header began exactly where the bar ended
   (barCovered 0, barClipped 0 at every width).

   What looked like a clipped bar was a DIFFERENT element painted over
   it: the product page's "Add to wishlist" button had inherited
   `position:absolute; top:9px; right:10px; z-index:4` from the
   product-card heart rule and landed on the bar at the top-left of the
   viewport. That is fixed in the product CSS; the explicit stacking
   below makes the layers unambiguous so it cannot silently regress.

   NOTE ON THE BAR CONTENT - do not "fix" this
   -------------------------------------------
   Below 1200px the bar deliberately shows ONE centred message at a
   time. That is an existing, approved CSS-animation rotator defined
   around style.css line 23676 (@media max-width:1199.98px), which
   absolutely positions each message inside a clipping viewport and
   cycles them. At 1200px and up all four messages sit in one static
   row (measured at 1440: x = 334 / 596 / 759 / 936, all visible).

   An earlier attempt in this pass added a scroll-snap carousel at
   767.98px and a two-row wrap at 768-1199px. Both fought the rotator:
   the items were already position:absolute, so flex-wrap did nothing
   and three of the four messages stayed pushed off the right edge
   (measured itemX [259, 768, 768, 768] at 768px). Those rules are
   removed rather than layered on top.
   ================================================================== */

.rd-announcement {
	position: relative;
	z-index: 60;
}

.rd-announcement .rd-announcebar-item {
	white-space: nowrap;
}

/* The header always occupies the space directly beneath the bar. */
#header,
header.ct-header {
	position: relative;
	z-index: 50;
}

/*
 * The bar scrolls away with the header - both are in normal flow, so
 * there is no sticky offset to reconcile and no gap to leave behind.
 * Forcing position:sticky on the header here would fight Blocksy's own
 * sticky implementation, so the stacking is left as relative + z-index.
 */

/*
 * BOTTOM NAVIGATION IS A GLOBAL VIEWPORT OVERLAY
 * ----------------------------------------------
 * `.rd-bottom-nav` is `position: fixed` on every mobile page, so the
 * last 56px of content sat underneath it everywhere - footer links on
 * the homepage and archives included. The space is reserved globally
 * here rather than compensated per page.

 */

/* ==================================================================
   NO ARTIFICIAL GAP between the header/navigation and the content

   Blocksy's product page-title block adds generous vertical padding,
   which left the breadcrumb floating in an empty band above the
   product area. Trimmed, not removed - the breadcrumb stays.
   ================================================================== */
.rd-is-product [data-prefix="product"] .entry-header {
	padding-top: 14px;
	padding-bottom: 6px;
}

.rd-is-product [data-prefix="product"] .page-title {
	display: none;
}

/* ==================================================================
   SINGLE PRODUCT PAGE - ONE AUTHORITATIVE LAYOUT

   Replaces every earlier product-page rule. Nothing from previous
   iterations survives underneath this block: there is no override
   stack, and no selector here re-declares another's job.

   WRITTEN MOBILE-FIRST. The base rules ARE the phone layout, then two
   breakpoints widen it. That replaced four scattered blocks
   (767.98 / 768-1023.98 / 1024-1199.98 / 1200+) that fought each other.

   STRUCTURE (see woocommerce/content-single-product.php)

       .rd-product
         .rd-product__main        grid: gallery | summary
           .rd-product__gallery
           .rd-product__summary
         .rd-related
         .rd-recent

   COMMERCE IS NOT RESTYLED AWAY
   Add to cart stays WooCommerce's own `form.cart` /
   `.single_add_to_cart_button` inside Blocksy's `.ct-cart-actions`.
   Both are kept and only sized:

     - Blocksy ships  .ct-cart-actions > * { order: var(--item-order, 5);
                                          width: var(--item-width, 100%) }
       so every child defaults to width:100%, which stretched the
       quantity control into a 602px empty box. Its own custom
       properties are used instead of !important.

     - Blocksy's steppers (.ct-increase / .ct-decrease) are hidden
       because they stacked on the RD Souq ones and the shopper saw
       `- - + +`.

     - Blocksy pads input.qty by ~34px per side; on a 70px input that
       consumed the box so the digit could not be drawn.

   THE `.rd-wish` TRAP
   The card heart is styled with an UNSCOPED second selector:
       .rd-card__media .rd-wish, .rd-wish { position:absolute; top:9px; ... }
   Reusing `.rd-wish` here is correct - it is what keeps one shared
   wishlist state - but the labelled button then rendered at the
   top-left of the viewport and painted over the announcement bar.
   `.rd-cta--wish` opts back out with `position: static`. The gallery
   heart keeps the absolute position, which is correct there.
   ================================================================== */

.rd-product {
	/*
	 * The product page renders inside Blocksy's `ct-container-full`,
	 * which is a FULL-WIDTH wrapper with zero horizontal padding - so
	 * before this the whole page was edge-to-edge and the gallery sat
	 * flush against the screen while the Blocksy breadcrumb above it
	 * was inset. One centered, guttered container fixes the page
	 * instead of nudging individual components.
	 *
	 * That same wrapper also applies `--theme-content-vertical-spacing`
	 * (measured 50px at 390, 60px at 1440) as padding on top of this
	 * container's own padding-top, which left a dead band between the
	 * header and the breadcrumb. It is neutralised on product pages
	 * below so the vertical rhythm lives in exactly one place.
	 */
	--sp-gutter: 16px;
	--sp-gap: 20px;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
	padding-top: 12px;
	padding-bottom: 8px;
}

/* Blocksy's content spacing is replaced by .rd-product's own rhythm. */
.rd-is-product .ct-container-full {
	padding-top: 0;
	--theme-content-vertical-spacing: 0px;
	padding-bottom: 0;
}

/* ---- Breadcrumb: one container, one gutter, one <nav> ---- */
.rd-product__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	color: var(--rd-muted);
	font-size: 12.5px;
}
.rd-product__crumb a {
	color: var(--rd-muted);
	text-decoration: none;
}
.rd-product__crumb a:hover { color: var(--rd-primary); }
.rd-product__crumb.is-current { color: var(--rd-deep); font-weight: 600; }
.rd-product__crumb-sep { color: var(--rd-border); }

/* Blocksy renders its own breadcrumb for the product page; ours is the
   single authoritative one, inside the product container. Its
   BreadcrumbList markup is reproduced above so no SEO data is lost. */
.rd-is-product .ct-breadcrumbs { display: none; }

/* ==================================================================
   1. MAIN - gallery | summary
   ================================================================== */
.rd-product__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-gap);
	align-items: start;
}

.rd-product__gallery,
.rd-product__summary { min-width: 0; }

/* ==================================================================
   2. GALLERY
   ================================================================== */
.rd-product .rd-product__gallery .rd-gallery { margin: 0; }
.rd-gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Full media box; contain preserves the entire uploaded canvas.
 * Aspect-ratio letterboxing and source pixel whitespace are not padding. */
.rd-gallery__stage {

	position: relative;
	flex: 0 0 auto;
	width: 100%;
	/* Follow the active image ratio without cropping its canvas. */
	aspect-ratio: var(--rd-gallery-ratio, 1 / 1);
	min-height: 180px;
	max-height: 760px;
	min-width: 0;
	background: var(--rd-surface-light);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	overflow: hidden;
}

.rd-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	object-position: center;
	/* contain, never crop: a product must never be cut off */
	object-fit: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease;
}
.rd-gallery__img.is-active {
	opacity: 1;
	visibility: visible;
}

.rd-gallery__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 4px 9px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.rd-gallery__wish {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}

.rd-gallery__nav,
.rd-gallery__zoom {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--rd-deep);
	cursor: pointer;
	transition: background var(--rd-transition), opacity var(--rd-transition);
}
.rd-gallery__nav { padding: 0; min-height: 0; box-shadow: 0 2px 7px rgba(25, 42, 61, .12); }
.rd-gallery__nav:hover { background-color: #fff4e8; border-color: var(--rd-primary); color: var(--rd-primary); }
.rd-gallery__nav--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.rd-gallery__nav--next { right: 14px; top: 50%; transform: translateY(-50%); }
.rd-gallery__zoom { right: 10px; bottom: 10px; }

.rd-gallery__count {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	padding: 2px 9px;
	border-radius: var(--rd-radius-pill);
	background: rgba(255, 255, 255, .9);
	color: var(--rd-muted);
	font-size: 11px;
	font-weight: 600;
}

.rd-gallery__thumbs {
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.rd-gallery__thumbs::-webkit-scrollbar { display: none; }

.rd-gallery__thumb {
	flex: 0 0 62px;
	width: 62px;
	height: 62px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--rd-radius);
	background: var(--rd-surface-light);
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: start;
	transition: border-color var(--rd-transition);
}
.rd-gallery__thumb.is-active { border-color: var(--rd-primary); }
.rd-gallery__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==================================================================
   3. SUMMARY - real data only
   ================================================================== */
.rd-product__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--rd-muted);
	font-size: 12.5px;
}
.rd-product__eyebrow a {
	color: var(--rd-primary);
	font-weight: 600;
	text-decoration: none;
}
.rd-product__eyebrow a:hover { color: var(--rd-primary-hover); }
.rd-product__eyebrow-sep { color: var(--rd-border); }
.rd-product__brand { color: var(--rd-muted); }

.rd-product__title {
	margin: 0 0 8px;
	color: var(--rd-deep);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.2px;
}

/* Only rendered when real reviews exist. */
.rd-product__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--rd-muted);
	font-size: 13px;
}
.rd-product__rating-num { color: var(--rd-deep); font-weight: 600; }

/* Only rendered when a real SKU exists. */
.rd-product__sku {
	margin: 0 0 10px;
	color: var(--rd-muted);
	font-size: 11px;
}
.rd-product__sku span { color: var(--rd-deep); font-weight: 600; }

/* ---- Price hierarchy: sale strongest, regular struck, discount small */
.rd-product__pricebox {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 10px;
}
.rd-product__pricebox .price { display: inline-flex; align-items: baseline; gap: 9px; }
.rd-product__pricebox .price,
.rd-product__pricebox .woocommerce-Price-amount {
	color: var(--rd-sale);
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.5px;
}
.rd-product__pricebox del,
.rd-product__pricebox del .woocommerce-Price-amount {
	order: 2;
	margin-left: 2px;
	color: var(--rd-muted);
	font-size: 15px;
	font-weight: 500;
	opacity: .75;
	/* Blocksy resets del, so the strike is set explicitly. */
	text-decoration: line-through;
}
.rd-product__pricebox ins { order: 1; text-decoration: none; }

.rd-product__off {
	order: 3;
	padding: 3px 8px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.rd-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	padding: 5px 11px;
	border-radius: var(--rd-radius-pill);
	font-size: 13px;
	font-weight: 600;
}
.rd-product__stock-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.rd-product__stock.is-in { color: var(--rd-new); background: rgba(15, 107, 78, .08); }
.rd-product__stock.is-low { color: #A4600B; background: rgba(180, 91, 7, .09); }
.rd-product__stock.is-out { color: var(--rd-sale); background: rgba(198, 40, 40, .08); }
.rd-product__stock.is-onback { color: var(--rd-muted); background: var(--rd-surface-light); }

/* Only rendered when the product has real copy. */
.rd-product__excerpt {
	max-width: 60ch;
	margin-bottom: 14px;
	color: var(--rd-muted);
	font-size: 14px;
	line-height: 1.65;
}
.rd-product__excerpt p { margin: 0 0 10px; }
.rd-product__excerpt p:last-child { margin-bottom: 0; }

/* Only rendered when the product really has attributes. */
.rd-product__options { margin-bottom: 16px; }
.rd-product .variations {
	display: grid;
	gap: 12px;
	width: 100%;
	margin: 0 0 12px;
}
.rd-product .variations tbody { display: grid; gap: 12px; }
.woocommerce .rd-product form.cart .variations { margin-bottom: 12px; }
.woocommerce .rd-product form.cart .variations tr { display: block; margin: 0; }
.woocommerce .rd-product form.cart .variations th label { margin: 0; }
.woocommerce .rd-product form.cart .reset_variations { font-size: 11px; }
.woocommerce .rd-product .single_variation:empty { display: none; }
.rd-product .variations th,
.rd-product .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}
.rd-product .variations th {
	margin-bottom: 7px;
	color: var(--rd-deep);
	font-size: 13px;
	font-weight: 700;
}
.rd-product .variations .value { width: 100%; }
.rd-product .variations select {
	width: 100%;
	min-height: var(--rd-btn-min);
	padding: 0 12px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: #fff;
	color: var(--rd-deep);
	font-size: 14.5px;
}
.rd-product .variations .reset_variations { color: var(--rd-muted); font-size: 13px; }

/* ==================================================================
   4. PURCHASE - one quantity control, two CTAs, one wishlist
   ================================================================== */

/*
 * Hide Blocksy's own steppers so the control reads - 1 + and not
 * - - + +. The RD Souq buttons injected by rd-product.js drive the
 * same real WooCommerce input, keeping its name/min/max/step.
 */
.rd-product__buy .ct-increase,
.rd-product__buy .ct-decrease { display: none !important; }

/* Size and order the children with Blocksy's own custom properties. */
/* One border, contiguous thirds; scoped to beat parent button spacing. */
.rd-product .rd-qty {
 display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch;
 height: 46px; border: 1px solid var(--rd-border); border-radius: 6px;
 background: #fff; overflow: hidden; gap: 0; min-width: 0;
}
.rd-product .rd-qty__btn {
 min-width: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
 border: 0; border-radius: 0; background-color: var(--rd-surface-light);
 color: var(--rd-deep); font-size: 18px; line-height: 1; box-shadow: none;
}
.rd-product .rd-qty__btn:hover { background-color: var(--rd-border); }
.rd-product .rd-qty .quantity { width: 100%; min-width: 0; height: 100%; margin: 0; }
.rd-product .rd-qty .quantity input.qty {
 width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0;
 border: 0; border-inline: 1px solid var(--rd-border); border-radius: 0;
 background: #fff; color: var(--rd-deep); font-size: 15px; font-weight: 600;
 text-align: center; appearance: textfield; box-shadow: none;
}
.rd-product .rd-qty input.qty::-webkit-outer-spin-button,
.rd-product .rd-qty input.qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.rd-product__buy .ct-cart-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-product__buy .ct-cart-actions > .rd-qty { --item-order: 1; --item-width: 34%; flex: 0 0 34%; }
.rd-product__buy .ct-cart-actions > .single_add_to_cart_button { --item-order: 2; --item-width: auto; flex: 1 1 0; min-width: 0; }
.rd-product__buy .ct-cart-actions > .rd-cta--buy { --item-order: 3; --item-width: 100%; flex: 1 1 100%; }
.rd-product__buy .ct-cart-actions > .rd-cta--wish { --item-order: 4; --item-width: 100%; flex: 1 1 100%; }
.rd-product .single_add_to_cart_button.disabled { opacity: .65; }
.rd-product .rd-cta--wish { box-shadow: none; }
.rd-product .rd-options { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-product .rd-option {
 min-height: 36px; padding: 0 14px; border: 1px solid var(--rd-border); border-radius: 6px;
 background-color: #fff; color: var(--rd-deep); font-size: 13px; font-weight: 600;
 line-height: 1.2; box-shadow: none; cursor: pointer;
}
.rd-product .rd-option:hover:not(:disabled) { border-color: var(--rd-primary); background-color: #fff8f0; }
.rd-product .rd-option.is-selected { border-color: var(--rd-primary); background-color: #fff4e8; }
.rd-product .rd-option.is-selected::after { content: ' ✓'; color: var(--rd-primary); }
.rd-product .rd-option:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.rd-product .rd-option:focus-visible,
.rd-product .rd-qty__btn:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: -3px; }
/* Reliable colors alone receive circles; unmapped values remain text buttons. */
.rd-product .rd-option.rd-option--color { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px; border-color: transparent; background: transparent; min-width: 44px; }
.rd-product .rd-option--color .rd-option__chip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rd-option-color); border: 1px solid #89909a; box-shadow: inset 0 0 0 2px #fff; }
.rd-product .rd-option--color.is-selected .rd-option__chip { outline: 2px solid var(--rd-primary); outline-offset: 2px; }
.rd-product .rd-option--color.is-selected .rd-option__chip::after { content: '✓'; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #17243a; font-size: 13px; }
.rd-product .rd-option--color.is-selected::after { content: none; }
@media (max-width: 767.98px) { .rd-product .rd-option--color .rd-option__chip { width: 34px; height: 34px; } }
.rd-product .rd-options-fallback { margin-top: 4px; }
.rd-product .rd-options-fallback summary { color: var(--rd-muted); font-size: 10px; cursor: pointer; }
.rd-product .rd-options-fallback[open] select { margin-top: 6px; }

/*
 * SHARED CTA SYSTEM - one declaration list for all three actions.
 *
 * All three selectors are written at the SAME specificity
 * (`.rd-product .rd-product__buy ...` / `.rd-product .rd-cta ...`)
 * so the button system cannot drift apart: identical height, radius,
 * typography, padding and icon alignment.
 *
 * Heights are declared on EVERY CTA including Add to cart, because
 * Blocksy sets `min-height: var(--theme-button-min-height)` (40px) on
 * its button selectors and that won over the shared rule - which left
 * Add to cart at 40px while Buy Now and Wishlist were 46px.
 *
 * `background-color` is a LONGHAND on purpose, matching Blocksy's own
 * longhand on `.button, [type="submit"], button`; using the
 * `background` shorthand lost that contest and rendered Blocksy's
 * palette blue #2872fa instead of RD Souq orange.
 */
.rd-product .rd-product__buy .single_add_to_cart_button,
.rd-product .rd-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border-radius: var(--rd-radius);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--rd-transition), border-color var(--rd-transition),
		color var(--rd-transition), opacity var(--rd-transition);
}
.rd-product .rd-product__buy .single_add_to_cart_button svg,
.rd-product .rd-cta svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}

/* Add to cart - the primary solid CTA. */
.rd-product .rd-product__buy .single_add_to_cart_button {
	flex: 1 1 0;
	border: 0;
	background-color: var(--rd-primary);
	color: #fff;
}
.rd-product .rd-product__buy .single_add_to_cart_button:hover {
	background-color: var(--rd-primary-hover);
}
.rd-product__buy .single_add_to_cart_button.loading { opacity: .7; }

/* Buy Now - secondary outlined CTA. */
.rd-product .rd-cta--buy {
	flex: 1 1 100%;
	border: 1.5px solid var(--rd-primary);
	background-color: #fff;
	color: var(--rd-primary);
}
.rd-product .rd-cta--buy:hover { background-color: rgba(180, 91, 7, .06); }

/*
 * Wishlist - visually the LIGHTEST of the three.
 *
 * It shares the height, radius and typography of the purchase CTAs so
 * the row reads as one system, but it carries no filled background and
 * no heavy border, and its label sits in muted type. It must not
 * compete with Add to cart or Buy Now.
 *
 * `position: static` is deliberate: see the `.rd-wish` trap in the
 * file header. Without it the button inherited the product-card
 * heart's absolute positioning, rendered at the top-left of the
 * viewport and painted over the announcement bar.
 */
.rd-product .rd-cta--wish {
	position: static;
	inset: auto;
	z-index: auto;
	flex: 1 1 100%;
	width: auto;
	height: auto;
	min-width: 0;
	margin-top: 2px;
	border: 1px solid transparent;
	background-color: transparent;
	color: var(--rd-muted);
	font-weight: 600;
}
.rd-product .rd-cta--wish svg {
	stroke-width: 1.6;
	color: var(--rd-muted);
}
.rd-product .rd-cta--wish:hover {
	background-color: var(--rd-surface-light);
	border-color: var(--rd-border);
	color: var(--rd-deep);
}
.rd-product .rd-cta--wish.is-active {
	background-color: transparent;
	border-color: transparent;
	color: var(--rd-sale);
}
.rd-product .rd-cta--wish.is-active svg {
	fill: currentColor;
	color: var(--rd-sale);
}

/* Out of stock / unavailable */
.rd-product__buy .stock.out-of-stock,
.rd-product__buy p.stock.out-of-stock {
	color: var(--rd-sale);
	font-size: 13px;
	font-weight: 600;
}

/* ==================================================================
   5. TRUST BENEFITS - 2x2, the store's own approved promises
   ================================================================== */
.rd-trust {
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: var(--rd-surface);
}
.rd-trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rd-trust__item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.rd-trust__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--rd-trust);
}
.rd-trust__text {
	color: var(--rd-deep);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

/* Fresh delivery dates live beneath the existing trust grid. */
.rd-delivery {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--rd-border);
}
.rd-delivery__label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--rd-muted);
}
.rd-delivery__dates {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--rd-deep);
}

/* Complete owner-supplied badge; never crop or restyle its individual logos. */
.rd-safecheckout {
	width: 100%;
	max-width: 100%;
	margin: 14px auto 0;
	padding: 16px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: #fff;
	text-align: center;
}
.rd-safecheckout__title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rd-deep);
}
.rd-safecheckout__badge {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0;
}
.rd-product__brand:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 3px; }
@media (max-width: 767.98px) {
	.rd-safecheckout { max-width: none; padding: 14px; }
}

/* Real gateways only; the line is omitted entirely when none enabled. */
.rd-trust__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--rd-border);
}
.rd-trust__paylabel { color: var(--rd-muted); font-size: 12px; }
.rd-paychip {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: #fff;
	color: var(--rd-deep);
	font-size: 11.5px;
	font-weight: 600;
}

/* ==================================================================
   6. PRODUCT INFORMATION

   Desktop  horizontal ARIA tabs
   Mobile   stacked accordion rows

   Same buttons and panels; only the CSS presentation changes. The
   chevron is hidden on desktop and is the affordance on mobile.

   Sections present depend on real data: description (real), specs
   (real attributes only - hidden when there are none), shipping &
   returns (centrally configurable store copy), reviews (when the
   store enables reviews).
   ================================================================== */
.rd-info {
	margin-top: 26px;
	border-top: 1px solid var(--rd-border);
	padding-top: 20px;
}

.rd-info__tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--rd-border);
	margin-bottom: 20px;
}

.rd-info__tab {
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	background: none;
	color: var(--rd-muted);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--rd-transition), border-color var(--rd-transition);
}
.rd-info__tab:hover { color: var(--rd-deep); }
.rd-info__tab.is-active {
	color: var(--rd-primary);
	border-bottom-color: var(--rd-primary);
}
.rd-info__tab:focus-visible {
	outline: 2px solid var(--rd-primary);
	outline-offset: -2px;
	border-radius: 2px;
}

/* The chevron only makes sense in the stacked mobile presentation. */
.rd-info__chev { display: none; }

.rd-info__panel:focus { outline: none; }
.rd-info__panel[hidden] { display: none; }

.rd-info__prose {
	max-width: 72ch;
	color: var(--rd-deep);
	font-size: 14px;
	line-height: 1.7;
}
.rd-info__prose p { margin: 0 0 14px; }
.rd-info__prose p:last-child { margin-bottom: 0; }
.rd-info__prose ul,
.rd-info__prose ol { margin: 0 0 14px; padding-left: 22px; }
.rd-info__prose li { margin-bottom: 7px; }

/* Specifications - a definition list of real attributes. */
.rd-specs {
	max-width: 640px;
	margin: 0;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	overflow: hidden;
}
.rd-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	border-top: 1px solid var(--rd-border);
}
.rd-specs__row:first-child { border-top: 0; }
.rd-specs dt {
	padding: 11px 14px;
	background: var(--rd-surface-light);
	color: var(--rd-deep);
	font-size: 13.5px;
	font-weight: 600;
}
.rd-specs dd {
	margin: 0;
	padding: 11px 14px;
	color: var(--rd-deep);
	font-size: 13.5px;
}

/* Reviews - honest empty state; WooCommerce renders the real list or
   form when there is something to show. */
.rd-reviews-empty {
	padding: 20px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: var(--rd-surface);
}
.rd-reviews-empty__title {
	margin: 0 0 4px;
	color: var(--rd-deep);
	font-size: 15px;
	font-weight: 700;
}
.rd-reviews-empty__text {
	margin: 0;
	color: var(--rd-muted);
	font-size: 13.5px;
}

/* ==================================================================
   7. PRODUCT RAIL - one reusable component

   Used by BOTH Related products and Recently viewed. The rail scrolls;
   the approved RD Souq card inside it is unchanged.

     desktop  4-5 cards visible
     tablet   ~3 visible
     mobile   ~2 visible, native touch swipe

   The track is a native overflow scroller with scroll-snap, so touch
   swipe works with no JavaScript. The arrows (rd-product.js) scroll it
   and disable at the boundaries rather than being hidden, so the
   heading row does not change width as the rail is paged.
   ================================================================== */
.rd-rail {
	margin-top: 28px;
}

.rd-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.rd-rail__title {
	margin: 0;
	color: var(--rd-deep);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.2px;
}

.rd-rail__nav {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.rd-rail__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--rd-border);
	border-radius: 50%;
	background: #fff;
	color: var(--rd-deep);
	cursor: pointer;
	transition: border-color var(--rd-transition), color var(--rd-transition),
		opacity var(--rd-transition), background-color var(--rd-transition);
}
.rd-rail__arrow:hover:not(:disabled) {
	border-color: var(--rd-primary);
	color: var(--rd-primary);
}
.rd-rail__arrow:disabled {
	opacity: .35;
	cursor: default;
}
.rd-rail__arrow:focus-visible {
	outline: 2px solid var(--rd-primary);
	outline-offset: 2px;
}

/*
 * The rail must use the available page width. `min-width:0` lets the
 * track shrink inside the flex/grid parent, and the items are sized as
 * a fraction of the track so a wide desktop row is filled instead of
 * leaving empty space on the right.
 */
.rd-rail__track {
	display: flex;
	gap: 11px;
	margin: 0;
	padding: 2px 2px 8px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	min-width: 0;
}
.rd-rail__track::-webkit-scrollbar { display: none; }

.rd-rail__track > li {
	flex: 0 0 calc(50% - 6px);
	min-width: 0;
	scroll-snap-align: start;
	scroll-margin-left: 2px;
}

/* The card stretches to the rail item so the row reads as one band. */
.rd-rail__track .rd-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.rd-rail__track .rd-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.rd-rail__empty {
	margin: 0;
	color: var(--rd-muted);
	font-size: 13.5px;
}

/* ==================================================================
   9. STICKY BUY BAR (mobile only)

   A fixed viewport overlay, never part of the content flow. Stacked
   directly ABOVE the global bottom navigation, so the purchase action
   and Home / Categories / Search / Account / Cart stay reachable at the
   same time.
   ================================================================== */
.rd-stickybuy { display: none; }

@media (max-width: 767.98px) {
	.rd-stickybuy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(56px + env(safe-area-inset-bottom, 0px));
		z-index: 9998;
		display: block;
		padding: 8px 12px;
		border-top: 1px solid var(--rd-border);
		background: #fff;
		box-shadow: 0 -2px 12px rgba(25, 42, 61, .07);
	}
	.rd-stickybuy[hidden] { display: none; }
	.rd-stickybuy__inner {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.rd-stickybuy__thumb {
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		border-radius: var(--rd-radius);
		background: var(--rd-surface-light);
		overflow: hidden;
	}
	.rd-stickybuy__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.rd-stickybuy__meta {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}
	.rd-stickybuy__name {
		overflow: hidden;
		color: var(--rd-muted);
		font-size: 11.5px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.rd-stickybuy__pricerow {
		display: flex;
		align-items: center;
		gap: 7px;
	}
	.rd-stickybuy__price { color: var(--rd-sale); font-size: 16px; font-weight: 700; }
	.rd-stickybuy__price del { color: var(--rd-muted); font-size: 12px; font-weight: 400; }
	.rd-stickybuy__price ins { text-decoration: none; }
	.rd-stickybuy__off {
		padding: 1px 6px;
		border-radius: var(--rd-radius-pill);
		background: var(--rd-sale);
		color: #fff;
		font-size: 10.5px;
		font-weight: 700;
	}
	.rd-stickybuy__stock { color: var(--rd-new); font-size: 11px; font-weight: 600; }
	.rd-stickybuy__stock.is-out { color: var(--rd-sale); }
	.rd-stickybuy__action { flex: 0 0 auto; }
	.rd-stickybuy__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		padding: 0 16px;
		border: 0;
		border-radius: var(--rd-radius);
		background: var(--rd-primary);
		color: #fff;
		font-size: 13.5px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}
	.rd-stickybuy__btn:hover { background: var(--rd-primary-hover); }
	.rd-stickybuy__btn.is-disabled {
		background: var(--rd-border);
		color: var(--rd-muted);
		cursor: not-allowed;
	}
}

/* ==================================================================
   10. LIGHTBOX
   ================================================================== */
.rd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(15, 25, 38, .88);
}
.rd-lightbox[hidden] { display: none; }
.rd-lightbox__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 900px;
}
.rd-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--rd-radius);
	object-fit: contain;
}
.rd-lightbox__close,
.rd-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--rd-deep);
	cursor: pointer;
}
.rd-lightbox__close { top: 0; right: 0; font-size: 22px; line-height: 1; }
.rd-lightbox__nav--prev { left: 0; top: 50%; transform: translateY(-50%); }
.rd-lightbox__nav--next { right: 0; top: 50%; transform: translateY(-50%); }

html.rd-no-scroll { overflow: hidden; }

/* ==================================================================
   11. TABLET - the same system, wider gutters and columns
   ================================================================== */
@media (min-width: 768px) {
	.rd-product {
		--sp-gutter: 24px;
		--sp-gap: 24px;
		padding-top: 16px;
	}
	/* Balanced two columns wherever there is room. */
	.rd-product__main {
		grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
	}
	.rd-product__title { font-size: 23px; }
	.rd-product__buy .ct-cart-actions > .rd-qty { --item-width: 28%; flex: 0 0 28%; }
	.rd-product__pricebox ins .woocommerce-Price-amount { font-size: 27px; }
	.rd-product__excerpt { font-size: 14.5px; }

	/* Thumbnails become a vertical rail beside the stage. */
	.rd-gallery { flex-direction: column; }
	.rd-gallery__stage { flex: 1 1 auto; width: auto; }

	/* Active-image geometry is shared across breakpoints. */

	.rd-gallery__thumbs {
		flex: 0 0 auto;
		flex-direction: row;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 100%;
		padding-bottom: 0;
	}
	.rd-gallery__thumb { flex: 0 0 78px; width: 78px; height: 78px; }
	.rd-gallery__nav { width: 40px; height: 40px; opacity: .85; }
	.rd-gallery__stage:hover .rd-gallery__nav,
	.rd-gallery__nav:focus-visible { opacity: 1; }

	.rd-trust { padding: 16px; }
	.rd-trust__text { font-size: 12.5px; }

	.rd-info { margin-top: 30px; padding-top: 24px; }
	.rd-info__tab { font-size: 15px; }
	.rd-info__prose { font-size: 15px; }

	/* Tablet: ~3 cards visible. */
	.rd-rail { margin-top: 30px; }
	.rd-rail__title { font-size: 20px; }
	.rd-rail__track { gap: 14px; }
	.rd-rail__track > li { flex: 0 0 calc(33.3333% - 10px); }

	.rd-lightbox { padding: 24px; }
	.rd-lightbox__close,
	.rd-lightbox__nav { width: 44px; height: 44px; }
}

@media (min-width: 1024px) {
 .rd-gallery { flex-direction: row-reverse; align-items: flex-start; }
 .rd-gallery__stage { flex: 1 1 0; }
 .rd-gallery__thumbs { flex: 0 0 64px; flex-direction: column; }
 .rd-gallery__thumb { flex: 0 0 64px; width: 64px; height: 64px; }
 
}

/* ==================================================================
   12. DESKTOP - balanced gallery / summary, marketplace density
   ================================================================== */
@media (min-width: 1200px) {
	.rd-product {
		--sp-gutter: 32px;
		--sp-gap: 30px;
		padding-top: 20px;
	}
	.rd-product__title { font-size: 26px; }
	.rd-product__pricebox { gap: 12px; }
	.rd-product__pricebox ins .woocommerce-Price-amount { font-size: 30px; }
	.rd-product__excerpt { margin-bottom: 18px; font-size: 15px; }

	.rd-trust { margin-top: 18px; }
	.rd-info { margin-top: 34px; padding-top: 26px; }
	.rd-info__tab { font-size: 15px; }
	.rd-info__prose { font-size: 15px; }

	/* Desktop: 5 cards visible, rail uses the full container width. */
	.rd-rail { margin-top: 34px; }
	.rd-rail__title { font-size: 20px; }
	.rd-rail__track { gap: 16px; }
	.rd-rail__track > li { flex: 0 0 calc(20% - 13px); }
	.rd-rail__arrow { width: 38px; height: 38px; }
}

/* ==================================================================
   MOBILE

   Accordion presentation for the product information, and the spacing
   that keeps the purchase row clear of the fixed bottom navigation.
   ================================================================== */
@media (max-width: 767.98px) {
	/*
	 * Stacked accordion rows instead of a cramped tab strip. Same
	 * buttons and panels; the chevron is the affordance.
	 */
	.rd-info { margin-top: 22px; padding-top: 18px; }
	.rd-info__tabs {
		flex-direction: column;
		gap: 0;
		border-bottom: 0;
		margin-bottom: 14px;
	}
	.rd-info__tab {
		width: 100%;
		justify-content: space-between;
		padding: 13px 12px;
		border-bottom: 1px solid var(--rd-border);
		border-left: 0;
		border-right: 0;
		border-top: 0;
		border-radius: 0;
		margin-bottom: 0;
		font-size: 14px;
		background: transparent;
	}
	.rd-info__tab.is-active {
		color: var(--rd-deep);
		background: var(--rd-surface);
	}
	.rd-info__chev {
		display: block;
		flex: 0 0 auto;
		color: var(--rd-muted);
		transition: transform var(--rd-transition);
	}
	.rd-info__tab.is-active .rd-info__chev {
		transform: rotate(180deg);
		color: var(--rd-primary);
	}
	.rd-info__panel { padding: 4px 12px 8px; }
	.rd-info__prose { font-size: 14px; }
	.rd-specs__row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }

	/* Gallery geometry follows the active image at every breakpoint. */
	.rd-product__stock { margin-bottom: 12px; }
	.rd-product__excerpt { margin-bottom: 12px; }

	.rd-product .rd-product__buy .single_add_to_cart_button,
	.rd-product .rd-cta {
		min-height: 46px;
		padding: 0 12px;
		font-size: 14px;
	}
}

/* Very narrow: never let the sticky bar overflow. */
@media (max-width: 359.98px) {
	.rd-product { --sp-gutter: 12px; }
	.rd-stickybuy__btn { padding: 0 12px; font-size: 13px; }
	.rd-stickybuy__name { font-size: 11px; }

}