/*
Theme Name: Laced Up
Theme URI: https://lacedupstore.co.za
Author: Laced Up
Author URI: https://lacedupstore.co.za
Description: Custom WooCommerce theme for Laced Up - authentic sneakers, smarter prices, delivered across Africa. Dark editorial storefront with condensed display type, red accent and full-bleed hero.
Version: 2.31.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lacedup
Tags: e-commerce, woocommerce, dark, custom-logo, custom-menu, featured-images
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	--lu-black: #000000;
	--lu-bg: #0a0a0a;
	--lu-panel: #141414;
	--lu-panel-2: #1b1b1b;
	--lu-line: #262626;
	--lu-line-soft: #1f1f1f;
	--lu-red: #e01b22;
	--lu-red-dark: #b0141a;
	--lu-white: #ffffff;
	--lu-text: #ffffff;
	--lu-muted: #9b9b9b;
	--lu-muted-2: #6f6f6f;
	--lu-search-line: #333333;
	--lu-placeholder: #8a8a8a;
	--lu-card: #ffffff;
	--lu-card-img: #f5f5f5;
	--lu-card-text: #111111;
	--lu-card-muted: #6b6b6b;

	--lu-container: 1880px;
	--lu-gutter: clamp(16px, 3.7vw, 64px);
	--lu-radius: 3px;

	--lu-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--lu-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--lu-header-h: 76px;
	--lu-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--lu-black);
	color: var(--lu-text);
	font-family: var(--lu-font);
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--lu-display); line-height: 1.05; }

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--lu-red);
	outline-offset: 2px;
}

.lu-container {
	width: 100%;
	max-width: var(--lu-container);
	margin: 0 auto;
	padding: 0 var(--lu-gutter);
}

.lu-container--wide {
	max-width: 100%;
	padding: 0 32px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px; left: 12px;
	z-index: 999;
	background: var(--lu-red);
	color: #fff;
	padding: 10px 16px;
	font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* Utility type */
.lu-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lu-display {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 0.98;
}

/* Buttons */
.lu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: 2px;
	transition: background-color .18s var(--lu-ease), color .18s var(--lu-ease), border-color .18s var(--lu-ease);
}

.lu-btn--red { background: var(--lu-red); color: #fff; border-color: var(--lu-red); }
.lu-btn--red:hover { background: var(--lu-red-dark); border-color: var(--lu-red-dark); }

.lu-btn--light { background: var(--lu-white); color: #111; border-color: var(--lu-white); }
.lu-btn--light:hover { background: transparent; color: #fff; }

.lu-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.lu-btn--ghost:hover { background: #fff; color: #111; border-color: #fff; }

/* ==========================================================================
   3. ANNOUNCEMENT BAR
   ========================================================================== */

.lu-announce {
	background: var(--lu-black);
	border-bottom: 1px solid var(--lu-line-soft);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: #e6e6e6;
}

.lu-announce__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 48px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.lu-announce__item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.lu-announce__item svg { flex: none; opacity: .9; }

.lu-announce__partner {
	height: 32px;
	width: auto;
	display: inline-block;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.lu-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--lu-black);
	/* no bottom border -- on a black hero that hairline reads as a white line
	   across the page, and none of the designs have one */
}

.lu-header__inner {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: var(--lu-header-h);
	padding-top: 9px;
	padding-bottom: 9px;
}

/* Logo */
.lu-logo {
	flex: none;
	position: relative;
	z-index: 5;
	display: block;
	line-height: 0;
}
.lu-logo img,
.lu-logo svg {
	height: clamp(50px, 4.4vw, 82px);
	width: auto;
	max-width: none;
	display: block;
}

/* Search */
.lu-search {
	flex: 1 1 auto;
	max-width: 378px;
	position: relative;
}

.lu-search__form {
	display: flex;
	align-items: center;
	background: transparent;
	border: 1px solid var(--lu-search-line);
	border-radius: 3px;
	overflow: hidden;
	height: 38px;
	transition: border-color .18s var(--lu-ease);
}
.lu-search__form:focus-within { border-color: #5a5a5a; }

.lu-search__field {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0 14px;
	font-size: 12.5px;
	color: #fff;
	-webkit-appearance: none;
	appearance: none;
}
.lu-search__field::placeholder { color: var(--lu-placeholder); opacity: 1; }
.lu-search__field:focus { outline: none; }
.lu-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }

.lu-search__submit {
	flex: none;
	border: 0;
	background: transparent;
	color: #c2c2c2;
	padding: 0 13px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	transition: color .16s var(--lu-ease);
}
.lu-search__submit:hover { color: #fff; }

/* Primary nav */
.lu-nav { flex: 0 1 auto; margin-left: auto; }

.lu-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
}

.lu-nav__list > li { position: relative; }

.lu-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	padding: 8px 0;
	white-space: nowrap;
	transition: color .16s var(--lu-ease);
}

.lu-nav__list > li > a:hover,
.lu-nav__list > li.current-menu-item > a { color: var(--lu-red); }

.lu-nav__list > li.lu-nav--sale > a { color: var(--lu-red); }

.lu-nav__badge {
	display: inline-block;
	background: var(--lu-red);
	color: #fff;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 2px 5px;
	border-radius: 2px;
	line-height: 1.2;
	transform: translateY(-1px);
}

.lu-nav__caret { width: 9px; height: 9px; opacity: .8; }

/* Dropdown */
.lu-nav__list li > ul {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 210px;
	background: #0e0e0e;
	border: 1px solid var(--lu-line);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s var(--lu-ease), transform .16s var(--lu-ease), visibility .16s;
	z-index: 40;
}

.lu-nav__list li:hover > ul,
.lu-nav__list li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lu-nav__list li > ul a {
	display: block;
	padding: 9px 18px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #dcdcdc;
}
.lu-nav__list li > ul a:hover { color: #fff; background: #171717; }

/* Icon row */
.lu-icons {
	flex: none;
	display: flex;
	align-items: center;
	gap: 20px;
	padding-left: 6px;
}

.lu-icons__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	transition: color .16s var(--lu-ease);
}
.lu-icons__link:hover { color: var(--lu-red); }
.lu-icons__link svg { display: block; }

.lu-icons__count {
	position: absolute;
	top: -6px;
	right: 50%;
	transform: translateX(20px);
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--lu-red);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	letter-spacing: 0;
}

/* Mobile toggle */
.lu-burger {
	display: none;
	flex: none;
	background: transparent;
	border: 0;
	color: #fff;
	padding: 6px;
	margin-left: auto;
}

.lu-mobile-panel {
	display: none;
	border-top: 1px solid var(--lu-line);
	background: #0b0b0b;
	padding: 14px 0 22px;
}
.lu-mobile-panel.is-open { display: block; }

.lu-mobile-panel .lu-search { max-width: none; margin-bottom: 14px; }

.lu-mobile-panel ul li a {
	display: block;
	padding: 11px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--lu-line-soft);
}
.lu-mobile-panel ul ul { padding-left: 16px; }
.lu-mobile-panel ul ul li a { font-weight: 500; color: var(--lu-muted); }

/* ==========================================================================
   5. HERO
   ========================================================================== */

/*
 * Two hard columns, matching the design: a black column carrying the headline,
 * and the photograph beside it. Nothing is layered over the photo - no gradient,
 * no scrim - and the text can never reach across into it.
 */
/*
 * Full-bleed hero.
 *
 * The picture is a real <img> at width:100%; height:auto, so the browser sizes
 * the hero from the image's own 1732x528 aspect. There is no background-size
 * decision to make, which means the shot can never be scaled up to fill a box,
 * never cropped top or bottom, and never slid sideways.
 */
.lu-hero {
	position: relative;
	background-color: #000;
	overflow: hidden;
	/*
	 * A floor, so the section can never collapse to nothing. On desktop the
	 * in-flow image is far taller than this, so the appearance is unchanged.
	 */
	min-height: 320px;
}

.lu-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* No banner uploaded yet: the hero still holds its shape as a black band. */
.lu-hero--empty {
	min-height: clamp(360px, 30vw, 620px);
}

/*
 * The single overlay, clearing at 31%. The first figure stands at 34.9% of the
 * band and the band can no longer move, so that margin is fixed at every width.
 */
.lu-hero__scrim {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/*
	 * Off at every width. To bring the left fade back, delete display:none
	 * and uncomment this:
	 *
	 * background: linear-gradient(90deg,
	 *     #000 0%, #000 15%, rgba(0,0,0,.9) 21%,
	 *     rgba(0,0,0,.55) 26%, rgba(0,0,0,0) 31%);
	 */
}

.lu-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: none;
	padding-left: var(--lu-gutter);
	padding-right: 24px;
}

.lu-hero__content { max-width: 34%; }

.lu-hero__title {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	/* measured off the design: cap height 52px, baseline-to-baseline 66px */
	line-height: 0.94;
	letter-spacing: 0;
	/* the condensed width axis squeezes the space glyph too, so put it back */
	word-spacing: 0.08em;
	/*
	 * Sized against the UNCONDENSED metrics on purpose. If Archivo's width axis
	 * fails to load, "SMARTER PRICES." renders ~7.6em wide; at these sizes it
	 * still fits the column, so the headline stays on four lines either way.
	 */
	/*
	 * Back to two lines, so the scale goes back up. At 1920px this lands on
	 * 68px, matching the design scaled up from its 1522px artboard.
	 */
	font-size: clamp(29px, calc(3.4vw - 5px), 60px);
	font-style: italic;
	margin: 0;
	text-shadow: 0 2px 26px rgba(0,0,0,.5);
}

.lu-hero__title span { display: block; }
.lu-hero__title .lu-hero__accent { color: var(--lu-red); }

/* "Top brands. Smarter prices." - same face, roughly 42% of the headline */
.lu-hero__tagline {
	font-family: var(--lu-display);
	font-size: clamp(13.5px, calc(1.6vw - 2px), 26px);
	font-weight: 800;
	font-stretch: 82%;
	font-style: italic;
	line-height: 1.1;
	letter-spacing: 0;
	word-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	margin: clamp(10px, 0.85vw, 18px) 0 0;
	text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* short red rule between the tagline and the body copy */
.lu-hero__rule {
	display: block;
	width: clamp(54px, 4.6vw, 86px);
	height: 4px;
	background: var(--lu-red);
	margin: clamp(12px, 1vw, 20px) 0 clamp(14px, 1.1vw, 22px);
}

.lu-hero__text {
	max-width: 440px;
	font-size: clamp(13px, 0.92vw, 16px);
	line-height: 1.55;
	color: #e9e9e9;
	margin: 0 0 20px;
	text-shadow: 0 1px 14px rgba(0,0,0,.6);
}

.lu-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lu-hero__actions .lu-btn { min-width: 176px; }

/* ==========================================================================
   6. TRUST BAR
   ========================================================================== */

.lu-trust {
	background: var(--lu-black);
	border-bottom: 1px solid var(--lu-line-soft);
}

.lu-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 26px 0;
}

.lu-trust__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 26px;
	border-right: 1px solid var(--lu-line);
}
.lu-trust__item:last-child { border-right: 0; }

.lu-trust__icon { flex: none; color: #fff; opacity: .95; }

.lu-trust__title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 3px;
}

.lu-trust__desc {
	font-size: 11px;
	line-height: 1.42;
	color: var(--lu-muted);
	margin: 0;
	max-width: 190px;
}

/* --------------------------------------------------------------------------
   Slim centred strip: three items, one label each, red dots between them.
   These override the four-column layout above rather than replacing it, so
   the old grid is one block away if it is ever wanted back.
   -------------------------------------------------------------------------- */

body .lu-trust__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: clamp(11px, 1vw, 18px) 0;
}

body .lu-trust__item {
	border-right: 0;
	padding: 2px 0;
	gap: clamp(9px, 0.8vw, 14px);
}

/* the separator sits as the item's first flex child, so it falls between them */
body .lu-trust__item + .lu-trust__item::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lu-red);
	margin: 0 clamp(16px, 2.2vw, 42px) 0 clamp(16px, 2.2vw, 42px);
}

body .lu-trust__icon svg { display: block; width: clamp(21px, 1.7vw, 30px); height: auto; }

body .lu-trust__title {
	font-size: clamp(10.5px, 0.78vw, 13.5px);
	letter-spacing: 0.13em;
	margin: 0;
	white-space: nowrap;
}

body .lu-trust__desc { display: none; }

@media (max-width: 700px) {
	body .lu-trust__grid { gap: 10px 0; padding: 12px 0; }
	body .lu-trust__item { flex: 0 0 100%; justify-content: center; }
	body .lu-trust__item + .lu-trust__item::before { display: none; }
	body .lu-trust__title { font-size: 11px; }
}

/* ==========================================================================
   6B. CATEGORY CARDS (Men / Women / Kids)
   ========================================================================== */

.lu-cats {
	background: #ffffff;
	padding: clamp(20px, 1.8vw, 34px) 0 clamp(20px, 1.8vw, 34px);
}

.lu-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 0.9vw, 18px);
}

.lu-cats__card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 1.35;
	min-height: 180px;
	max-height: 400px;
	background: var(--lu-panel);
	isolation: isolate;
	color: #fff;
	text-decoration: none;
}

body .lu-cats__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 72% center;
	transition: transform .5s var(--lu-ease);
}
.lu-cats__card:hover .lu-cats__img { transform: scale(1.04); }

.lu-cats__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, .88) 0%,
		rgba(0, 0, 0, .74) 32%,
		rgba(0, 0, 0, .30) 62%,
		rgba(0, 0, 0, .04) 100%
	);
}

.lu-cats__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(7px, 0.6vw, 12px);
	padding: clamp(16px, 1.7vw, 32px);
}

.lu-cats__title {
	display: block;
	font-family: var(--lu-display);
	font-size: clamp(19px, 1.72vw, 34px);
	font-weight: 800;
	font-stretch: 82%;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.lu-cats__desc {
	display: block;
	font-size: clamp(11px, 0.74vw, 14px);
	line-height: 1.46;
	color: rgba(255, 255, 255, .82);
	margin: 0;
}

.lu-cats__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(2px, 0.4vw, 8px);
	padding: 11px 18px;
	border-radius: var(--lu-radius);
	background: #fff;
	color: #000;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .18s var(--lu-ease), color .18s var(--lu-ease);
}
.lu-cats__btn svg { flex: none; }
@media (hover: hover) {
	.lu-cats__card:hover .lu-cats__btn { background: var(--lu-red); color: #fff; }
}

@media (max-width: 900px) {
	.lu-cats { padding: 16px 0 2px; }
	.lu-cats__grid { grid-template-columns: 1fr; gap: 10px; }
	.lu-cats__card { aspect-ratio: 2 / 1; min-height: 150px; max-height: 240px; }
	.lu-cats__title { font-size: clamp(21px, 6.2vw, 30px); }
	.lu-cats__desc { font-size: 12px; }
	.lu-cats__btn { padding: 10px 16px; font-size: 10px; }
}

/* ==========================================================================
   6C. BRAND TILES (above the category cards)
   ========================================================================== */

.lu-tiles {
	background: #ffffff;
	padding: clamp(18px, 1.6vw, 32px) 0 clamp(8px, 0.8vw, 14px);
}

.lu-tiles__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 0.85vw, 16px);
}

.lu-tiles__card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1.6;
	min-height: 150px;
	max-height: 320px;
	background: var(--lu-panel);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

body .lu-tiles__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform .5s var(--lu-ease);
}
.lu-tiles__card:hover .lu-tiles__img { transform: scale(1.05); }

/* darkens only the lower band, so the label reads and the shoe stays clean */
.lu-tiles__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 42%,
		rgba(0, 0, 0, .45) 64%,
		rgba(0, 0, 0, .86) 100%
	);
}

.lu-tiles__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(7px, 0.55vw, 11px);
	padding: 0 clamp(14px, 1.5vw, 28px) clamp(13px, 1.3vw, 24px);
}

.lu-tiles__title {
	display: block;
	margin: 0;
	font-family: var(--lu-display);
	font-size: clamp(15px, 1.32vw, 27px);
	font-weight: 800;
	font-stretch: 84%;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.lu-tiles__rule {
	display: block;
	width: clamp(52px, 5.2vw, 100px);
	height: 5px;
	background: var(--lu-red);
}

@media (max-width: 1100px) {
	.lu-tiles__grid { grid-template-columns: repeat(2, 1fr); }
	.lu-tiles__title { font-size: clamp(16px, 2.5vw, 24px); }
}

@media (max-width: 700px) {
	.lu-tiles { padding: 14px 0 6px; }
	.lu-tiles__grid { gap: 10px; }
	.lu-tiles__card { aspect-ratio: 1.5; min-height: 118px; }
	.lu-tiles__title { font-size: clamp(14px, 4.2vw, 20px); }
	.lu-tiles__rule { height: 4px; width: clamp(40px, 11vw, 64px); }
	.lu-tiles__body { padding: 0 12px 11px; gap: 6px; }
}

/* ==========================================================================
   7. BRAND STRIP
   ========================================================================== */

.lu-brands {
	background: var(--lu-black);
	border-bottom: 1px solid var(--lu-line-soft);
}

.lu-brands__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr) auto;
	align-items: center;
}

.lu-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 12px;
	border-right: 1px solid var(--lu-line);
	min-height: clamp(72px, 5.2vw, 100px);
	transition: opacity .18s var(--lu-ease);
}
.lu-brands__item:hover { opacity: .6; }

.lu-brands__item img {
	max-height: clamp(32px, 2.6vw, 52px);
	width: auto;
	object-fit: contain;
}

/*
 * Brand logo treatment.
 *
 * brightness(0) invert(1) forces artwork to white, which is right for a logo on
 * a TRANSPARENT background. On a logo with a solid background it turns the whole
 * rectangle white -- the white boxes. Pick the option that matches your files:
 * Appearance > Customize > Laced Up > Brand Logos.
 */

/* dark logo on a white background: white becomes black and vanishes */
.lu-brands--invert .lu-brands__item img { filter: invert(1); }

/* white logo on a black background: the black drops out against the strip */
.lu-brands--screen .lu-brands__item img { mix-blend-mode: screen; }

/* already transparent: force the artwork to pure white */
.lu-brands--white .lu-brands__item img { filter: brightness(0) invert(1); }

/* .lu-brands--none: shown exactly as uploaded, no treatment */

.lu-brands__fallback {
	font-size: 14px;
	font-weight: 800;
	font-stretch: 82%;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.lu-brands__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 4px 18px 24px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}
.lu-brands__all:hover { color: var(--lu-red); }

/* ==========================================================================
   8. PRODUCT ROWS / CAROUSELS
   ========================================================================== */

.lu-row { background: var(--lu-black); padding: 16px 0 0; }
.lu-row:first-of-type { padding-top: 22px; }

.lu-row__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.lu-row__title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.lu-row__all {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #cfcfcf;
}
.lu-row__all:hover { color: var(--lu-red); }

.lu-row__viewport { position: relative; }

.lu-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (5 * 12px)) / 6);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.lu-track::-webkit-scrollbar { display: none; }

.lu-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 30px; height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: #fff;
	opacity: .85;
	transition: opacity .16s var(--lu-ease), color .16s var(--lu-ease);
}
.lu-arrow:hover { opacity: 1; color: var(--lu-red); }
.lu-arrow[disabled] { opacity: .22; cursor: default; }
.lu-arrow--prev { left: -30px; }
.lu-arrow--next { right: -30px; }

/* Product card */
.lu-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--lu-card);
	color: var(--lu-card-text);
	border-radius: 2px;
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform .2s var(--lu-ease), box-shadow .2s var(--lu-ease);
}
.lu-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

.lu-card__media {
	position: relative;
	display: block;
	background: var(--lu-card-img);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.lu-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 6% 8%;
	transition: transform .35s var(--lu-ease);
}
.lu-card:hover .lu-card__media img { transform: scale(1.05); }

.lu-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c4c4c4;
}

.lu-card__flag {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 3;
	background: var(--lu-red);
	color: #fff;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 2px;
}
.lu-card__flag--sale { background: var(--lu-red); }

.lu-card__body {
	padding: 9px 10px 11px;
	border-top: 1px solid #ececec;
	background: #fff;
}

.lu-card__name {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 2px;
	color: #111;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lu-card__colour {
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--lu-card-muted);
	margin: 0 0 5px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 14px;
}

.lu-card__price {
	font-size: 12px;
	font-weight: 800;
	color: #111;
	letter-spacing: 0.005em;
}
/* was-price: light grey, struck through */
.lu-card__price del {
	color: #9c9c9c;
	font-weight: 500;
	margin-right: 7px;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
/* wc_price() wraps the amount in spans, which would otherwise drop the rule */
.lu-card__price del,
.lu-card__price del * {
	color: #9c9c9c;
	text-decoration: line-through;
}

/* now-price: red */
.lu-card__price ins,
.lu-card__price ins * {
	text-decoration: none;
	color: var(--lu-red);
	font-weight: 800;
}

.lu-card__price .woocommerce-Price-currencySymbol { font-weight: inherit; }

/* ==========================================================================
   8B. LIGHT MIDDLE  --  brand strip + home product rows on white
   ==========================================================================

   The hero, trust bar, newsletter banner and footer stay black. Everything
   between the category cards and the newsletter banner sits on white, so the
   borders, type colours and brand-logo treatment are all re-stated here.
   ========================================================================== */

:root {
	--lu-light-bg: #ffffff;
	--lu-light-line: #e7e7e7;
	--lu-light-tile: #f6f6f6;
	--lu-light-text: #111111;
	--lu-light-muted: #5f5f5f;
}

/* --- Brand strip ---------------------------------------------------------- */

body .lu-brands {
	background: var(--lu-light-bg);
	border-bottom: 1px solid var(--lu-light-line);
}

body .lu-brands__item { border-right: 1px solid var(--lu-light-line); }
body .lu-brands__item:last-child { border-right: 0; }
body .lu-brands__fallback { color: var(--lu-light-text); }
body .lu-brands__all { color: var(--lu-light-text); }
body .lu-brands__all:hover { color: var(--lu-red); }

/*
 * Brand logo treatment, re-stated for a WHITE strip.
 *
 * --screen: files are white artwork on a black background. invert() turns them
 *   into black artwork on white, then multiply drops the white so only the
 *   logo is left. (On the old black strip this was a plain blend.)
 * --invert: files are dark artwork on white, so multiply alone is enough.
 * --white: transparent artwork that used to be forced white is forced black.
 */
body .lu-brands--screen .lu-brands__item img { filter: invert(1); mix-blend-mode: multiply; }
body .lu-brands--invert .lu-brands__item img { filter: none; mix-blend-mode: multiply; }
body .lu-brands--white .lu-brands__item img { filter: brightness(0); mix-blend-mode: normal; }

/* --- Home product rows ---------------------------------------------------- */

body .lu-row {
	background: var(--lu-light-bg);
	padding: clamp(14px, 1.2vw, 22px) 0 clamp(14px, 1.2vw, 22px);
}
body .lu-row:first-of-type { padding-top: clamp(20px, 1.8vw, 32px); }

body .lu-row__title { color: var(--lu-light-text); }
body .lu-row__all { color: var(--lu-light-muted); }
body .lu-row__all:hover { color: var(--lu-red); }
body .lu-row .lu-arrow { color: var(--lu-light-text); }
body .lu-row .lu-arrow:hover { color: var(--lu-red); }

/* Cards need a tint, or they dissolve into the white page. */
body .lu-row .lu-card {
	background: var(--lu-light-tile);
	border-radius: 8px;
}
body .lu-row .lu-card__media { background: var(--lu-light-tile); }
body .lu-row .lu-card__body {
	background: transparent;
	border-top: 0;
	padding: 4px 12px 14px;
}
body .lu-row .lu-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
body .lu-row .lu-card__placeholder { color: #c9c9c9; }

/* --- Row headings, "View all" and badges ---------------------------------- */

body .lu-row__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 0;
	margin-bottom: clamp(10px, 0.9vw, 16px);
}
body .lu-row__title { flex: 1 1 auto; }
body .lu-row__all { flex: none; order: 3; }
/* the second line is pushed onto its own full-width line under the title */
body .lu-row__sub { flex: 1 1 100%; order: 4; }

body .lu-row__title {
	font-family: var(--lu-display);
	font-size: clamp(19px, 1.45vw, 29px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--lu-light-text);
}

/* Second line under the heading. Renders as soon as the row template outputs
   <p class="lu-row__sub">...</p>; harmless until then. */
body .lu-row__sub {
	margin: 6px 0 0;
	font-size: clamp(12px, 0.78vw, 15px);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lu-light-muted);
}

body .lu-row__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(12px, 0.76vw, 14.5px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lu-light-text);
	white-space: nowrap;
}
body .lu-row__all::after { content: "\2192"; font-size: 1.1em; line-height: 1; }
body .lu-row__all:hover { color: var(--lu-red); }

/* Badges: NEW and TRENDING black, SALE red. */
body .lu-row .lu-card__flag {
	top: 10px;
	left: 10px;
	padding: 4px 8px;
	border-radius: 3px;
	background: #111111;
	color: #ffffff;
	font-size: 9px;
	letter-spacing: 0.08em;
}
body .lu-row .lu-card__flag--sale { background: var(--lu-red); }

/*
 * Card count per row is left at the theme default of six (section 8), because
 * each row holds six products. Sizing the grid for eight made six cards fill
 * only six eighths of the width, so they stopped short of "View all".
 */

@media (max-width: 700px) {
	body .lu-row__title { font-size: clamp(19px, 5.4vw, 26px); }
}

/* ==========================================================================
   8C. STORY BANNER + FEATURE CARDS (below the product rows)
   ========================================================================== */

.lu-story {
	background: var(--lu-light-bg);
	padding: clamp(14px, 1.3vw, 26px) 0 clamp(20px, 1.8vw, 34px);
}

.lu-story__banner,
.lu-story__card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--lu-panel);
	isolation: isolate;
	color: #fff;
	text-decoration: none;
}

.lu-story__banner {
	aspect-ratio: 3.4;
	min-height: 240px;
	max-height: 460px;
	margin-bottom: clamp(10px, 0.9vw, 18px);
}

.lu-story__card {
	aspect-ratio: 1.46;
	min-height: 196px;
	max-height: 340px;
}

body .lu-story__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 68% center;
	transition: transform .5s var(--lu-ease);
}
.lu-story__card:hover .lu-story__img { transform: scale(1.04); }

.lu-story__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, .74) 0%,
		rgba(0, 0, 0, .52) 34%,
		rgba(0, 0, 0, .18) 62%,
		rgba(0, 0, 0, 0) 100%
	);
}

/*
 * No overlay on the wide "More than sneakers." banner - the photo carries it.
 * The three cards below keep theirs, since their text sits over busier crops.
 */
.lu-story__banner .lu-story__scrim { display: none; }

.lu-story__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(8px, 0.7vw, 14px);
	padding: clamp(18px, 2.2vw, 48px);
}

.lu-story__title {
	display: block;
	margin: 0;
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.02;
	letter-spacing: -0.012em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.lu-story__banner .lu-story__title { font-size: clamp(27px, 3.1vw, 62px); }
.lu-story__card .lu-story__title { font-size: clamp(19px, 1.7vw, 34px); }

.lu-story__text {
	display: block;
	margin: 0;
	line-height: 1.45;
	color: rgba(255, 255, 255, .94);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.lu-story__banner .lu-story__text { font-size: clamp(13px, 1.05vw, 21px); }
.lu-story__card .lu-story__text { font-size: clamp(11.5px, 0.76vw, 15px); }

.lu-story__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(4px, 0.5vw, 12px);
	padding: 12px 20px;
	background: #fff;
	color: #000;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .18s var(--lu-ease), color .18s var(--lu-ease);
}
.lu-story__banner .lu-story__btn { padding: 14px 24px; font-size: 11.5px; }
.lu-story__btn svg { flex: none; }

/*
 * Hover only where there is a real pointer. On a touch screen :hover latches
 * after a tap, which left the button stuck red.
 */
@media (hover: hover) {
	.lu-story__banner:hover .lu-story__btn,
	.lu-story__card:hover .lu-story__btn { background: var(--lu-red); color: #fff; }
}

.lu-story__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 0.9vw, 18px);
}

@media (max-width: 900px) {
	.lu-story { padding: 12px 0 20px; }
	.lu-story__banner { aspect-ratio: 1.9; min-height: 200px; max-height: 300px; }
	.lu-story__grid { grid-template-columns: 1fr; gap: 10px; }
	.lu-story__card { aspect-ratio: 2 / 1; min-height: 150px; max-height: 240px; }
	.lu-story__banner .lu-story__title { font-size: clamp(27px, 7.6vw, 40px); }
	.lu-story__banner .lu-story__text { font-size: 13.5px; }
	.lu-story__card .lu-story__title { font-size: clamp(20px, 6vw, 28px); }
	.lu-story__card .lu-story__text { font-size: 12.5px; }
	.lu-story__btn,
	.lu-story__banner .lu-story__btn { padding: 11px 17px; font-size: 10.5px; }
}

/*
 * Phones. The wide banner cannot be cropped to a letterbox without cutting the
 * group in half, and with no overlay the white copy had nothing to sit on. So
 * the picture runs at its own aspect - nothing cropped - and the copy moves
 * below it onto a black panel. The three cards keep their overlay layout.
 */
@media (max-width: 700px) {
	.lu-story__banner {
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
		background: var(--lu-bg);
	}

	body .lu-story__banner .lu-story__img {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		object-fit: contain;
		transform: none;
	}

	.lu-story__banner .lu-story__scrim { display: none; }

	.lu-story__banner .lu-story__body {
		position: static;
		inset: auto;
		padding: 18px 18px 22px;
	}

	.lu-story__banner .lu-story__title { font-size: clamp(26px, 7.4vw, 36px); }
}

/* ==========================================================================
   8D. WHY CHOOSE LACED UP
   ========================================================================== */

.lu-why {
	background: var(--lu-light-bg);
	padding: clamp(18px, 1.6vw, 32px) 0 clamp(20px, 1.8vw, 36px);
}

.lu-why__title {
	margin: 0 0 clamp(12px, 1.1vw, 22px);
	font-family: var(--lu-display);
	font-size: clamp(18px, 1.35vw, 27px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--lu-light-text);
}

.lu-why__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.lu-why__item {
	display: flex;
	align-items: flex-start;
	gap: clamp(9px, 0.8vw, 15px);
	padding: 2px clamp(12px, 1.3vw, 26px);
	border-right: 1px solid var(--lu-light-line);
}
.lu-why__item:first-child { padding-left: 0; }
.lu-why__item:last-child { border-right: 0; padding-right: 0; }

.lu-why__icon { flex: none; color: var(--lu-light-text); }
.lu-why__icon svg {
	display: block;
	width: clamp(24px, 1.85vw, 34px);
	height: auto;
}

.lu-why__body { min-width: 0; }

.lu-why__name {
	margin: 0 0 3px;
	font-size: clamp(11px, 0.78vw, 14px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--lu-light-text);
}

.lu-why__desc {
	margin: 0;
	font-size: clamp(10.5px, 0.72vw, 13px);
	line-height: 1.42;
	color: var(--lu-light-muted);
}

@media (max-width: 1100px) {
	.lu-why__grid { grid-template-columns: repeat(3, 1fr); row-gap: clamp(16px, 2vw, 26px); }
	.lu-why__item { padding: 2px 18px; }
	.lu-why__item:first-child { padding-left: 18px; }
	.lu-why__item:nth-child(3n) { border-right: 0; padding-right: 0; }
	.lu-why__item:nth-child(3n+1) { padding-left: 0; }
	.lu-why__item:last-child { border-right: 0; }
}

@media (max-width: 700px) {
	.lu-why { padding: 16px 0 22px; }
	.lu-why__grid { grid-template-columns: 1fr 1fr; row-gap: 18px; column-gap: 0; }
	.lu-why__item,
	.lu-why__item:first-child { padding: 2px 14px 2px 0; border-right: 1px solid var(--lu-light-line); }
	.lu-why__item:nth-child(2n) { padding: 2px 0 2px 14px; border-right: 0; }
	.lu-why__item:nth-child(3n) { border-right: 1px solid var(--lu-light-line); }
	.lu-why__item:last-child { border-right: 0; }
	.lu-why__title { font-size: clamp(18px, 5.2vw, 24px); }
}

/* ==========================================================================
   8E. LACED UP ON INSTAGRAM
   ========================================================================== */

.lu-ig {
	background: var(--lu-light-bg);
	padding: clamp(14px, 1.3vw, 26px) 0 clamp(22px, 2vw, 40px);
}

.lu-ig__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
	margin-bottom: clamp(10px, 0.9vw, 18px);
}

.lu-ig__title {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--lu-display);
	font-size: clamp(18px, 1.35vw, 27px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--lu-light-text);
}

.lu-ig__text {
	flex: 1 1 100%;
	order: 4;
	margin: 6px 0 0;
	font-size: clamp(12px, 0.78vw, 15px);
	line-height: 1.4;
	color: var(--lu-light-muted);
}

.lu-ig__follow {
	flex: none;
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(12px, 0.76vw, 14.5px);
	font-weight: 600;
	color: var(--lu-light-text);
	white-space: nowrap;
}
.lu-ig__follow::after { content: "\2192"; font-size: 1.1em; line-height: 1; }
.lu-ig__follow:hover { color: var(--lu-red); }

.lu-ig__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(8px, 0.7vw, 14px);
}

.lu-ig__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 0.85;
	background: var(--lu-light-tile);
}

body .lu-ig__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform .45s var(--lu-ease);
}
.lu-ig__item:hover .lu-ig__img { transform: scale(1.05); }

@media (max-width: 1100px) {
	.lu-ig__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
	.lu-ig { padding: 12px 0 24px; }
	.lu-ig__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.lu-ig__title { font-size: clamp(18px, 5.2vw, 24px); }
	.lu-ig__text { font-size: 12.5px; }
}

/* ==========================================================================
   9. VALUE STRIP  --  REMOVED
   ==========================================================================

   The "Why Pay More? / You Save R650 / Delivered Across Africa / Our Preferred
   Delivery Partner" panel is no longer shown. The rules below are kept so the
   strip can be brought back by deleting the one line underneath this note.
   ========================================================================== */

body .lu-value { display: none; }

.lu-value { background: var(--lu-black); padding: 26px 0 0; }

.lu-value__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 0.95fr;
	background: var(--lu-panel);
	border: 1px solid var(--lu-line);
	border-radius: 3px;
}

.lu-value__col {
	padding: 26px 28px;
	border-right: 1px solid var(--lu-line);
	display: flex;
	align-items: center;
	gap: 20px;
}
.lu-value__col:last-child { border-right: 0; }
.lu-value__col--stack { flex-direction: column; align-items: flex-start; gap: 12px; }

.lu-value__title {
	font-size: 19px;
	font-weight: 800;
	font-stretch: 84%;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 10px;
}

.lu-value__text {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--lu-muted);
	margin: 0 0 16px;
	max-width: 250px;
}
.lu-value__text:last-child { margin-bottom: 0; }

.lu-value__body { flex: 1 1 auto; min-width: 0; }

/* Savings badge */
.lu-badge {
	flex: none;
	width: 138px; height: 138px;
	border-radius: 50%;
	background: var(--lu-red);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	box-shadow: 0 0 0 6px rgba(224,27,34,.14);
}

.lu-badge__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.lu-badge__amount {
	font-family: var(--lu-display);
	font-size: 34px;
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1;
	margin: 2px 0 4px;
}

.lu-badge__note {
	font-size: 7.5px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	opacity: .92;
	max-width: 108px;
}

/* Africa map */
.lu-value__map { flex: none; width: 168px; color: var(--lu-red); }
.lu-value__map svg { width: 100%; height: auto; display: block; }

/* Partner */
.lu-partner { text-align: left; width: 100%; }

.lu-partner__label {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lu-muted);
	margin: 0 0 14px;
	text-align: center;
}

.lu-partner__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

.lu-partner__logo { max-height: 104px; width: auto; max-width: 100%; }

/* shown in place of a logo file that could not be found anywhere */
.lu-announce__brand {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.lu-partner__fallback {
	font-size: 20px;
	font-weight: 800;
	font-stretch: 84%;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
.lu-partner__box { max-height: 96px; width: auto; border-radius: 3px; }

/* ==========================================================================
   10. PAYMENTS BAR
   ========================================================================== */

.lu-pay { background: var(--lu-black); padding: 16px 0 30px; }

.lu-pay__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	align-items: center;
	gap: 0;
	border-top: 1px solid var(--lu-line);
	border-bottom: 1px solid var(--lu-line);
	padding: 16px 0;
	margin-top: 12px;
}

.lu-pay__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 22px;
	border-right: 1px solid var(--lu-line);
}
.lu-pay__item:first-child { padding-left: 6px; }

.lu-pay__icon { flex: none; color: #fff; opacity: .92; }

.lu-pay__title {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin: 0 0 2px;
}

.lu-pay__desc { font-size: 10.5px; color: var(--lu-muted); margin: 0; line-height: 1.35; }

.lu-pay__logos {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 22px;
}

.lu-pay__logos img {
	height: 56px;
	width: auto;
	border-radius: 4px;
	background: #fff;
	padding: 7px 16px;
}

.lu-pay__chip {
	display: inline-flex;
	align-items: center;
	height: 56px;
	padding: 0 20px;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
   10B. NEWSLETTER BANNER (replaces the payments / trust bar above the footer)
   ========================================================================== */

/* The old payments bar is kept in the markup but no longer shown. */
body .lu-pay { display: none; }

.lu-nl {
	position: relative;
	overflow: hidden;
	background: #111111;
	isolation: isolate;
	border-top: 1px solid var(--lu-line-soft);
}

body .lu-nl__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.lu-nl__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, .88) 0%,
		rgba(0, 0, 0, .76) 44%,
		rgba(0, 0, 0, .70) 100%
	);
}

.lu-nl__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.3vw, 46px);
	padding: clamp(20px, 2vw, 36px) 0;
	min-height: clamp(104px, 7.6vw, 148px);
}

.lu-nl__logo { flex: none; line-height: 0; }
body .lu-nl__logo img,
body .lu-nl__logo svg {
	height: clamp(52px, 4.4vw, 84px);
	width: auto;
	display: block;
	position: static;
}

.lu-nl__copy { flex: 1 1 auto; min-width: 0; }

.lu-nl__title {
	font-family: var(--lu-display);
	font-size: clamp(21px, 2.05vw, 38px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.04;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 7px;
}

.lu-nl__text {
	font-size: clamp(11.5px, 0.8vw, 15px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .80);
	margin: 0;
}

.lu-nl__form {
	flex: 0 1 min(46%, 760px);
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

body .lu-nl__input {
	flex: 1 1 auto;
	min-width: 0;
	height: clamp(44px, 3.3vw, 58px);
	margin: 0;
	padding: 0 clamp(14px, 1.1vw, 22px);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--lu-font);
	font-size: 14px;
	color: #111;
}
body .lu-nl__input::placeholder { color: #8a8a8a; opacity: 1; }
body .lu-nl__input:focus { outline: 0; box-shadow: none; }

body .lu-nl__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: auto;
	margin: 0;
	padding: 0 clamp(18px, 1.7vw, 34px);
	border: 0;
	border-radius: 0;
	background: var(--lu-red);
	color: #fff;
	font-family: var(--lu-font);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s var(--lu-ease);
}
body .lu-nl__btn:hover { background: var(--lu-red-dark); }
.lu-nl__btn svg { flex: none; }

@media (max-width: 1100px) {
	.lu-nl__inner { flex-wrap: wrap; }
	.lu-nl__form { flex: 1 1 100%; }
}

@media (max-width: 700px) {
	.lu-nl__inner { gap: 14px; padding: 22px 0 24px; min-height: 0; }
	.lu-nl__logo { order: 1; }
	.lu-nl__copy { order: 2; flex: 1 1 100%; }
	.lu-nl__form { order: 3; }
	body .lu-nl__logo img,
	body .lu-nl__logo svg { height: 56px; }
	.lu-nl__title { font-size: clamp(21px, 6.2vw, 30px); }
	.lu-nl__text { font-size: 12.5px; }
	body .lu-nl__btn { padding: 0 16px; font-size: 10.5px; }
	.lu-nl__btn svg { display: none; }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.lu-footer {
	background: var(--lu-black);
	border-top: 1px solid var(--lu-line);
}

/* brand column plus Shop / Help / Legal */
.lu-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
	gap: 34px;
	padding: 34px 0 30px;
}

.lu-footer__brand { padding-right: 24px; border-right: 1px solid var(--lu-line); }

.lu-footer__logo { display: inline-block; margin-bottom: 16px; line-height: 0; }
.lu-footer__logo img,
.lu-footer__logo svg { height: 82px; width: auto; position: static; }

.lu-footer__tagline {
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--lu-muted);
	margin: 0 0 20px;
	max-width: 210px;
}

.lu-social { display: flex; align-items: center; gap: 14px; }

.lu-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	color: #fff;
	transition: color .16s var(--lu-ease), transform .16s var(--lu-ease);
}
.lu-social a:hover { color: var(--lu-red); transform: translateY(-2px); }

.lu-footer__col-title {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}

.lu-footer__list li { margin-bottom: 9px; }

.lu-footer__list a {
	font-size: 11.5px;
	color: var(--lu-muted);
	transition: color .16s var(--lu-ease);
}
.lu-footer__list a:hover { color: #fff; }

/* Newsletter */
.lu-footer__bottom {
	border-top: 1px solid var(--lu-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	font-size: 10.5px;
	color: var(--lu-muted-2);
}

.lu-footer__partners {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.4vw, 28px);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.lu-footer__deliver { display: flex; align-items: center; gap: 10px; }
.lu-footer__deliver img { height: clamp(40px, 3.4vw, 54px); width: auto; }

.lu-footer__payfast { display: flex; align-items: center; line-height: 0; }
.lu-footer__payfast img { height: clamp(44px, 3.8vw, 60px); width: auto; }

/* --------------------------------------------------------------------------
   11B. PAYMENT LOGOS (footer close)
   -------------------------------------------------------------------------- */

.lu-payfoot {
	background: var(--lu-black);
	border-top: 1px solid var(--lu-line-soft);
}

.lu-payfoot__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(14px, 1.4vw, 28px);
	padding: clamp(16px, 1.5vw, 26px) 0;
}

body .lu-payfoot__logo {
	height: clamp(42px, 3.2vw, 56px);
	width: auto;
	max-width: 100%;
	display: block;
	border-radius: 3px;
}

@media (max-width: 700px) {
	.lu-payfoot__row { gap: 12px; padding: 14px 0 18px; }
	body .lu-payfoot__logo { height: 40px; }
}

/* ==========================================================================
   12. PAGE + POST CONTENT
   ========================================================================== */

.lu-page { padding: 46px 0 64px; background: var(--lu-black); }

.lu-page__header { margin-bottom: 26px; }

.lu-page__title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.lu-page__sub { color: var(--lu-muted); font-size: 13px; margin: 0; }

.lu-content { max-width: 780px; font-size: 14.5px; line-height: 1.75; color: #ddd; }
.lu-content h2 { font-size: 24px; font-weight: 800; text-transform: uppercase; margin: 32px 0 12px; }
.lu-content h3 { font-size: 18px; font-weight: 700; margin: 26px 0 10px; }
.lu-content a { color: var(--lu-red); text-decoration: underline; }
.lu-content ul { list-style: disc; padding-left: 20px; margin: 0 0 18px; }
.lu-content ol { list-style: decimal; padding-left: 20px; margin: 0 0 18px; }
.lu-content li { margin-bottom: 7px; }
.lu-content img { border-radius: 3px; margin: 18px 0; }
/* Never let article styling leak into shop UI, whatever wraps it */
.lu-content .lu-cart,
.lu-content .lu-checkout,
.lu-content .woocommerce {
	max-width: none;
	font-size: 15px;
	line-height: 1.6;
}
.lu-content .lu-cart a,
.lu-content .lu-checkout a,
.lu-content .woocommerce a { text-decoration: none; color: inherit; }
.lu-content .lu-cart__links a { text-decoration: underline; color: var(--lu-muted); }
.lu-content .lu-cart h1,
.lu-content .lu-cart h2 { margin: 0; text-transform: none; }
.lu-content .lu-cart__title { text-transform: uppercase; }
.lu-content .lu-cart ul,
.lu-content .lu-checkout ul { list-style: none; padding-left: 0; margin: 0; }
.lu-content .lu-cart li,
.lu-content .lu-checkout li { margin-bottom: 0; }
.lu-content .lu-cart img { margin: 0; }

.lu-content blockquote {
	border-left: 3px solid var(--lu-red);
	padding-left: 18px;
	margin: 22px 0;
	color: #bfbfbf;
	font-style: italic;
}

.lu-pagination {
	display: flex;
	gap: 8px;
	margin-top: 34px;
	flex-wrap: wrap;
}
.lu-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px; height: 36px;
	padding: 0 10px;
	border: 1px solid var(--lu-line);
	font-size: 12px;
	font-weight: 700;
}
.lu-pagination .page-numbers.current,
.lu-pagination .page-numbers:hover { background: var(--lu-red); border-color: var(--lu-red); color: #fff; }

/* ==========================================================================
   13. WOOCOMMERCE OVERRIDES
   ========================================================================== */

.woocommerce .lu-page { color: #ddd; }

.woocommerce-products-header__title,
.woocommerce-loop-product__title { color: #fff; }

.lu-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 8px;
}

/*
 * The old blanket rule here was `.woocommerce img { height: auto }`.
 *
 * On any WooCommerce page the body carries the woocommerce class, so that rule
 * matched EVERY image on the page -- including the header logo, the Courier Guy
 * mark, the brand strip and the payment logos -- and at (0,1,1), declared later
 * in the file, it beat all of them. That is why the courier logo rendered at
 * full size on Men / Women / Unisex but not on the home page.
 *
 * It is scoped to WooCommerce's own product imagery now, and every piece of
 * theme chrome is pinned below with enough specificity that nothing can
 * enlarge it again.
 */
.woocommerce .woocommerce-product-gallery img,
.woocommerce ul.products img,
.woocommerce div.product img { height: auto; }

/* theme chrome -- sizes fixed on every page type */
body .lu-announce__partner { height: 32px; width: auto; max-width: none; }
body .lu-header .lu-logo img { height: clamp(50px, 4.4vw, 82px); width: auto; }
body .lu-footer__logo img { height: 82px; width: auto; }
body .lu-footer__deliver img { height: clamp(40px, 3.4vw, 54px); width: auto; }
body .lu-footer__payfast img { height: clamp(44px, 3.8vw, 60px); width: auto; max-width: 100%; }
body .lu-brands__item img { max-height: clamp(32px, 2.6vw, 52px); height: auto; width: auto; }
body .lu-pay__logos img { height: 56px; width: auto; }
body .lu-partner__logo { max-height: 104px; height: auto; width: auto; max-width: 100%; }
body .lu-partner__box { max-height: 96px; height: auto; width: auto; }
body .lu-hero__img { width: 100%; height: auto; }

/*
 * WooCommerce ships its own brand purple (#7f54b3) on every button, at a higher
 * specificity than a plain theme rule. These override it site-wide -- add to
 * cart, cart, checkout, account, everywhere.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	background-color: var(--lu-red) !important;
	border-color: var(--lu-red) !important;
	color: #fff !important;
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 13px 24px;
	line-height: 1.2;
	text-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	background-color: var(--lu-red-dark) !important;
	border-color: var(--lu-red-dark) !important;
	color: #fff !important;
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce .single_add_to_cart_button.disabled {
	opacity: .45 !important;
	cursor: not-allowed;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--lu-panel);
	border-top: 3px solid var(--lu-red);
	color: #fff;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 13px;
	list-style: none;
}
.woocommerce-message a,
.woocommerce-info a { color: var(--lu-red); font-weight: 700; }

.woocommerce .price del,
.woocommerce .price del * {
	color: #9c9c9c;
	text-decoration: line-through;
	opacity: 1;
}
.woocommerce .price ins,
.woocommerce .price ins * {
	color: var(--lu-red);
	text-decoration: none;
	font-weight: 800;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--lu-red);
	color: #fff;
	border-radius: 2px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 8px;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
}

.woocommerce-result-count,
.woocommerce-ordering select {
	color: var(--lu-muted);
	font-size: 12px;
}

.woocommerce-ordering select {
	background: var(--lu-panel);
	border: 1px solid var(--lu-line);
	padding: 8px 10px;
	color: #fff;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1280px) {
	.lu-arrow--prev { left: -8px; }
	.lu-arrow--next { right: -8px; }
	.lu-nav__list { gap: 16px; }
	.lu-search { max-width: 250px; }
}

@media (max-width: 1400px) {
	.lu-hero { min-height: clamp(340px, 44vw, 520px); }
	.lu-hero__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 78% center;
	}
	.lu-hero__content { max-width: 48%; }
}

@media (max-width: 1100px) {
	.lu-nav, .lu-header .lu-search { display: none; }
	.lu-burger { display: inline-flex; }
	.lu-icons { gap: 16px; margin-left: 12px; }
	.lu-track { grid-auto-columns: calc((100% - (3 * 12px)) / 4); }
	.lu-value__grid { grid-template-columns: 1fr 1fr; }
	.lu-value__col:nth-child(2) { border-right: 0; }
	.lu-value__col:last-child { grid-column: 1 / -1; border-top: 1px solid var(--lu-line); }
	.lu-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
	.lu-footer__brand { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
	.lu-shop__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.lu-announce__inner { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.lu-announce__inner::-webkit-scrollbar { display: none; }
	.lu-trust__grid { grid-template-columns: 1fr 1fr; gap: 18px 0; }
	.lu-trust__item:nth-child(2n) { border-right: 0; }
	.lu-trust__item { padding: 4px 16px; }
	.lu-brands__grid { grid-template-columns: repeat(4, 1fr); }
	.lu-brands__item:nth-child(4n) { border-right: 0; }
	.lu-brands__all { grid-column: 1 / -1; justify-content: center; padding: 14px 0; border-top: 1px solid var(--lu-line); }
	.lu-pay__grid { grid-template-columns: 1fr 1fr; gap: 16px 0; }
	.lu-pay__item:nth-child(2n) { border-right: 0; }
	.lu-pay__logos { grid-column: 1 / -1; padding: 12px 0 0; justify-content: center; border-top: 1px solid var(--lu-line); }
	.lu-value__col { padding: 22px 20px; }
	.lu-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	:root { --lu-gutter: 16px; --lu-header-h: 64px; }
	.lu-header .lu-logo img,
	.lu-header .lu-logo svg { height: 46px; }
	.lu-footer__logo img,
	.lu-footer__logo svg { height: 66px; }
	.lu-icons__link span { display: none; }
	.lu-hero { min-height: clamp(320px, 62vw, 460px); }
	.lu-hero__content { max-width: 100%; }
	.lu-hero__img { object-position: 74% center; }
	.lu-hero__inner { padding-top: 40px; padding-bottom: 44px; }
	.lu-hero__title { font-size: clamp(31px, 6.4vw, 52px); }
	.lu-hero__tagline { font-size: clamp(15px, 2.7vw, 23px); }
	.lu-hero__actions .lu-btn { flex: 1 1 100%; min-width: 0; }
	.lu-track { grid-auto-columns: calc((100% - 12px) / 2); }
	.lu-arrow { display: none; }
	.lu-value__grid { grid-template-columns: 1fr; }
	.lu-value__col { border-right: 0; border-bottom: 1px solid var(--lu-line); flex-direction: column; align-items: flex-start; }
	.lu-value__col:last-child { border-bottom: 0; border-top: 0; }
	.lu-badge { align-self: center; }
	.lu-value__map { align-self: center; }
	.lu-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
	.lu-footer__bottom { flex-direction: column; text-align: center; gap: 10px; }
	.lu-footer__partners { justify-content: center; gap: 16px; }
	.lu-partner__row { flex-direction: column; gap: 14px; }
}

@media (max-width: 460px) {
	.lu-trust__grid { grid-template-columns: 1fr; }
	.lu-trust__item { border-right: 0; }
	.lu-brands__grid { grid-template-columns: repeat(3, 1fr); }
	.lu-brands__item:nth-child(4n) { border-right: 1px solid var(--lu-line); }
	.lu-brands__item:nth-child(3n) { border-right: 0; }
	.lu-pay__grid { grid-template-columns: 1fr; }
	.lu-pay__item { border-right: 0; }
	.lu-shop__grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   15. SHOP / PRODUCT ARCHIVE
   ========================================================================== */

.lu-shop { background: var(--lu-black); padding: 22px 0 56px; }

.lu-crumbs {
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--lu-muted-2);
	margin-bottom: 18px;
}
.lu-crumbs a { color: var(--lu-muted); }
.lu-crumbs a:hover { color: #fff; }
.lu-crumbs span[aria-hidden] { margin: 0 8px; }

.lu-shop__head { margin-bottom: 30px; }

.lu-shop__title {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 1;
	font-size: clamp(38px, 4.2vw, 62px);
	margin: 0 0 12px;
}

.lu-shop__intro {
	max-width: 520px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--lu-muted);
	margin: 0;
}

.lu-shop__layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 0;
	align-items: start;
}

.lu-shop__main {
	min-width: 0;
	padding-left: 30px;
	border-left: 1px solid var(--lu-line);
}

/* --------------------------------------------------------------- Filters */

.lu-filters { padding-right: 28px; }

.lu-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lu-line);
}

.lu-filters__title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
}

.lu-filters__clear {
	font-size: 11px;
	font-weight: 700;
	color: var(--lu-red);
	letter-spacing: 0.02em;
}
.lu-filters__clear:hover { text-decoration: underline; }

.lu-filter { border-bottom: 1px solid var(--lu-line); }

.lu-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 0 12px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
}

.lu-filter__caret { transition: transform .18s var(--lu-ease); opacity: .7; }
.lu-filter:not(.is-open) .lu-filter__caret { transform: rotate(-90deg); }

.lu-filter__body { padding-bottom: 16px; }
.lu-filter:not(.is-open) .lu-filter__body { display: none; }

.lu-filter__list li { margin-bottom: 9px; }
.lu-filter__list li.is-extra { display: none; }
.lu-filter.is-expanded .lu-filter__list li.is-extra { display: block; }

.lu-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	color: var(--lu-muted);
	cursor: pointer;
	transition: color .16s var(--lu-ease);
}
.lu-check:hover { color: #fff; }
.lu-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.lu-check__box {
	flex: none;
	width: 14px; height: 14px;
	border: 1px solid #3a3a3a;
	border-radius: 2px;
	position: relative;
	transition: background-color .16s var(--lu-ease), border-color .16s var(--lu-ease);
}
.lu-check.is-on .lu-check__box,
.lu-check input:checked + .lu-check__box {
	background: var(--lu-red);
	border-color: var(--lu-red);
}
.lu-check.is-on .lu-check__box::after,
.lu-check input:checked + .lu-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);
}

.lu-check__label { flex: 1 1 auto; }
.lu-check__count { color: var(--lu-muted-2); font-size: 11.5px; }

/* Size pills */
.lu-sizes {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}

.lu-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	border: 1px solid #2e2e2e;
	border-radius: 2px;
	font-size: 11.5px;
	color: #d0d0d0;
	transition: border-color .16s var(--lu-ease), background-color .16s var(--lu-ease), color .16s var(--lu-ease);
}
.lu-size:hover { border-color: #6a6a6a; color: #fff; }
.lu-size.is-on { background: var(--lu-red); border-color: var(--lu-red); color: #fff; }
.lu-size.is-extra { display: none; }
.lu-filter.is-expanded .lu-size.is-extra { display: inline-flex; }

/* Colour swatches */
.lu-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.lu-swatch {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--swatch, #6f6f6f);
	box-shadow: 0 0 0 1px #333;
	transition: box-shadow .16s var(--lu-ease), transform .16s var(--lu-ease);
}
.lu-swatch:hover { transform: scale(1.1); }
.lu-swatch.is-on { box-shadow: 0 0 0 2px var(--lu-red); }

/* Price */
.lu-price__labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--lu-muted);
	margin-bottom: 12px;
}
.lu-price__labels .woocommerce-Price-amount { color: var(--lu-muted); }

.lu-price__track { position: relative; height: 22px; }

.lu-price__track::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 10px;
	height: 3px;
	background: #2c2c2c;
	border-radius: 2px;
}

.lu-price__fill {
	position: absolute;
	top: 10px; height: 3px;
	background: var(--lu-red);
	border-radius: 2px;
	left: 0; right: 0;
}

.lu-price__track input[type="range"] {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 22px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.lu-price__track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 15px; height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.lu-price__track input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 15px; height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	cursor: pointer;
}

.lu-filter__more {
	margin-top: 12px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--lu-muted);
	font-size: 11.5px;
}
.lu-filter__more:hover { color: #fff; }

.lu-filters__apply { width: 100%; margin-top: 20px; }

/* --------------------------------------------------------------- Toolbar */

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

.lu-toolbar__count {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #fff;
}

.lu-toolbar__right { display: flex; align-items: center; gap: 12px; }

.lu-toolbar .woocommerce-ordering { margin: 0; }
.lu-toolbar .woocommerce-ordering select {
	background: #0c0c0c;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
	color: #e6e6e6;
	font-size: 12px;
	padding: 9px 30px 9px 12px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 5.5 6-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.lu-view {
	display: flex;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
	overflow: hidden;
}

.lu-view__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	color: #7d7d7d;
	background: #0c0c0c;
	transition: color .16s var(--lu-ease), background-color .16s var(--lu-ease);
}
.lu-view__btn + .lu-view__btn { border-left: 1px solid #2a2a2a; }
.lu-view__btn:hover { color: #fff; }
.lu-view__btn.is-on { color: #fff; background: #1c1c1c; }

/* --------------------------------------------------------------- Grid */

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

.lu-shop__grid--list { grid-template-columns: minmax(0, 1fr); }

/* Dark card, as used on the shop */
.lu-card--dark {
	background: #101010;
	color: #fff;
	border: 1px solid #1e1e1e;
	border-radius: 3px;
}
.lu-card--dark:hover { box-shadow: 0 14px 34px rgba(0,0,0,.7); }
.lu-card--dark .lu-card__media { background: #141414; aspect-ratio: 4 / 3; }
.lu-card--dark .lu-card__body { background: transparent; border-top: 0; padding: 2px 12px 14px; }
.lu-card--dark .lu-card__name { color: #fff; font-size: 12.5px; }
.lu-card--dark .lu-card__colour { color: #9a9a9a; font-size: 11.5px; }
.lu-card--dark .lu-card__price { color: #fff; font-size: 13px; }
.lu-card--dark .lu-card__price del,
.lu-card--dark .lu-card__price del * { color: #a6a6a6; }
.lu-card--dark .lu-card__price ins,
.lu-card--dark .lu-card__price ins * { color: var(--lu-red); }
.lu-card--dark .lu-card__placeholder { color: #3a3a3a; }

.lu-card__wish {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 4;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: #cfcfcf;
	transition: color .16s var(--lu-ease), transform .16s var(--lu-ease);
}
.lu-card__wish:hover { color: var(--lu-red); transform: scale(1.12); }
.lu-card__wish.is-on { color: var(--lu-red); }
.lu-card__wish.is-on svg { fill: var(--lu-red); }

/* List view */
.lu-shop__grid--list .lu-card {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
}
.lu-shop__grid--list .lu-card__body { padding: 16px 20px; }
.lu-shop__grid--list .lu-card__name { font-size: 15px; }

.lu-shop__empty { padding: 60px 0; text-align: center; color: var(--lu-muted); }

/* --------------------------------------------------------------------------
   Product tag archives (New Drops, Trending Now...) show the grid only.
   No sidebar, so the products run the full width of the container.
   body.tax-product_tag wins over the responsive rules below by specificity,
   which keeps the sidebar hidden at every screen size.
   -------------------------------------------------------------------------- */

body.tax-product_tag .lu-filters { display: none; }
body.tax-product_tag .lu-shop__layout { grid-template-columns: minmax(0, 1fr); }
body.tax-product_tag .lu-shop__main { padding-left: 0; border-left: 0; }
.lu-shop__empty p { margin-bottom: 18px; }

/* --------------------------------------------------------------- Pagination */

.woocommerce-pagination { margin-top: 32px; }
.woocommerce-pagination ul,
.woocommerce-pagination .page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
	border: 0;
}
.woocommerce-pagination li { border: 0; }

.woocommerce-pagination .page-numbers li .page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px; height: 34px;
	padding: 0 10px;
	border: 1px solid #262626;
	border-radius: 4px;
	background: #0c0c0c;
	color: #d4d4d4;
	font-size: 12.5px;
	font-weight: 700;
	transition: background-color .16s var(--lu-ease), border-color .16s var(--lu-ease), color .16s var(--lu-ease);
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination li .page-numbers.current {
	background: var(--lu-red);
	border-color: var(--lu-red);
	color: #fff;
}
.woocommerce-pagination a.page-numbers:hover { border-color: #5a5a5a; color: #fff; }
.woocommerce-pagination .page-numbers.dots { background: none; border-color: transparent; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1200px) {
	.lu-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	.lu-shop__layout { grid-template-columns: 1fr; }
	.lu-filters { padding-right: 0; margin-bottom: 26px; }
	.lu-shop__main { padding-left: 0; border-left: 0; }
	.lu-sizes { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 700px) {
	.lu-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.lu-shop__grid--list .lu-card { grid-template-columns: 120px minmax(0, 1fr); }
	.lu-toolbar { flex-wrap: wrap; }
	.lu-sizes { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   16. SINGLE PRODUCT
   ========================================================================== */

.lu-product { background: var(--lu-black); padding: 20px 0 40px; }

.lu-product .lu-crumbs { margin-bottom: 20px; }
.lu-product .lu-crumbs a,
.lu-product .lu-crumbs { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.lu-product .woocommerce-breadcrumb { color: var(--lu-muted-2); margin: 0; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.lu-product .woocommerce-breadcrumb a { color: var(--lu-muted); }
.lu-product .woocommerce-breadcrumb a:hover { color: #fff; }
.lu-product .woocommerce-breadcrumb span[aria-hidden] { margin: 0 8px; color: #4a4a4a; }

.lu-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 34px;
	align-items: start;
	margin-bottom: 34px;
}

/* --------------------------------------------------------------- Gallery */

.lu-gallery {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.lu-gallery__rail {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 520px;
	overflow-y: auto;
	scrollbar-width: none;
}
.lu-gallery__rail::-webkit-scrollbar { display: none; }

.lu-gallery__thumb {
	flex: none;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: #e0e0e0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	transition: border-color .16s var(--lu-ease);
}
.lu-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.lu-gallery__thumb:hover { border-color: #9a9a9a; }
.lu-gallery__thumb.is-on { border-color: var(--lu-red); }

.lu-gallery__stage {
	position: relative;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	aspect-ratio: 4 / 3.2;
}

.lu-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	display: none;
	align-items: center;
	justify-content: center;
}
.lu-gallery__slide.is-on { display: flex; }
.lu-gallery__slide img { max-width: 88%; max-height: 88%; width: auto; height: auto; object-fit: contain; }

.lu-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 34px; height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: #4a4a4a;
	transition: color .16s var(--lu-ease);
}
.lu-gallery__nav:hover { color: #000; }
.lu-gallery__nav--prev { left: 6px; }
.lu-gallery__nav--next { right: 6px; }

.lu-gallery__zoom {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 3;
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	color: #222;
	transition: background-color .16s var(--lu-ease);
}
.lu-gallery__zoom:hover { background: #fff; }

.lu-gallery.is-zoomed .lu-gallery__stage { aspect-ratio: auto; height: 78vh; }

/* --------------------------------------------------------------- Summary */

.lu-summary { padding-top: 4px; }

.lu-summary__brand {
	font-size: 12px;
	color: var(--lu-muted);
	margin: 0 0 6px;
}

.lu-summary__title {
	font-size: clamp(26px, 2.1vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 2px;
	text-transform: none;
	letter-spacing: -0.01em;
}

.lu-summary__sub {
	font-size: 17px;
	color: var(--lu-muted);
	margin: 0 0 18px;
}

.lu-summary__price {
	font-size: 27px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
}
.lu-summary__price del,
.lu-summary__price del * { color: #9c9c9c; font-weight: 500; text-decoration: line-through; font-size: 20px; }
.lu-summary__price ins,
.lu-summary__price ins * { color: var(--lu-red); text-decoration: none; }

.lu-summary__tax { font-size: 11.5px; color: var(--lu-muted-2); margin: 4px 0 22px; }

/* Variation form, restyled */
.lu-summary .variations { width: 100%; border: 0; margin: 0 0 4px; }
.lu-summary .variations tr { display: block; margin-bottom: 18px; }
.lu-summary .variations th,
.lu-summary .variations td { display: block; padding: 0; border: 0; text-align: left; }

.lu-summary .variations label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 10px;
	display: block;
}

/* the select is kept for the form to submit, but hidden once pills exist */
.lu-pills-ready .lu-summary .variations select { display: none; }

/*
 * A variation-swatches plugin renders its own buttons for the same attribute.
 * Left visible you get two controls stacked on each other -- unstyled white
 * boxes above our pills, with the colour swatches and their labels overlapping.
 * They stay in the DOM so the plugin's scripts do not error, but are hidden.
 */
.lu-summary .variations [data-lu-hidden],
.lu-summary .variations .variable-items-wrapper,
.lu-summary .variations .woo-variation-swatches,
.lu-summary .variations .woo-selected-variation-item-name,
.lu-summary .variations ul:not(.lu-pills) {
	display: none !important;
}

/* and nothing stray inside a variation row renders as a bare button or thumb */
.lu-summary .variations button:not(.lu-pill),
.lu-summary .variations td.value > img,
.lu-summary .variations td.value > a > img { display: none; }

.lu-pills {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 7px;
}

/* long values such as "Grey Two / Cream White" need room to breathe */
.lu-pills--wide {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.lu-pills--wide .lu-pill {
	height: auto;
	min-height: 36px;
	padding: 8px 10px;
	font-size: 11.5px;
	line-height: 1.3;
	text-align: center;
}

.lu-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border: 1px solid #2e2e2e;
	border-radius: 3px;
	background: #0c0c0c;
	color: #e2e2e2;
	font-size: 12.5px;
	font-weight: 600;
	transition: border-color .16s var(--lu-ease), color .16s var(--lu-ease), background-color .16s var(--lu-ease);
}
.lu-pill:hover { border-color: #7a7a7a; color: #fff; }
.lu-pill.is-on { border-color: #fff; color: #fff; background: #1a1a1a; }
.lu-pill.is-out { opacity: .32; text-decoration: line-through; cursor: not-allowed; }

.lu-sizehead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.lu-sizehead label { margin: 0 !important; }
.lu-sizehead a,
.lu-sizehead .reset_variations {
	font-size: 11.5px;
	color: var(--lu-muted);
	text-decoration: underline;
	white-space: nowrap;
}
.lu-sizehead a:hover { color: #fff; }

/* Woo positions this absolutely by default, which is what put "Clear"
   on top of the swatch labels */
.lu-summary .reset_variations {
	position: static !important;
	visibility: visible !important;
	height: auto !important;
	margin: 0;
}

.lu-summary .variations td.value { position: relative; }
.lu-summary .variations tr { margin-bottom: 22px; }

/*
 * An attribute with only one possible value is not a choice, so the row is
 * hidden and the value selected automatically. The colourway is already shown
 * under the product title, which is where the design puts it.
 *
 * To hide a specific attribute outright regardless of how many options it has,
 * add its slug here, e.g.:
 *   .lu-summary .variations tr:has(#pa_colour) { display: none; }
 */
.lu-summary .variations tr[data-lu-single] { display: none !important; }

/* Quantity */
.lu-summary .quantity { display: block; margin: 0 0 16px; }

.lu-qty-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	display: block;
	margin-bottom: 10px;
}

.lu-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #2e2e2e;
	border-radius: 3px;
	overflow: hidden;
	background: #0c0c0c;
}

.lu-stepper button {
	width: 34px; height: 36px;
	background: none;
	border: 0;
	color: #d8d8d8;
	font-size: 17px;
	line-height: 1;
}
.lu-stepper button:hover { color: #fff; background: #1a1a1a; }

.lu-summary .quantity input.qty {
	width: 46px; height: 36px;
	border: 0;
	border-left: 1px solid #2e2e2e;
	border-right: 1px solid #2e2e2e;
	background: transparent;
	color: #fff;
	text-align: center;
	font-size: 13px;
	-moz-appearance: textfield;
}
.lu-summary .quantity input.qty::-webkit-outer-spin-button,
.lu-summary .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Buttons */
.woocommerce .lu-summary .single_add_to_cart_button,
.lu-summary .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin: 6px 0 4px;
	padding: 0;
	border-radius: 3px;
	transition: background-color .18s var(--lu-ease);
}


/* Trust row */
.lu-summary__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--lu-line);
}
.lu-summary__trust li { display: flex; align-items: center; gap: 9px; }
.lu-summary__trust svg { flex: none; color: #fff; opacity: .9; }
.lu-summary__trust span { display: block; font-size: 9.5px; line-height: 1.35; color: var(--lu-muted); }
.lu-summary__trust strong { display: block; font-size: 10px; color: #fff; font-weight: 700; }

/* --------------------------------------------------------------- Details */

/*
 * Two columns. There used to be a third 1px column plus a ::before, and the
 * ::before took column one -- which pushed the description into the 1px column
 * and stacked it on top of itself. The divider is a border on the specs column.
 */
.lu-details {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 0;
	background: #0b0b0b;
	border: 1px solid var(--lu-line);
	border-radius: 4px;
	overflow: hidden;
}

.lu-details__desc { padding: 26px 32px 30px; min-width: 0; }
.lu-details__specs { padding: 26px 32px 30px; border-left: 1px solid var(--lu-line); min-width: 0; }

.lu-details__title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.lu-details__body { font-size: 13px; line-height: 1.7; color: #cfcfcf; }
.lu-details__body p { margin: 0 0 14px; }
.lu-details__body ul { list-style: disc; padding-left: 18px; margin: 0 0 14px; }
.lu-details__body li { margin-bottom: 6px; }

.lu-details__specs dl { margin: 0; }

.lu-spec {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 14px;
	padding: 6px 0;
	align-items: baseline;
}
.lu-spec dt {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lu-muted-2);
}
.lu-spec dd {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #efefef;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.lu-product__top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.lu-summary { max-width: 560px; }
}

@media (max-width: 860px) {
	.lu-details { grid-template-columns: minmax(0, 1fr); }
	.lu-details__specs { border-left: 0; border-top: 1px solid var(--lu-line); }
	.lu-pills { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.lu-gallery { grid-template-columns: minmax(0, 1fr); }
	.lu-gallery__rail { flex-direction: row; order: 2; max-height: none; overflow-x: auto; }
	.lu-gallery__thumb { width: 62px; }
	.lu-pills { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.lu-summary__trust { grid-template-columns: 1fr; }
	.lu-details__desc, .lu-details__specs { padding: 20px; }
	.lu-spec { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ==========================================================================
   17. CART
   ========================================================================== */

.lu-cart { background: var(--lu-black); padding: 22px 0 34px; }

.lu-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
}

.lu-cart__main {
	background: #0b0b0b;
	border: 1px solid var(--lu-line);
	border-radius: 5px;
	padding: 26px 28px 24px;
}

.lu-cart__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.lu-cart__title {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1;
	margin: 0 0 8px;
}
.lu-cart__title span {
	font-size: 0.42em;
	letter-spacing: 0.1em;
	color: var(--lu-muted);
	margin-left: 6px;
	font-stretch: 100%;
}

.lu-cart__sub { font-size: 12.5px; color: var(--lu-muted); margin: 0; }

.lu-cart__secure { display: flex; align-items: center; gap: 11px; flex: none; }
.lu-cart__secure svg { color: #fff; opacity: .9; }
.lu-cart__secure span { display: block; font-size: 10px; color: var(--lu-muted); line-height: 1.4; }
.lu-cart__secure strong { display: block; font-size: 11px; color: #fff; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Items */
.lu-cart__items { border-top: 1px solid var(--lu-line); }

.lu-cart__item {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--lu-line);
}

.lu-cart__thumb {
	display: block;
	background: #e8e8e8;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.lu-cart__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }

.lu-cart__info { min-width: 0; }

.lu-cart__name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 2px;
	color: #fff;
}
.lu-cart__name a { color: inherit; }
.lu-cart__name a:hover { color: var(--lu-red); }

.lu-cart__colour { font-size: 13px; color: var(--lu-muted); margin: 0 0 8px; }

.lu-cart__meta { font-size: 11px; color: var(--lu-muted-2); line-height: 1.5; margin-bottom: 10px; }
.lu-cart__meta dl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.lu-cart__meta dt { margin: 0; font-weight: 600; }
.lu-cart__meta dt::after { content: ":"; }
.lu-cart__meta dd { margin: 0 14px 0 0; }
.lu-cart__meta p { margin: 0; }

.lu-cart__price { font-size: 15px; font-weight: 800; color: #fff; }
.lu-cart__price del, .lu-cart__price del * { color: #9c9c9c; font-weight: 500; text-decoration: line-through; }
.lu-cart__price ins, .lu-cart__price ins * { color: var(--lu-red); text-decoration: none; }

.lu-cart__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	flex: none;
}

.lu-cart__qty .quantity { margin: 0; display: block; }
.lu-cart__qty input.qty {
	width: 46px; height: 36px;
	border: 0;
	border-left: 1px solid #2e2e2e;
	border-right: 1px solid #2e2e2e;
	background: transparent;
	color: #fff;
	text-align: center;
	font-size: 13px;
	-moz-appearance: textfield;
}
.lu-cart__qty input.qty::-webkit-outer-spin-button,
.lu-cart__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lu-cart__links { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lu-cart__links a {
	font-size: 11.5px;
	color: var(--lu-muted);
	text-decoration: underline;
}
.lu-cart__links a:hover { color: #fff; }
.lu-cart__remove:hover { color: var(--lu-red) !important; }

/* Order note */
.lu-note {
	border: 1px solid var(--lu-line);
	border-radius: 4px;
	margin-top: 20px;
	overflow: hidden;
}

.lu-note__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 18px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.lu-note__label { display: inline-flex; align-items: center; gap: 11px; }
.lu-note__head svg:last-child { transition: transform .18s var(--lu-ease); opacity: .7; }
.lu-note.is-open .lu-note__head svg:last-child { transform: rotate(180deg); }

.lu-note__body { display: none; padding: 0 18px 18px; }
.lu-note.is-open .lu-note__body { display: block; }

.lu-note__body textarea {
	width: 100%;
	background: #0c0c0c;
	border: 1px solid #2a2a2a;
	border-radius: 3px;
	color: #fff;
	font-size: 13px;
	padding: 11px 13px;
	margin-bottom: 12px;
	resize: vertical;
}
.lu-note__body textarea:focus { outline: none; border-color: #5a5a5a; }

.lu-cart__update {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Sidebar */
.lu-summarycard,
.lu-whycard {
	background: #0b0b0b;
	border: 1px solid var(--lu-line);
	border-radius: 5px;
	padding: 22px 22px 24px;
}
.lu-whycard { margin-top: 16px; }

.lu-summarycard__title,
.lu-whycard__title {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.lu-sumrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: #d8d8d8;
	padding: 7px 0;
}
.lu-sumrow .woocommerce-Price-amount { color: #fff; font-weight: 600; }
.lu-sumrow--coupon { color: var(--lu-red); }

.lu-sumrow--total {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--lu-line);
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}
.lu-sumrow--total .woocommerce-Price-amount { font-size: 16px; font-weight: 800; }

.lu-cart__freeok { font-size: 12px; color: #4ade80; margin: 10px 0 0; }
.lu-cart__freeleft { font-size: 12px; color: var(--lu-muted); margin: 10px 0 0; }
.lu-cart__freeleft .woocommerce-Price-amount { color: #fff; }

.lu-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	margin: 18px 0 18px;
	background: var(--lu-red);
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color .18s var(--lu-ease);
}
.lu-checkout-btn:hover { background: var(--lu-red-dark); color: #fff; }

.lu-minitrust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--lu-line);
}
.lu-minitrust li { display: flex; align-items: center; gap: 9px; }
.lu-minitrust svg { flex: none; color: #fff; opacity: .85; }
.lu-minitrust span { display: block; font-size: 9.5px; color: var(--lu-muted); line-height: 1.35; }
.lu-minitrust strong { display: block; font-size: 10px; color: #fff; font-weight: 700; }
.lu-minitrust li + li { border-left: 1px solid var(--lu-line); padding-left: 14px; }

.lu-whycard ul li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; }
.lu-whycard svg { flex: none; color: #fff; opacity: .9; margin-top: 2px; }
.lu-whycard span { display: block; font-size: 11.5px; color: var(--lu-muted); line-height: 1.45; }
.lu-whycard strong { display: block; font-size: 12.5px; color: #fff; font-weight: 700; margin-bottom: 1px; }

/* Empty */
.lu-cart__emptybox { text-align: center; padding: 70px 28px; }
.lu-cart__emptybox svg { color: #3a3a3a; margin: 0 auto 18px; }
.lu-cart__emptybox .lu-cart__sub { margin-bottom: 22px; }

/* Responsive */
@media (max-width: 1000px) {
	.lu-cart__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
	.lu-cart__main { padding: 20px 16px; }
	.lu-cart__head { flex-direction: column; }
	.lu-cart__item { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
	.lu-cart__controls { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
	.lu-cart__links { flex-direction: row; gap: 14px; }
	.lu-minitrust { grid-template-columns: 1fr; }
	.lu-minitrust li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--lu-line); padding-top: 12px; }
}

/* ==========================================================================
   18. CHECKOUT
   ========================================================================== */

.lu-checkout { background: var(--lu-black); padding: 22px 0 34px; }

.lu-checkout__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.lu-checkout__heading { display: flex; align-items: center; gap: 18px; }

.lu-checkout__title {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1;
	margin: 0;
}

.lu-checkout__secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lu-muted);
}

/* Steps */
.lu-steps {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 300px;
	max-width: 520px;
}

.lu-steps li {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lu-muted-2);
}

.lu-steps li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid #3a3a3a;
	background: var(--lu-black);
	color: #cfcfcf;
	font-size: 12px;
	font-weight: 700;
	position: relative;
	z-index: 2;
}

.lu-steps li.is-on { color: #fff; }
.lu-steps li.is-on span { background: var(--lu-red); border-color: var(--lu-red); color: #fff; }

.lu-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 15px; left: 50%; right: -50%;
	height: 1px;
	background: #2c2c2c;
	z-index: 1;
}

/* Layout */
.lu-checkout__layout {
	display: grid;
	/* summary widened 15%: 372px -> 428px */
	grid-template-columns: minmax(0, 1fr) 428px;
	gap: 20px;
	align-items: start;
}

/*
 * Form column narrowed by 15%. The freed space falls between the form and the
 * summary, so the summary stays where it is on the right. Change the 85% to
 * adjust -- 100% restores the full width.
 */
.lu-checkout__main { max-width: 85%; }

.lu-panel {
	background: #0b0b0b;
	border: 1px solid var(--lu-line);
	border-radius: 5px;
	padding: 22px 24px 24px;
	margin-bottom: 16px;
}

.lu-panel__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 20px;
}
.lu-panel__title svg { color: #fff; opacity: .9; }

/* --------------------------------------------------------------- Fields
 *
 * The grid is applied to the field wrapper AND to .lu-fields itself, so it
 * still works if WooCommerce or a plugin changes the wrapper markup.
 *
 * WooCommerce also floats .form-row-first / .form-row-last and gives them
 * 47% widths. Those float rules fight a grid and were part of why the form
 * did not sit in two columns, so they are neutralised first.
 */
.lu-fields,
.lu-fields .woocommerce-billing-fields__field-wrapper,
.lu-fields .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 15px 16px;
	align-items: start;
}

/* the wrapper is itself a grid item and must span the full width */
.lu-fields > .woocommerce-billing-fields,
.lu-fields > .woocommerce-shipping-fields,
.lu-fields .woocommerce-billing-fields__field-wrapper,
.lu-fields .woocommerce-shipping-fields__field-wrapper { grid-column: 1 / -1; }

.lu-checkout .form-row,
.lu-checkout p.form-row {
	float: none !important;
	width: auto !important;
	margin: 0;
	padding: 0;
	grid-column: span 12;   /* anything unclassed goes full width */
}

.lu-checkout .form-row-first,
.lu-checkout .form-row-last,
.lu-checkout .form-row-wide { float: none !important; width: auto !important; }

.lu-checkout .lu-col-6,
.lu-checkout p.lu-col-6 { grid-column: span 6; }
.lu-checkout .lu-col-12,
.lu-checkout p.lu-col-12 { grid-column: span 12; }
.lu-checkout .lu-hidden,
.lu-checkout p.lu-hidden { display: none !important; }

/* WooCommerce clears floats after rows; with a grid that leaves gaps */
.lu-checkout .form-row::before,
.lu-checkout .form-row::after,
.lu-checkout .woocommerce-billing-fields__field-wrapper::before,
.lu-checkout .woocommerce-billing-fields__field-wrapper::after { display: none !important; }

@media (max-width: 640px) {
	.lu-checkout .lu-col-6 { grid-column: span 12; }
}

.lu-checkout .form-row label {
	display: block;
	font-size: 11.5px;
	color: var(--lu-muted);
	margin: 0 0 7px;
}
.lu-checkout .form-row label .required { color: var(--lu-red); border: 0; text-decoration: none; }

/*
 * Inputs. WooCommerce and most gateways ship their own field styling at a
 * higher specificity than a plain theme rule, which is why these were rendering
 * white while the select next to them was correctly dark. Typed broadly and
 * forced, because a white box on a black panel is not a small mismatch.
 */
.lu-checkout .input-text,
.lu-checkout input[type="text"],
.lu-checkout input[type="email"],
.lu-checkout input[type="tel"],
.lu-checkout input[type="url"],
.lu-checkout input[type="number"],
.lu-checkout input[type="password"],
.lu-checkout input[type="search"],
.lu-checkout select,
.lu-checkout textarea {
	width: 100%;
	height: 44px;
	background: #0e0e0e !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 4px;
	color: #fff !important;
	font-size: 13.5px;
	padding: 0 14px;
	box-shadow: none;
	transition: border-color .16s var(--lu-ease);
}
.lu-checkout textarea { height: auto; padding: 12px 14px; }
.lu-checkout input::placeholder,
.lu-checkout textarea::placeholder { color: #6a6a6a !important; }
.lu-checkout .input-text:focus,
.lu-checkout select:focus,
.lu-checkout textarea:focus { outline: none; border-color: #5c5c5c; }

.lu-checkout select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 5.5 6-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

.lu-checkout .select2-container--default .select2-selection--single {
	height: 44px;
	background: #0e0e0e;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
}
.lu-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 42px; padding-left: 13px; }
.lu-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

.lu-check--save { margin-top: 18px; }
.lu-check--save .lu-check__label { color: #d6d6d6; font-size: 12.5px; }

/*
 * Hidden rather than removed, so the values still post. The cart's order note
 * feeds the order_comments field, so deleting it would lose the note.
 * Delete these three lines to bring any of them back.
 */
.lu-checkout .woocommerce-billing-fields > h3,
.lu-checkout .woocommerce-shipping-fields,
.lu-checkout .woocommerce-additional-fields { display: none; }

.lu-shipfields:empty { display: none; }
.lu-shipfields h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 22px 0 14px; }

/* Delivery method */
.lu-shipping ul { list-style: none; margin: 0; padding: 0; }

.lu-shipping li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--lu-line);
}
.lu-shipping li:last-child { border-bottom: 0; }

.lu-shipping input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.lu-shipping label,
.lu-checkout .wc_payment_method label {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	font-size: 13.5px;
	color: #e6e6e6;
	cursor: pointer;
	margin: 0;
}

.lu-shipping label::before,
.lu-checkout .wc_payment_method > label::before {
	content: "";
	flex: none;
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 1px solid #3d3d3d;
	background: #0c0c0c;
	transition: border-color .16s var(--lu-ease), box-shadow .16s var(--lu-ease);
}
.lu-shipping input:checked + label::before,
.lu-checkout .wc_payment_method input:checked + label::before {
	border-color: var(--lu-red);
	background: var(--lu-red);
	box-shadow: inset 0 0 0 3.5px #0b0b0b;
}

.lu-shipping .woocommerce-Price-amount { margin-left: auto; color: #fff; font-weight: 700; font-size: 13.5px; }

/* only one rate available: WooCommerce writes a hidden input, so show it chosen */
.lu-shipping li.lu-only label::before {
	border-color: var(--lu-red);
	background: var(--lu-red);
	box-shadow: inset 0 0 0 3.5px #0b0b0b;
}

/* the package name heading is noise when there is one package */
.lu-shipping .woocommerce-shipping-totals > th,
.lu-shipping table.shipping th,
.lu-shipping .shipping__package-name,
.lu-shipping tr > th { display: none !important; }
.lu-shipping table, .lu-shipping tbody, .lu-shipping tr, .lu-shipping td { display: block; width: 100%; border: 0; padding: 0; }
.lu-shipping .woocommerce-shipping-destination,
.lu-shipping .shipping-calculator-button { font-size: 11.5px; color: var(--lu-muted); }

/* Payment */
.lu-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; }

.lu-checkout .wc_payment_method {
	padding: 13px 0;
	border-bottom: 1px solid var(--lu-line);
}
.lu-checkout .wc_payment_method:last-of-type { border-bottom: 0; }

.lu-checkout .wc_payment_method img {
	max-height: 22px;
	width: auto;
	margin-left: auto;
	display: inline-block;
	border-radius: 2px;
}
.lu-checkout .wc_payment_method label img + img { margin-left: 6px; }

.woocommerce-checkout #payment div.payment_box,
.lu-checkout .payment_box {
	background: #0e0e0e !important;
	border: 1px solid #242424;
	border-radius: 4px;
	padding: 14px 16px;
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--lu-muted) !important;
}
.woocommerce-checkout #payment div.payment_box::before,
.lu-checkout .payment_box::before { display: none !important; }

.woocommerce-checkout #payment,
.lu-checkout #payment {
	background: transparent !important;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 0;
	padding: 0;
	margin: 0;
}
.woocommerce-checkout #payment div.form-row { padding: 0; margin: 0; }

.lu-checkout .woocommerce-privacy-policy-text { font-size: 11.5px; color: var(--lu-muted-2); margin-top: 14px; }

.lu-checkout #place_order,
.lu-checkout .woocommerce-checkout .button.alt {
	width: 100%;
	height: 52px;
	margin-top: 18px;
	border-radius: 4px;
	font-size: 13px;
	letter-spacing: 0.1em;
}

/* WooCommerce's own coupon toggle and login prompt, if a plugin re-adds them */
.lu-checkout .woocommerce-form-coupon-toggle,
.lu-checkout .checkout_coupon,
.lu-checkout .woocommerce-form-login-toggle,
.lu-checkout .woocommerce-form-login { display: none !important; }

/* shipping rate rows: label left, amount right */
.lu-shipping li label { justify-content: flex-start; }
.lu-shipping li label .woocommerce-Price-amount { margin-left: auto; }

/* the place-order row and the note sit in normal flow, full width */
.lu-checkout #payment .form-row,
.lu-checkout #payment .place-order,
.lu-checkout .woocommerce-terms-and-conditions-wrapper {
	float: none !important;
	width: 100% !important;
	display: block;
	padding: 0;
	margin: 0;
}
.lu-checkout #payment::after,
.lu-checkout .place-order::after { content: ""; display: table; clear: both; }

.lu-checkout__note {
	clear: both;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--lu-muted);
	margin: 14px 0 0;
}

/* Order summary */
/* the summary is replaced wholesale by AJAX, so it must stand alone */
.lu-ordersummary { display: block; }
table.lu-ordersummary, .lu-ordersummary tbody, .lu-ordersummary tr, .lu-ordersummary td { display: block; }

.lu-orderitems { margin-bottom: 6px; }

.lu-orderitem {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) auto;
	gap: 14px;
	padding-bottom: 18px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--lu-line);
}

.lu-orderitem__thumb {
	display: block;
	background: #e8e8e8;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.lu-orderitem__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }

.lu-orderitem__name { font-size: 13px; font-weight: 700; margin: 0 0 1px; color: #fff; line-height: 1.25; }
.lu-orderitem__colour { font-size: 12px; color: var(--lu-muted); margin: 0 0 4px; }
.lu-orderitem__meta { font-size: 11px; color: var(--lu-muted-2); margin-bottom: 8px; }
.lu-orderitem__meta dl { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; }
.lu-orderitem__meta dt { margin: 0; font-weight: 600; }
.lu-orderitem__meta dt::after { content: ":"; }
.lu-orderitem__meta dd { margin: 0; }
.lu-orderitem__meta p { margin: 0; }

.lu-orderitem__qty { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--lu-muted); }

.lu-stepper--links { display: inline-flex; align-items: center; }
.lu-stepper--links a {
	width: 30px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #d8d8d8;
	font-size: 15px;
}
.lu-stepper--links a:hover { background: #1a1a1a; color: #fff; }
.lu-stepper--links b {
	min-width: 34px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #2e2e2e;
	border-right: 1px solid #2e2e2e;
	color: #fff;
	font-weight: 600;
	font-size: 12.5px;
}

.lu-orderitem__bin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border: 1px solid #2e2e2e;
	border-radius: 3px;
	color: #c9c9c9;
}
.lu-orderitem__bin:hover { border-color: var(--lu-red); color: var(--lu-red); }

.lu-orderitem__price { font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap; }

/* Promo */
.lu-promo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
	padding-left: 13px;
	overflow: hidden;
	background: #0e0e0e;
}
.lu-promo svg { flex: none; color: var(--lu-muted); }

.lu-promo__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 13px;
}
.lu-promo__input::placeholder { color: #6a6a6a; }
.lu-promo__input:focus { outline: none; }

.lu-promo__apply {
	flex: none;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-left: 1px solid #2a2a2a;
	background: #141414;
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.lu-promo__apply:hover { background: var(--lu-red); }

/* Trust grid + help */
.lu-trustgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	background: #0b0b0b;
	border: 1px solid var(--lu-line);
	border-radius: 5px;
	padding: 20px 22px;
	margin-top: 16px;
}
.lu-trustgrid > div { display: flex; align-items: flex-start; gap: 10px; }
.lu-trustgrid svg { flex: none; color: #fff; opacity: .9; margin-top: 1px; }
.lu-trustgrid span { display: block; font-size: 10.5px; color: var(--lu-muted); line-height: 1.4; }
.lu-trustgrid strong { display: block; font-size: 11.5px; color: #fff; font-weight: 700; }

.lu-help {
	background: #0b0b0b;
	border: 1px solid var(--lu-line);
	border-radius: 5px;
	padding: 22px;
	margin-top: 16px;
}
.lu-help__title {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.lu-help__intro { font-size: 12.5px; color: var(--lu-muted); line-height: 1.6; margin: 0 0 16px; max-width: 240px; }
.lu-help ul li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; color: #e6e6e6; }
.lu-help svg { flex: none; color: #fff; opacity: .85; }
.lu-help a { color: #e6e6e6; }
.lu-help a:hover { color: var(--lu-red); }

@media (max-width: 1100px) {
	.lu-checkout__layout { grid-template-columns: minmax(0, 1fr); }
	/* single column below this width, so the form needs its full width back */
	.lu-checkout__main { max-width: 100%; }
}

@media (max-width: 700px) {
	.lu-panel { padding: 18px 16px 20px; }
	.lu-steps { order: 3; width: 100%; max-width: none; }
	.lu-trustgrid { grid-template-columns: 1fr; }
	.lu-orderitem { grid-template-columns: 62px minmax(0, 1fr); }
	.lu-orderitem__price { grid-column: 2; }
}

/* ==========================================================================
   19. MOBILE CORRECTIONS
   Everything here sits inside media queries. Desktop is untouched.
   ========================================================================== */

@media (max-width: 900px) {

	/*
	 * Mobile hero: the picture sits ABOVE the copy rather than behind it.
	 *
	 * Both children are in normal flow here, so the section is always as tall as
	 * its own contents. That also keeps the earlier fix: nothing is absolutely
	 * positioned, so the hero cannot collapse to nothing and clip itself.
	 */
	.lu-hero {
		min-height: 0;
		display: block;
	}

	/*
	 * "body" is deliberate. The chrome guard further up the file is
	 * body .lu-hero__img { height: auto }, which at (0,1,1) beats a plain
	 * .lu-hero__img no matter how late it appears. Matching its specificity and
	 * sitting later is what lets this height take effect.
	 */
	body .lu-hero__img {
		position: static;
		inset: auto;
		display: block;
		width: 100%;
		height: 56vw;
		min-height: 190px;
		max-height: 300px;
		object-fit: cover;
		object-position: 70% center;
	}

	/* nothing left to darken once the text is no longer over the picture */
	.lu-hero__scrim { display: none; }

	.lu-hero__inner {
		position: relative;
		inset: auto;
		display: block;
		padding: 26px var(--lu-gutter) 34px;
	}

	.lu-hero--empty { min-height: 0; }

	.lu-hero__content { max-width: 100%; }
	.lu-hero__title { font-size: clamp(28px, 8.4vw, 42px); }
	.lu-hero__tagline { font-size: clamp(14px, 3.9vw, 20px); }
	.lu-hero__text { max-width: 100%; }

	/*
	 * Announcement bar. The Courier Guy logo was doubled to 32px for desktop
	 * legibility, which is taller than the 10px text beside it -- on a phone it
	 * ran straight over the next item.
	 */
	.lu-announce__inner {
		gap: 26px;
		min-height: 0;
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.lu-announce__item { flex: 0 0 auto; }

	body .lu-announce__partner {
		height: 17px;
		max-width: 96px;
		object-fit: contain;
	}
}

@media (max-width: 700px) {

	/* the hero paragraph and buttons need room before the fold */
	.lu-hero__inner { padding: 24px var(--lu-gutter) 32px; }
	.lu-hero__title { margin-bottom: 14px; }
	.lu-hero__text { margin-bottom: 20px; }
	.lu-hero__actions { gap: 10px; }
	.lu-hero__actions .lu-btn { flex: 1 1 100%; min-width: 0; height: 46px; }

	/* trust rows read better as icon + text pairs than as a wrapped grid */
	.lu-trust__grid { gap: 4px 0; padding: 18px 0; }
	.lu-trust__item { padding: 12px 4px; }
	.lu-trust__desc { max-width: none; }

	/* brand strip: keep the cells square-ish so logos are not lost in space */
	.lu-brands__item { min-height: 64px; padding: 14px 8px; }
	body .lu-brands__item img { max-height: clamp(24px, 7vw, 34px); }

	/* footer logo was oversized next to the columns */
	body .lu-footer__logo img,
	.lu-footer__logo svg { height: 60px; }

	/* payment box and courier logo scale down with the bar */
	body .lu-pay__logos img { height: 42px; padding: 6px 12px; }
	.lu-pay__chip { height: 42px; font-size: 13px; padding: 0 16px; }
	body .lu-footer__deliver img { height: 34px; }
	body .lu-footer__payfast img { height: 38px; }
	body .lu-partner__logo { max-height: 62px; }
}

@media (max-width: 460px) {
	.lu-hero__title { font-size: clamp(26px, 8vw, 34px); }
	.lu-hero__tagline { font-size: clamp(13px, 3.7vw, 17px); }
	body .lu-announce__partner { height: 15px; max-width: 84px; }
	body .lu-brands__item img { max-height: 26px; }
}

/* ==========================================================================
   20. CONTACT
   ========================================================================== */

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

.lu-chero {
	position: relative;
	background: var(--lu-black);
	overflow: hidden;
	min-height: 300px;
}

.lu-chero__media {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	/*
	 * contain, not cover. cover scales the photo until it fills the panel and
	 * cuts whatever overflows -- position and width only change WHICH part is
	 * cut. contain fits the whole photo every time; any spare space stays black
	 * and is invisible against the hero behind it.
	 */
	width: 58%;
	background-color: #000;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*
 * A short fade along the top edge of the photo. Some exports carry a 1px light
 * border, and a bright ceiling strip near the top of a shot reads the same way
 * against the black header above it. 26px is enough to hide either without
 * visibly darkening the picture.
 */
.lu-chero__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 26px;
	background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 30%, rgba(0,0,0,0) 100%);
	pointer-events: none;
	z-index: 2;
}

/*
 * Only enough fade to blend the panel into the black behind the headline.
 * It clears completely by 34%, so the right two thirds of the photo are shown
 * untouched. The old version was still 45% black at the far edge, which is why
 * the photo barely read.
 */
.lu-chero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		#000 0%,
		rgba(0,0,0,.92) 10%,
		rgba(0,0,0,.55) 22%,
		rgba(0,0,0,0) 34%);
}
/*
 * padding-top / padding-bottom only. The shorthand `padding: 46px 0 30px` also
 * rewrote left and right to zero, which cancelled the gutter that .lu-container
 * sets on this same element -- so the headline ran off the edge of the window.
 */
.lu-chero__inner {
	position: relative;
	z-index: 3;
	padding-top: 48px;
	padding-bottom: 34px;
}
.lu-chero__content { max-width: 46%; }

.lu-chero__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lu-red);
	margin: 0 0 12px;
}

.lu-chero__title {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	line-height: 0.98;
	font-size: clamp(28px, 3.4vw, 46px);
	margin: 0 0 16px;
}
.lu-chero__title span { display: block; }
.lu-chero__accent { color: var(--lu-red); }

.lu-chero__sub { font-size: 13.5px; line-height: 1.65; color: var(--lu-muted); margin: 0 0 26px; max-width: 340px; }

/* centred as a group, spanning the container rather than the text column */
.lu-chero__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	border-top: 1px solid var(--lu-line);
	padding-top: 22px;
	margin-top: 26px;
	width: 100%;
}
.lu-chero__facts li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 28px;
	border-right: 1px solid var(--lu-line);
}
.lu-chero__facts li:last-child { border-right: 0; }

.lu-chero__ico {
	flex: none;
	width: 34px; height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #171717;
	color: #fff;
}
.lu-chero__facts span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--lu-muted); }
.lu-chero__facts strong {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 2px;
}

/* --------------------------------------------------------------- Body */

.lu-contact { background: var(--lu-black); padding: 22px 0 40px; }

.lu-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 430px;
	gap: 18px;
	align-items: start;
	margin-bottom: 18px;
}

.lu-panel__title--plain {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.lu-contact__lead { font-size: 12.5px; color: var(--lu-muted); margin: -12px 0 22px; }

/* Form */
.lu-cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lu-cform__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
}
.lu-cform__row { margin: 0; grid-column: span 12; }
.lu-cform__row.lu-col-6 { grid-column: span 6; }

.lu-cform label { display: block; font-size: 11.5px; color: var(--lu-muted); margin: 0 0 7px; }
.lu-cform label span { color: var(--lu-red); }

.lu-cform input[type="text"],
.lu-cform input[type="email"],
.lu-cform input[type="tel"],
.lu-cform select,
.lu-cform textarea {
	width: 100%;
	height: 44px;
	background: #0e0e0e;
	border: 1px solid #262626;
	border-radius: 4px;
	color: #fff;
	font-size: 13.5px;
	padding: 0 14px;
	transition: border-color .16s var(--lu-ease);
}
.lu-cform textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.lu-cform ::placeholder { color: #6a6a6a; }
.lu-cform input:focus, .lu-cform select:focus, .lu-cform textarea:focus { outline: none; border-color: #5c5c5c; }

.lu-cform select {
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 5.5 6-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}

.lu-cform__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	margin-top: 20px;
	border: 0;
	border-radius: 4px;
	background: var(--lu-red);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color .18s var(--lu-ease);
}
.lu-cform__submit:hover { background: var(--lu-red-dark); }

.lu-notice { padding: 13px 16px; border-radius: 4px; font-size: 13px; margin: 0 0 20px; }
.lu-notice--ok { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.35); color: #86efac; }
.lu-notice--bad { background: rgba(224,27,34,.1); border: 1px solid rgba(224,27,34,.4); color: #fca5a5; }

/* Other ways to reach us */
.lu-reach__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 16px;
	margin-bottom: 12px;
	background: #101010;
	border: 1px solid #1f1f1f;
	border-radius: 5px;
	transition: border-color .16s var(--lu-ease), background-color .16s var(--lu-ease);
}
.lu-reach__card:last-child { margin-bottom: 0; }
a.lu-reach__card:hover { border-color: #3d3d3d; background: #141414; }

.lu-reach__ico {
	flex: none;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1a1a1a;
	color: #fff;
}

.lu-reach__body { flex: 1 1 auto; min-width: 0; }
.lu-reach__body strong {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 3px;
}
.lu-reach__body em { display: block; font-style: normal; font-size: 12px; color: var(--lu-muted); margin-bottom: 4px; }
.lu-reach__body b { display: block; font-size: 12.5px; font-weight: 700; color: var(--lu-red); }

.lu-reach__go { flex: none; color: #6f6f6f; }
a.lu-reach__card:hover .lu-reach__go { color: #fff; }

.lu-reach__social { display: flex; gap: 8px; margin-top: 6px; }
.lu-reach__social a {
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #2e2e2e;
	border-radius: 50%;
	color: #d8d8d8;
}
.lu-reach__social a:hover { border-color: var(--lu-red); color: var(--lu-red); }

/* FAQ tiles */
.lu-faqcards { margin-bottom: 18px; }

.lu-faqcards__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.lu-faqcards__head .lu-panel__title--plain { margin: 0; }

.lu-faqcards__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #d8d8d8;
	white-space: nowrap;
}
.lu-faqcards__all:hover { color: var(--lu-red); }

/* centred, and even whatever number of tiles you keep */
.lu-faqcards__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.lu-faqcard { flex: 1 1 260px; max-width: 380px; }

.lu-faqcard {
	background: #101010;
	border: 1px solid #1f1f1f;
	border-radius: 5px;
	padding: 18px 18px 20px;
}
.lu-faqcard__ico { display: block; color: #fff; margin-bottom: 12px; }
.lu-faqcard h3 {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.lu-faqcard p { font-size: 12px; line-height: 1.55; color: var(--lu-muted); margin: 0 0 14px; }
.lu-faqcard a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--lu-red);
}
.lu-faqcard a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.lu-contact__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.lu-chero__media { position: relative; width: 100%; height: 190px; }
	.lu-chero__media::before { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.8) 100%); }
	.lu-chero__content { max-width: 100%; }
	.lu-chero__inner { padding-top: 28px; padding-bottom: 26px; }
	.lu-chero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
	.lu-chero__facts li:nth-child(2n) { border-right: 0; }
}

@media (max-width: 640px) {
	.lu-cform__row.lu-col-6 { grid-column: span 12; }
	.lu-chero__facts { grid-template-columns: minmax(0, 1fr); }
	.lu-chero__facts li { border-right: 0; }
	.lu-faqcards__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --------------------------------------------------------------------------
   Content safety net
   Breadcrumb plugins output a plain <ul>, which .lu-content styled with disc
   bullets -- that is the "Coming Soon / Contact V2" list. And an SVG dropped
   into page content with no dimensions expands to fill its container, which is
   the giant phone icon.
   -------------------------------------------------------------------------- */

.lu-content .breadcrumbs,
.lu-content .breadcrumb,
.lu-content nav[class*="breadcrumb"] ul,
.lu-content ul[class*="breadcrumb"],
.lu-content .rank-math-breadcrumb,
.lu-content .yoast-breadcrumb {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lu-muted-2);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.lu-content ul[class*="breadcrumb"] li,
.lu-content .breadcrumbs li { margin: 0; }

.lu-content svg,
.lu-contact__extra svg {
	max-width: 44px;
	max-height: 44px;
	width: auto;
	height: auto;
}


/* ==========================================================================
   21. CONTENT: ICONS, BREADCRUMBS, FAQ ACCORDION
   ========================================================================== */

/* --- breadcrumbs from any plugin, hidden on pages ------------------------- */
.lu-page .breadcrumbs,
.lu-page .breadcrumb,
.lu-page .rank-math-breadcrumb,
.lu-page .yoast-breadcrumb,
.lu-page nav[class*="breadcrumb"],
.lu-page ul[class*="breadcrumb"],
.lu-contact .breadcrumbs,
.lu-contact .breadcrumb,
.lu-contact nav[class*="breadcrumb"],
.lu-contact ul[class*="breadcrumb"] { display: none !important; }

/* --- icons in content: small, and on the same line as their text ---------- */
.lu-content svg,
.lu-contact svg.lu-content-icon,
.lu-contact__extra svg {
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	flex: none;
	vertical-align: middle;
	display: inline-block;
}

.lu-content li,
.lu-contact__extra li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.lu-content li > svg,
.lu-contact__extra li > svg { margin: 0; }

/* an icon sitting alone in a paragraph should not stack above its text */
.lu-content p > svg:first-child,
.lu-contact__extra p > svg:first-child { margin-right: 10px; }

/* --- FAQ accordion -------------------------------------------------------- */

/*
 * Works three ways so it catches whatever the page is built with:
 *   1. native <details><summary> - what the WordPress Details block outputs
 *   2. a .lu-faq wrapper containing heading + answer pairs, converted by lu.js
 *   3. the [lu_faq] shortcode
 */

.lu-faq { border-top: 1px solid var(--lu-line); }

.lu-faq details,
.lu-content details,
.lu-faq__item {
	border-bottom: 1px solid var(--lu-line);
	background: transparent;
}

.lu-faq summary,
.lu-content details summary,
.lu-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 2px;
	margin: 0;
	background: none;
	border: 0;
	text-align: left;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	transition: color .16s var(--lu-ease);
}
.lu-faq summary::-webkit-details-marker,
.lu-content details summary::-webkit-details-marker { display: none; }
.lu-faq summary::marker,
.lu-content details summary::marker { content: ""; }

.lu-faq summary:hover,
.lu-content details summary:hover,
.lu-faq__q:hover { color: var(--lu-red); }

.lu-faq summary::after,
.lu-content details summary::after,
.lu-faq__q::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .2s var(--lu-ease);
	margin-right: 4px;
}

.lu-faq details[open] summary::after,
.lu-content details[open] summary::after,
.lu-faq__q[aria-expanded="true"]::after { transform: rotate(-135deg); }

.lu-faq__a,
.lu-faq details > *:not(summary),
.lu-content details > *:not(summary) {
	font-size: 13.5px;
	line-height: 1.75;
	color: #cfcfcf;
	margin: 0;
	padding: 0 2px 20px;
}

.lu-faq__a[hidden] { display: none; }

.lu-faq__title {
	font-family: var(--lu-display);
	font-weight: 800;
	font-stretch: 82%;
	text-transform: uppercase;
	font-size: clamp(22px, 2.2vw, 30px);
	margin: 0 0 14px;
}

/* ==========================================================================
   22. ABOUT PAGE TYPE SCALE
   ==========================================================================
   The About page ships its own stylesheet (assets/css/about.css), which is
   enqueued at priority 20 and therefore loads AFTER this file. Equal-specificity
   rules there would win, so every declaration below is qualified with
   html body.lu-about-page -- (0,2,2) -- which outranks anything about.css is
   likely to carry short of !important. Nothing here touches layout, colour or
   spacing; it only pins the type to the values the home page already uses, so
   the two pages read as one site.

   Specificity note: the catch-all paragraph rule below is (0,2,3), so every
   per-element rule carries .lu-about as well -- (0,3,2) -- or the catch-all
   would flatten the eyebrow, lead, hero sub-line and social handle to 15px.
   Verified in a browser against a stand-in about.css at four widths.

   Where each value comes from:
     section heading     body .lu-row__title            clamp(19px, 1.45vw, 29px)
     big banner heading  .lu-story__banner .lu-story__title  clamp(27px, 3.1vw, 62px)
     sub-heading         .lu-why__title                 clamp(18px, 1.35vw, 27px)
     sub-line / caption  body .lu-row__sub              clamp(12px, 0.78vw, 15px)
     banner body copy    .lu-story__banner .lu-story__text   clamp(13px, 1.05vw, 21px)
     body copy           body                           15px / 1.6
     eyebrow             .lu-eyebrow                    11px / 0.14em
     button              .lu-btn                        12px / 0.1em
   ========================================================================== */

/* --- Headings ------------------------------------------------------------- */

/* Hero headline: the home hero's scale, minus the italic -- the About mockup
   sets it upright, and the size is the thing being matched here. */
html body.lu-about-page .lu-about__hero-title {
	font-family: var(--lu-display);
	font-size: clamp(32px, calc(3.8vw - 5px), 67px);
	font-weight: 800;
	font-stretch: 82%;
	line-height: 0.94;
	letter-spacing: 0;
	word-spacing: 0.08em;
}

/* "South Africa's home for authentic sneakers." -- the hero tagline's slot. */
html body.lu-about-page .lu-about .lu-about__hero-sub {
	font-family: var(--lu-display);
	font-size: clamp(15px, calc(1.8vw - 2px), 29px);
	font-weight: 800;
	font-stretch: 82%;
	line-height: 1.1;
	letter-spacing: 0;
	word-spacing: 0.08em;
}

/* Section headings: identical to "New Drops" / "Trending Now". */
html body.lu-about-page .lu-about .lu-about__h2 {
	font-family: var(--lu-display);
	font-size: clamp(25px, 1.90vw, 39px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
}

/* "Why shop with Laced Up?" and "Follow us on social media." sit a step down,
   matching "Why Choose Laced Up?" on the home page. */
html body.lu-about-page .lu-about .lu-about__why-title,
html body.lu-about-page .lu-about .lu-about__social-title {
	font-family: var(--lu-display);
	font-size: clamp(24px, 1.78vw, 36px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
}

/* Any h2 on the page, including one added later with no class of its own.
   The class rules above carry .lu-about as well, so they outrank this. */
html body.lu-about-page .lu-about h2 {
	font-family: var(--lu-display);
	font-size: clamp(25px, 1.90vw, 39px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
}

/* --- Body copy ------------------------------------------------------------ */

/* Every paragraph on the page, at the site's base size. */
html body.lu-about-page .lu-about p,
html body.lu-about-page .lu-about li {
	font-family: var(--lu-font);
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
}

/* The opening line of a section runs one step larger, as the banner copy does. */
html body.lu-about-page .lu-about .lu-about__lead {
	font-size: clamp(14.5px, 0.95vw, 17px);
	line-height: 1.55;
}

/* --- Small type ----------------------------------------------------------- */

html body.lu-about-page .lu-about .lu-about__eyebrow {
	font-family: var(--lu-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Feature labels and social handles take the row sub-line's size. */
html body.lu-about-page .lu-about .lu-about__feature-label,
html body.lu-about-page .lu-about .lu-about__social-handle {
	font-size: clamp(12px, 0.78vw, 15px);
	font-weight: 400;
	line-height: 1.45;
}

html body.lu-about-page .lu-about__btn {
	font-family: var(--lu-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

/* --- Tablet: mirrors section 14's home-page steps ------------------------- */
@media (max-width: 1024px) {
	html body.lu-about-page .lu-about__hero-title { font-size: clamp(35px, 7.2vw, 58px); }
	html body.lu-about-page .lu-about .lu-about__hero-sub { font-size: clamp(17px, 3vw, 26px); }
}

/* --- Mobile: mirrors sections 19 and 8D ----------------------------------- */
@media (max-width: 767px) {
	html body.lu-about-page .lu-about__hero-title { font-size: clamp(31px, 9.2vw, 47px); }
	html body.lu-about-page .lu-about .lu-about__hero-sub { font-size: clamp(16px, 4.3vw, 22px); }
	html body.lu-about-page .lu-about h2 { font-size: clamp(24px, 6.6vw, 33px); }
	html body.lu-about-page .lu-about .lu-about__h2         { font-size: clamp(24px, 6.6vw, 33px); }
	html body.lu-about-page .lu-about .lu-about__why-title,
	html body.lu-about-page .lu-about .lu-about__social-title { font-size: clamp(23px, 6.4vw, 31px); }
}

@media (max-width: 420px) {
	html body.lu-about-page .lu-about__hero-title { font-size: clamp(29px, 8.8vw, 38px); }
	html body.lu-about-page .lu-about .lu-about__hero-sub { font-size: clamp(15px, 4.1vw, 19px); }
}

/* ==========================================================================
   23. ABOUT PAGE LAYOUT TRIMS
   ==========================================================================
   Two adjustments that belong to about.css but are made here, for the same
   reason as section 22: about.css loads after this file, so these are qualified
   with html body.lu-about-page to outrank it.

   Both are driven by a custom property, so retuning is one number, not a
   rewrite -- change --lu-about-media or --lu-about-media-cap below.

   Why the two-column rule sits inside @media (min-width: 1025px):
   about.css stacks this section on narrow screens at a breakpoint this file
   cannot see. An unscoped grid-template-columns here would be more specific
   than that media query and would force two columns back on at phone width --
   the exact specificity trap that has bitten this stylesheet before. Confining
   the rule to >=1025px, where the section is two-column under any plausible
   breakpoint, means it can never override the stacked layout.
   ========================================================================== */

/* --- "From overseas shelves to South African streets": smaller image ------ */

@media (min-width: 1025px) {

	html body.lu-about-page .lu-about__story {
		/*
		   Column width. The image fills this column top to bottom, so this one
		   number decides both how wide and how tall it is.
		 */
		--lu-about-media: 50%;

		/* Applies only if about.css made this a grid; ignored if it is flex. */
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--lu-about-media));
		gap: clamp(28px, 2.6vw, 52px);

		/* stretch, not center: the media column grows to the copy's full height
		   so there is no white band left above or below the image. */
		align-items: stretch;
	}

	/* Applies only if about.css made this a flex row; ignored if it is a grid.
	   Setting both means this works either way, without knowing which it is. */
	html body.lu-about-page .lu-about__story-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	html body.lu-about-page .lu-about__story-media {
		flex: 0 1 var(--lu-about-media);
		min-width: 0;

		/*
		 * Stretch to the copy's full height, and drop any aspect-ratio -- both
		 * about.css's near-square one and the photo's own --lu-story-ar. The
		 * slot's shape is set by the copy, and the photo is made to fill it.
		 */
		align-self: stretch;
		aspect-ratio: auto;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: hidden;
	}

	/*
	 * cover: scale the photo until it covers the slot, trim the overflow.
	 *
	 * The photo is far wider than the slot, so what gets trimmed is width.
	 * --lu-story-pos chooses WHICH part of the width survives, so the crop can
	 * be nudged off a sneaker instead of through one:
	 *
	 *     50% 50%  centred (default)
	 *     0% 50%   keep the left of the photo
	 *     100% 50% keep the right of the photo
	 *
	 * Set it on .lu-about__story-media in style.css, or inline on that div.
	 */
	html body.lu-about-page .lu-about__story-media img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: var(--lu-story-pos, 50% 50%);
		margin-left: 0;
	}
}

/* --- Stacked (below the two-column layout): show the photo whole ---------- */

/*
 * No column to fill once the section stacks, so the image goes back to its
 * natural ratio. Nothing here can disturb the two-column rules above: that
 * block is confined to >=1025px and this one to <=1024px.
 */
@media (max-width: 1024px) {

	html body.lu-about-page .lu-about__story-media {
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: auto;
		overflow: visible;
	}

	html body.lu-about-page .lu-about__story-media img {
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: auto;
		object-fit: fill;
		display: block;
	}
}

/* --- "Why shop with Laced Up?": tighter black band ----------------------- */

/* Matched to the home page's own band, .lu-why:
   padding: clamp(18px, 1.6vw, 32px) 0 clamp(20px, 1.8vw, 36px). */
html body.lu-about-page .lu-about__why {
	padding-top: clamp(20px, 1.8vw, 36px);
	padding-bottom: clamp(22px, 2vw, 40px);
}

/* about.css may also pad the inner wrapper, which would add to the above.
   Only the vertical padding is zeroed -- the horizontal gutter is left alone. */
html body.lu-about-page .lu-about__why-inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* ==========================================================================
   24. HERO: STACKED CALLS TO ACTION
   ==========================================================================
   "Shop All Sneakers" sits under "Shop New Drops" rather than beside it.

   Scoped to >=701px on purpose. Below that, sections 14 and 19 already stack
   the buttons by giving each one flex: 1 1 100% inside a wrapping row, so they
   run full width across the phone layout. Changing the row to a column there
   would fight those rules -- a 100% flex-basis in a column is a HEIGHT, not a
   width, and align-items: flex-start would shrink the buttons off full width.
   The two ranges are kept apart so neither can disturb the other.

   align-items: flex-start keeps each button at its own width (the 176px
   minimum from section 5) instead of stretching to the hero column.
   ========================================================================== */

@media (min-width: 701px) {
	body .lu-hero__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   25. SIZE GUIDE
   ==========================================================================
   Paired with page-size-guide.php (Template Name: "Size Guide").

   The mobile treatment is the point of this section. A five-column chart at
   390px either shrinks past readability or scrolls sideways, so below 720px
   each row becomes a card and every value is printed beside its column name.
   The labels come from real markup, not ::before content, so they are read
   aloud too. Above 720px it is an ordinary table with a sticky head.
   ========================================================================== */

body.lu-sg-page .lu-sg {
	background: var(--lu-light-bg);
	color: var(--lu-light-text);
}

.lu-sg__wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--lu-gutter);
}

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

.lu-sg__head {
	background: var(--lu-black);
	color: var(--lu-white);
	padding: clamp(32px, 4vw, 72px) 0 clamp(28px, 3.4vw, 60px);
}

.lu-sg__eyebrow {
	margin: 0 0 clamp(10px, 1vw, 18px);
	font-family: var(--lu-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lu-white);
}

.lu-sg__title {
	margin: 0;
	font-family: var(--lu-display);
	font-size: clamp(30px, 3.1vw, 58px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.02;
	letter-spacing: -0.012em;
	text-transform: uppercase;
	color: var(--lu-white);
}

.lu-sg__red { color: var(--lu-red); }

.lu-sg__rule {
	display: block;
	width: clamp(54px, 4.6vw, 86px);
	height: 3px;
	margin: clamp(14px, 1.3vw, 24px) 0 clamp(14px, 1.3vw, 22px);
	background: var(--lu-red);
}

.lu-sg__lead {
	margin: 0;
	max-width: 62ch;
	font-family: var(--lu-font);
	font-size: clamp(14.5px, 0.95vw, 17px);
	line-height: 1.6;
	color: #d7d7d7;
}

/* --- Men's / women's switch ---------------------------------------------- */

/* The radios drive the panels. Kept in the layout but visually hidden, so
   they stay reachable by keyboard and the focus ring still lands somewhere. */
.lu-sg__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lu-sg__switch {
	display: flex;
	gap: 0;
	margin: clamp(22px, 2.4vw, 40px) 0 clamp(16px, 1.6vw, 28px);
	border-bottom: 1px solid var(--lu-light-line);
}

.lu-sg__tab {
	flex: 0 0 auto;
	padding: clamp(10px, 1vw, 15px) clamp(16px, 2vw, 34px);
	font-family: var(--lu-font);
	font-size: clamp(12px, 0.82vw, 14px);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lu-light-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color .18s var(--lu-ease), border-color .18s var(--lu-ease);
	user-select: none;
}

@media (hover: hover) {
	.lu-sg__tab:hover { color: var(--lu-light-text); }
}

/* Panels are hidden by default and revealed by the matching radio. Both
   tables stay in the HTML either way, so nothing is lost to search engines. */
.lu-sg__panel--men,
.lu-sg__panel--women { display: none; }

#lu-sg-men:checked ~ .lu-sg__panel--men,
#lu-sg-women:checked ~ .lu-sg__panel--women { display: block; }

#lu-sg-men:checked ~ .lu-sg__wrap .lu-sg__tab[for="lu-sg-men"],
#lu-sg-women:checked ~ .lu-sg__wrap .lu-sg__tab[for="lu-sg-women"] {
	color: var(--lu-light-text);
	border-bottom-color: var(--lu-red);
}

/* Visible focus ring on the switch when tabbing through. */
.lu-sg__radio:focus-visible ~ .lu-sg__wrap .lu-sg__switch {
	outline: 2px solid var(--lu-red);
	outline-offset: 4px;
}

/* --- Panels and tables ---------------------------------------------------- */

.lu-sg__panel { padding-bottom: clamp(28px, 3vw, 54px); }
.lu-sg__panel--solo { padding-top: clamp(24px, 2.6vw, 44px); }

.lu-sg__h2 {
	margin: 0 0 clamp(12px, 1.2vw, 22px);
	font-family: var(--lu-display);
	font-size: clamp(21px, 1.62vw, 33px);
	font-weight: 800;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--lu-light-text);
}

.lu-sg__h2--light { color: var(--lu-white); }

.lu-sg__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.lu-sg__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--lu-font);
	font-variant-numeric: tabular-nums;
}

.lu-sg__table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--lu-black);
	color: var(--lu-white);
	font-size: clamp(11px, 0.76vw, 13px);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	padding: 14px 10px;
}

.lu-sg__table tbody th,
.lu-sg__table tbody td {
	padding: 13px 10px;
	text-align: center;
	font-size: clamp(14px, 0.92vw, 16px);
	font-weight: 400;
	color: var(--lu-light-text);
	border-bottom: 1px solid var(--lu-light-line);
}

/* The US column is the one people look up, so it carries the weight. */
.lu-sg__table tbody th { font-weight: 700; }

.lu-sg__table tbody tr:nth-child(odd) { background: var(--lu-light-tile); }

@media (hover: hover) {
	.lu-sg__table tbody tr:hover { background: #ffe9ea; }
}

/* Column labels are for the stacked card layout only. */
.lu-sg__lab { display: none; }

/* --- Phone: one card per size -------------------------------------------- */

@media (max-width: 719px) {

	.lu-sg__table thead { display: none; }

	.lu-sg__table,
	.lu-sg__table tbody,
	.lu-sg__table tbody tr,
	.lu-sg__table tbody th,
	.lu-sg__table tbody td { display: block; width: 100%; }

	.lu-sg__table tbody tr {
		margin: 0 0 10px;
		border: 1px solid var(--lu-light-line);
		border-radius: var(--lu-radius);
		overflow: hidden;
		background: var(--lu-light-bg);
	}

	.lu-sg__table tbody tr:nth-child(odd) { background: var(--lu-light-bg); }

	/* The US size heads the card, reversed out, so each card is scannable. */
	.lu-sg__table tbody th {
		display: flex;
		align-items: baseline;
		gap: 8px;
		padding: 11px 14px;
		background: var(--lu-black);
		color: var(--lu-white);
		border-bottom: 0;
		text-align: left;
	}

	.lu-sg__table tbody th .lu-sg__lab {
		display: inline;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--lu-red);
	}

	.lu-sg__table tbody th .lu-sg__val {
		font-family: var(--lu-display);
		font-size: 19px;
		font-weight: 800;
		font-stretch: 84%;
	}

	.lu-sg__table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 9px 14px;
		text-align: left;
		border-bottom: 1px solid var(--lu-light-line);
	}

	.lu-sg__table tbody tr td:last-child { border-bottom: 0; }

	.lu-sg__table tbody td .lu-sg__lab {
		display: inline;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--lu-light-muted);
	}

	.lu-sg__table tbody td .lu-sg__val {
		font-size: 15px;
		font-weight: 600;
	}

	/* Full-width tabs, so both are comfortable thumb targets. */
	.lu-sg__switch { gap: 0; }
	.lu-sg__tab { flex: 1 1 50%; text-align: center; padding: 13px 8px; }
}

/* --- How to measure ------------------------------------------------------- */

.lu-sg__how {
	background: var(--lu-black);
	color: var(--lu-white);
	padding: clamp(28px, 3vw, 56px) 0 clamp(30px, 3.2vw, 60px);
}

.lu-sg__steps {
	list-style: none;
	margin: 0 0 clamp(16px, 1.6vw, 26px);
	padding: 0;
	display: grid;
	gap: clamp(10px, 1vw, 16px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lu-sg__steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--lu-font);
	font-size: clamp(14px, 0.9vw, 16px);
	line-height: 1.55;
	color: #e4e4e4;
}

.lu-sg__num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lu-red);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	border-radius: 50%;
}

.lu-sg__note {
	margin: 0 0 clamp(18px, 1.8vw, 28px);
	max-width: 70ch;
	font-family: var(--lu-font);
	font-size: clamp(13px, 0.86vw, 15px);
	line-height: 1.6;
	color: #a9a9a9;
}

@media (max-width: 719px) {
	.lu-sg__steps { grid-template-columns: minmax(0, 1fr); }
	.lu-sg__how .lu-btn { width: 100%; }
}

/* ==========================================================================
   26. STORY BANNER ON PHONES: CENTRED, ONE LINE EACH
   ==========================================================================
   The copy sat left-aligned and wrapped onto two lines each. Centred here, and
   both the headline and the tagline are held to a single line.

   The line breaks are hard <br> elements: lu_story_banner() stores "More
   than\nsneakers." and the template runs it through nl2br(). CSS cannot undo a
   <br> by changing white-space, so the <br> itself is hidden. nl2br() inserts
   the tag BEFORE the newline and leaves the newline in the output, so with the
   <br> gone that newline collapses to an ordinary space and the two halves
   rejoin as "More than sneakers." -- no template edit needed.

   nowrap is then safe only because both sizes are driven by vw, so the text
   shrinks with the viewport instead of spilling out of it. The ceilings keep
   them from outgrowing the old sizes on a large phone. Verified for overflow
   from 320px up to the 700px breakpoint.
   ========================================================================== */

@media (max-width: 700px) {

	/*
	 * The panel is a flex column with align-items: flex-start, so its children
	 * shrink-wrap to their text and sit hard left. text-align alone centres the
	 * text INSIDE each shrink-wrapped box, which is invisible -- the box is the
	 * same width as the text. Centring has to happen on the flex axis.
	 */
	body .lu-story__banner .lu-story__body {
		align-items: center;
		text-align: center;
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Rejoin the two halves of each line. */
	body .lu-story__banner .lu-story__title br,
	body .lu-story__banner .lu-story__text br { display: none; }

	body .lu-story__banner .lu-story__title {
		white-space: nowrap;
		font-size: min(7.2vw, 34px);
	}

	body .lu-story__banner .lu-story__text {
		white-space: nowrap;
		font-size: min(3.35vw, 15px);
	}

	/* Button opts back out to the left. As a flex item it only has to override
	   the centring on its own axis -- no width or margin juggling needed. */
	body .lu-story__banner .lu-story__btn { align-self: flex-start; }
}