/**
 * Homepage sections.
 *
 * Editorial and product-led, in the manner of the large textile retailers:
 * generous type, thin rules, no card borders or drop shadows, and imagery doing
 * the work. Rails are native scroll-snap containers so they behave correctly on
 * touch without a carousel library.
 */

.unu-sec {
	--unu-ink: #111;
	--unu-muted: #6b6b6b;
	--unu-line: #e6e6e6;
	--unu-accent: #0d1c57;
	padding: clamp(38px, 5vw, 64px) 0;
}

.unu-sec + .unu-sec { padding-top: 0; }

/* Full width rather than a centred 1400px column: on a 1920px monitor that cap
   left ~260px of empty gutter each side and the page read as a boxed template.
   The large retailers run their grids and banners nearly edge to edge. */
.unu-sec__inner {
	width: 100%;
	margin: 0 auto;
	padding-inline: clamp(16px, 2.2vw, 40px);
}

/* Photography goes truly edge to edge — a banner with a margin is a picture,
   not a banner. */
.unu-sec--banner .unu-sec__inner,
.unu-sec--locate .unu-sec__inner,
.unu-sec--bulk .unu-sec__inner {
	padding-inline: 0;
	width: 100%;
}

/* ------------------------------------------------------------ section head */

.unu-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 clamp(20px, 2.6vw, 34px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--unu-line);
}

.unu-sec__title {
	margin: 0;
	font-size: clamp(21px, 2.5vw, 32px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--unu-ink);
}

.unu-sec__sub {
	margin: 7px 0 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--unu-muted);
}

.unu-sec__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--unu-accent);
	text-decoration: none;
	white-space: nowrap;
}

.unu-sec__all:hover { text-decoration: underline; }
.unu-sec__all svg { transition: transform 0.2s ease; }
.unu-sec__all:hover svg { transform: translateX(3px); }

/* ----------------------------------------------------------- category tiles */

.unu-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}

/* Two large tiles read as a deliberate pair rather than a short row. */
.unu-tiles[data-count="2"] { grid-template-columns: repeat(2, 1fr); }

.unu-tile {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: #f4f4f4;
}

.unu-tile__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.unu-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.unu-tile:hover .unu-tile__media img { transform: scale(1.045); }

/* A gradient rather than a flat scrim, so light fabric photos keep contrast
   without the whole image going murky. */
.unu-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 22px 22px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
}

.unu-tile__count {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 0.85;
}

.unu-tile__name {
	display: block;
	margin: 5px 0 10px;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.2;
	font-weight: 700;
}

.unu-tile__cta {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	padding-bottom: 2px;
}

.unu-tile:hover .unu-tile__cta { border-bottom-color: #fff; }

/* ------------------------------------------------------------------- rails */

.unu-rail-wrap { position: relative; }

.unu-rail {
	/* Track width is a fixed calc, not a minmax: with minmax(0, …) the tracks are
	   free to shrink, so twelve cards squeezed themselves into the container at
	   ~100px each instead of overflowing into a scroll. --n is how many cards
	   should be visible; the fractional value on small screens leaves the next
	   card peeking, which is what signals the rail can be swiped. */
	--unu-gap: clamp(12px, 1.4vw, 22px);
	--unu-n: 2.15;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--unu-n) - 1) * var(--unu-gap)) / var(--unu-n));
	gap: var(--unu-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* Room for the focus ring, and the scrollbar is hidden below. */
	padding: 2px 2px 6px;
	scrollbar-width: none;
}

.unu-rail::-webkit-scrollbar { display: none; }

/* Three, four then five across as the screen widens. */
@media (min-width: 620px)  { .unu-rail { --unu-n: 3; } }
@media (min-width: 1000px) { .unu-rail { --unu-n: 4; } }
@media (min-width: 1280px) { .unu-rail { --unu-n: 5; } }

.unu-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-decoration: none;
	color: var(--unu-ink);
}

.unu-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f4f4f4;
	margin-bottom: 12px;
}

.unu-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.unu-card:hover .unu-card__media img { transform: scale(1.045); }

.unu-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 9px;
	background: #fff;
	color: var(--unu-ink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.unu-card__name {
	font-size: 13.5px;
	line-height: 1.45;
	/* Two lines keeps every card in a rail the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.unu-card:hover .unu-card__name { text-decoration: underline; }

.unu-card__price {
	margin-top: 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--unu-ink);
}

.unu-card__price del { font-weight: 400; opacity: 0.5; margin-right: 6px; }
.unu-card__price ins { text-decoration: none; }

/* Rail arrows: desktop affordance only — touch devices scroll natively. */
.unu-rail__nav {
	position: absolute;
	top: calc(50% - 34px);
	z-index: 2;
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--unu-line) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.94) !important;
	color: var(--unu-ink) !important;
	padding: 0 !important;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.unu-rail__nav--prev { left: -13px; }
.unu-rail__nav--next { right: -13px; }

.unu-rail__nav:hover { background: #fff !important; color: var(--unu-accent) !important; }
.unu-rail__nav[hidden] { display: none !important; }

@media (hover: hover) and (min-width: 1000px) {
	.unu-rail__nav { display: flex; }
}

/* ---------------------------------------------------------------- outlets */

.unu-outlets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 44px);
	background: #f6f5f3;
}

/* ======================================================= locator band ===
 * A showroom photograph washed back so centred type sits cleanly on it, in the
 * manner of a store-locator banner on the big retail sites. */

.unu-locate {
	position: relative;
	overflow: hidden;
	background: #efece7;
	isolation: isolate;
}

.unu-locate__media { position: absolute; inset: 0; z-index: 0; }

.unu-locate__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center 42% !important;
}

/* The wash is a layer of its own rather than an opacity on the photograph, so
   the type above it stays at full strength. */
.unu-locate__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(252, 251, 250, 0.82) 0%, rgba(252, 251, 250, 0.88) 55%, rgba(252, 251, 250, 0.94) 100%);
}

.unu-locate__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: clamp(46px, 7vw, 96px) clamp(20px, 4vw, 60px);
}

.unu-locate__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #5c5c5c;
}

.unu-locate__title {
	margin: 0;
	font-size: clamp(28px, 4.4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: #14171f !important;
}

.unu-locate__sub {
	margin: 0;
	font-size: 15px;
	color: #4a4a4a;
}

.unu-locate__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	margin: 6px 0 4px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #3a3a3a;
}

.unu-locate__list li { position: relative; }

.unu-locate__list li + li::before {
	content: "";
	position: absolute;
	left: -13px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #9a9a9a;
	transform: translateY(-50%);
}

.unu-locate--plain .unu-locate__body { padding-block: clamp(34px, 4vw, 56px); }

/* ========================================================= bulk enquiry ===
 * Photograph beside the offer, rather than a flat colour block. */

.unu-bulk {
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	overflow: hidden;
	background: #14171f;
	color: #fff;
}

.unu-bulk__media { position: relative; min-height: 100%; }

.unu-bulk__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: 62% center !important;
}

.unu-bulk__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding: clamp(30px, 4vw, 64px);
}

.unu-bulk__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62) !important;
}

.unu-bulk__title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #fff !important;
}

.unu-bulk__text {
	margin: 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82) !important;
}

.unu-bulk__list {
	margin: 4px 0 6px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.unu-bulk__list li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

/* A drawn tick, so the list needs no icon font. */
.unu-bulk__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 11px;
	height: 6px;
	border-left: 1.6px solid #c8b98f;
	border-bottom: 1.6px solid #c8b98f;
	transform: rotate(-45deg);
}

.unu-bulk__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 6px;
}

.unu-bulk__wa {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #fff !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	padding-bottom: 3px;
}

.unu-bulk__wa:hover { border-bottom-color: #fff; }

.unu-bulk__email {
	margin: 4px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.66) !important;
}

.unu-bulk__email a { color: #fff !important; text-decoration: underline; }

.unu-btn--light { background: #14171f; }
.unu-btn--light:hover { background: #0d1c57; }

@media (max-width: 860px) {
	.unu-bulk { grid-template-columns: 1fr; }
	.unu-bulk__media { min-height: 0; aspect-ratio: 16 / 10; order: 0; }
	.unu-bulk__body { order: 1; }
	.unu-locate__media img { object-position: center 45% !important; }
}

.unu-outlets__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	color: var(--unu-muted);
	font-size: 14px;
}

.unu-outlets__list li { position: relative; }

.unu-outlets__list li + li::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #bdbdbd;
	transform: translateY(-50%);
}

.unu-btn {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 15px 30px;
	background: var(--unu-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
}

.unu-btn:hover { background: #0a1745; color: #fff; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 720px) {
	.unu-sec__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.unu-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.unu-tiles[data-count="2"] { grid-template-columns: 1fr; }
	.unu-tile__body { padding: 14px 14px 13px; }
	.unu-tile__name { font-size: 15px; }
	.unu-tile__cta { font-size: 10px; }

	.unu-rail { --unu-n: 1.6; }
	.unu-card__name { font-size: 13px; }

	.unu-outlets { flex-direction: column; align-items: flex-start; }
	.unu-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.unu-tile__media img,
	.unu-card__media img,
	.unu-sec__all svg { transition: none; }
	.unu-rail { scroll-behavior: auto; }
}


/* -------------------------------------------------- theme image overrides
 * Moderno forces height:auto on images, which defeats object-fit: a 3:2
 * landscape fabric photo sat in the top 40% of a 3:4 card with grey below.
 * The card and tile media boxes crop deliberately, so the sizing is restated
 * with the weight needed to win. */

.unu-card__media img,
.unu-tile__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* ============================================================== banners ===
 * Editorial blocks that break up the rails, in the manner of the large
 * retailers: one wide collection banner, then rows of two or three. */


/* ------------------------------------------------- wide collection banner */

.unu-cb {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	min-height: clamp(320px, 34vw, 460px);
	overflow: hidden;
	text-decoration: none;
	background: #0d1c57;
	color: #fff;
}

.unu-cb--flip { direction: rtl; }
.unu-cb--flip > * { direction: ltr; }

.unu-cb--sand { background: #e9e3da; color: #111; }
.unu-cb--ink  { background: #16161a; color: #fff; }

.unu-cb__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding: clamp(28px, 4vw, 62px);
	order: -1;
}

.unu-cb__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	opacity: 0.75;
}

.unu-cb__title {
	margin: 0;
	font-size: clamp(28px, 4.2vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: inherit;
}

.unu-cb__text {
	margin: 0;
	max-width: 42ch;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.85;
}

.unu-cb__cta {
	margin-top: 6px;
	padding: 14px 30px;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.unu-cb--sand .unu-cb__cta { background: #111; color: #fff; }
.unu-cb:hover .unu-cb__cta { background: #d8cfc2; }
.unu-cb--sand:hover .unu-cb__cta { background: #333; }

.unu-cb__media { overflow: hidden; }

.unu-cb__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	/* Product shots frame the garment high, so bias the crop upward. */
	object-position: center 22% !important;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.unu-cb:hover .unu-cb__media img { transform: scale(1.04); }

/* A true full-bleed photograph, once editorial imagery exists: the type sits
   over the image instead of beside it. */
.unu-cb--full { grid-template-columns: 1fr; }
.unu-cb--full .unu-cb__media { grid-area: 1 / 1; }
.unu-cb--full .unu-cb__copy {
	grid-area: 1 / 1;
	order: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.28) 52%, rgba(0, 0, 0, 0) 100%);
	max-width: 760px;
}

/* ------------------------------------------------------------ banner rows */

.unu-br {
	display: grid;
	grid-template-columns: repeat(var(--unu-cols, 3), 1fr);
	gap: clamp(10px, 1.2vw, 18px);
}

.unu-br[data-cols="1"] { --unu-cols: 1; }
.unu-br[data-cols="2"] { --unu-cols: 2; }
.unu-br[data-cols="3"] { --unu-cols: 3; }

/* A lone banner reads better wide than as a third of a row. */
.unu-br[data-cols="1"] .unu-br__media { aspect-ratio: 16 / 7; }

.unu-br__item {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: #f4f4f4;
}

.unu-br__media { aspect-ratio: var(--unu-ratio, 4 / 5); }

.unu-br__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center 20% !important;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.unu-br__item:hover .unu-br__media img { transform: scale(1.05); }

.unu-br__copy {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(18px, 2vw, 30px);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
}

.unu-br__title {
	margin: 0;
	font-size: clamp(18px, 1.9vw, 27px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #fff;
}

.unu-br__sub {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.82;
}

.unu-br__cta {
	display: inline-block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	padding-bottom: 2px;
}

.unu-br__item:hover .unu-br__cta { border-bottom-color: #fff; }

/* --------------------------------------------------------------- trending */

.unu-trend__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	margin: 0 0 clamp(20px, 2.6vw, 32px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--unu-line);
}

.unu-trend__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 26px;
}

.unu-trend__tab {
	padding: 4px 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--unu-muted) !important;
	font: inherit;
	font-size: 15px !important;
	letter-spacing: 0.01em;
	cursor: pointer;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	width: auto !important;
}

.unu-trend__tab:hover { color: var(--unu-ink) !important; }

.unu-trend__tab.is-active {
	color: var(--unu-ink) !important;
	border-bottom-color: var(--unu-ink) !important;
	font-weight: 600;
}

.unu-trend__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(10px, 1.3vw, 20px);
}

.unu-trend__panel[hidden] { display: none; }

/* -------------------------------------------------- banner responsiveness */

@media (max-width: 980px) {
	.unu-trend__grid { grid-template-columns: repeat(3, 1fr); }
	.unu-trend__head {
		grid-template-columns: 1fr auto;
		row-gap: 12px;
	}
	.unu-trend__tabs {
		order: 3;
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}

@media (max-width: 720px) {
	.unu-cb {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.unu-cb__copy { order: 1; padding: 24px 20px 28px; }
	.unu-cb__media { order: 0; aspect-ratio: 16 / 11; }
	.unu-cb--full .unu-cb__copy { order: 0; }
	.unu-cb--full .unu-cb__media { aspect-ratio: 4 / 5; }

	.unu-br { grid-template-columns: 1fr 1fr; }
	.unu-br[data-cols="3"] { --unu-cols: 2; }
	.unu-br[data-cols="3"] .unu-br__item:nth-child(3) { grid-column: 1 / -1; }
	.unu-br[data-cols="3"] .unu-br__item:nth-child(3) .unu-br__media { aspect-ratio: 16 / 10; }

	.unu-trend__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.unu-cb__media img,
	.unu-br__media img { transition: none; }
}


/* ------------------------------------------- banner type, theme overrides
 * Moderno colours h2/h3 globally, which turned the banner headings dark on a
 * navy panel and on dark imagery — invisible either way. Banner type sets its
 * own colour with the weight to win, and the scrims are strengthened so light
 * photographs still carry white text. */

.unu-cb--navy .unu-cb__title,
.unu-cb--ink .unu-cb__title,
.unu-cb--navy .unu-cb__kicker,
.unu-cb--ink .unu-cb__kicker,
.unu-cb--navy .unu-cb__text,
.unu-cb--ink .unu-cb__text,
.unu-cb--full .unu-cb__title,
.unu-cb--full .unu-cb__kicker,
.unu-cb--full .unu-cb__text {
	color: #fff !important;
}

.unu-cb--sand .unu-cb__title,
.unu-cb--sand .unu-cb__kicker,
.unu-cb--sand .unu-cb__text {
	color: #111 !important;
}

.unu-br__title,
.unu-br__sub,
.unu-br__cta {
	color: #fff !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Deeper scrim: several category photos are shot on white, where the previous
   gradient left the caption unreadable. */
.unu-br__copy {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.12) 78%, rgba(0, 0, 0, 0) 100%);
	padding-top: clamp(48px, 6vw, 84px);
}

/* Cutout product shots sit on white; a warm ground stops the image half of the
   collection banner reading as an empty gap. */
.unu-cb__media { background: #efece7; }
.unu-cb { min-height: clamp(300px, 30vw, 420px); }


/* ------------------------------------------------ collection banner height
 * min-height alone left the grid row indefinite, so `height:100%` on the image
 * resolved to auto and a 1600x2400 studio shot stretched the banner to 1008px.
 * A definite height gives the image something to fill, and the crop is biased
 * to the upper body so a full-length garment reads as a fashion crop rather
 * than a slice of hem. */

@media (min-width: 721px) {
	.unu-cb {
		height: clamp(340px, 32vw, 470px);
		min-height: 0;
	}
	.unu-cb__media { height: 100%; }
	.unu-cb__media img { object-position: center 16% !important; }
}

@media (max-width: 720px) {
	.unu-cb { height: auto; }
	.unu-cb__media { height: auto; }
	.unu-cb__media img { object-position: center 14% !important; }
}


/* ------------------------------------------------ full-bleed banner artwork
 * The commissioned renders hold the garment right of centre and leave the left
 * clear, so the scrim only needs to deepen the empty side enough to seat the
 * type — a heavy overlay would flatten the photograph it exists to show. */

.unu-cb--full .unu-cb__media img {
	/* Framed for this crop already; centre it rather than biasing upward. */
	object-position: center center !important;
}

.unu-cb--on-dark .unu-cb__copy {
	background: linear-gradient(90deg, rgba(10, 12, 20, 0.88) 0%, rgba(10, 12, 20, 0.62) 34%, rgba(10, 12, 20, 0.16) 62%, rgba(10, 12, 20, 0) 82%);
}

.unu-cb--on-dark .unu-cb__title,
.unu-cb--on-dark .unu-cb__kicker,
.unu-cb--on-dark .unu-cb__text { color: #fff !important; }

.unu-cb--on-dark .unu-cb__cta { background: #fff; color: #111; }
.unu-cb--on-dark:hover .unu-cb__cta { background: #e6e0d6; }

/* The pale render needs the opposite treatment: a soft light wash and ink type. */
.unu-cb--on-light .unu-cb__copy {
	background: linear-gradient(90deg, rgba(244, 243, 241, 0.94) 0%, rgba(244, 243, 241, 0.74) 34%, rgba(244, 243, 241, 0.22) 62%, rgba(244, 243, 241, 0) 82%);
}

.unu-cb--on-light .unu-cb__title,
.unu-cb--on-light .unu-cb__kicker,
.unu-cb--on-light .unu-cb__text { color: #14171f !important; }

.unu-cb--on-light .unu-cb__kicker { opacity: 0.7; }
.unu-cb--on-light .unu-cb__cta { background: #14171f; color: #fff; }
.unu-cb--on-light:hover .unu-cb__cta { background: #0d1c57; }

/* The artwork carries its own ground, so the placeholder tint must not show. */
.unu-cb--full .unu-cb__media { background: transparent; }
.unu-cb--full { background: transparent; }

/* On a phone the 3:1 art is cropped to a portrait; keep the subject in frame
   and let the copy sit beneath rather than over a tight crop. */
@media (max-width: 720px) {
	.unu-cb--full .unu-cb__media { aspect-ratio: 3 / 2; }
	.unu-cb--full .unu-cb__media img { object-position: 72% center !important; }
	.unu-cb--full .unu-cb__copy {
		position: static;
		background: none !important;
		max-width: none;
		padding: 20px 20px 26px;
	}
	.unu-cb--full.unu-cb--on-dark { background: #0f131c !important; }
	.unu-cb--full.unu-cb--on-light { background: #f4f3f1 !important; }
}


/* ------------------------------------------------ flush closing sections
 * The locator band and the bulk enquiry are full-bleed photography, so any
 * vertical padding reads as an accidental white stripe between them and the
 * sections above and below. They sit flush, edge to edge, top and bottom. */

.unu-sec--locate,
.unu-sec--bulk {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.unu-sec--locate + .unu-sec--bulk,
.unu-sec--bulk + .unu-sec--locate {
	margin-top: 0;
}


/* ========================================================= statements bar ===
 * A slim ink band under the slider. Two identical tracks scroll as one and the
 * pair is translated by exactly -50%, so the second copy takes over precisely
 * where the first leaves off and the seam is invisible. */

.unu-usp {
	background: #14171f;
	color: #fff;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.unu-usp__viewport {
	display: flex;
	width: max-content;
	animation: unu-usp-scroll 42s linear infinite;
}

/* Slow, even, and it stops when someone wants to read it. */
.unu-usp:hover .unu-usp__viewport,
.unu-usp:focus-within .unu-usp__viewport { animation-play-state: paused; }

@keyframes unu-usp-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.unu-usp__track {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}

.unu-usp__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px clamp(22px, 3vw, 46px);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.9);
}

/* A hairline between statements reads calmer than a row of filled dots. */
.unu-usp__item + .unu-usp__item { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }
.unu-usp__track + .unu-usp__track .unu-usp__item:first-child { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }

/* The theme sets a fill on every svg, which turns these outline glyphs into
   solid blobs; the inline fill="none" is not enough to beat it. */
.unu-usp__icon {
	flex: 0 0 auto;
	color: #c8b98f;
	opacity: 0.95;
	fill: none !important;
	stroke: currentColor !important;
}

@media (max-width: 600px) {
	.unu-usp__item {
		padding: 13px 20px;
		font-size: 10.5px;
		letter-spacing: 0.15em;
	}
	.unu-usp__viewport { animation-duration: 30s; }
}

/* No motion: show the statements as a static, centred, wrapping row. */
@media (prefers-reduced-motion: reduce) {
	.unu-usp__viewport {
		animation: none;
		width: 100%;
		justify-content: center;
	}
	.unu-usp__track { flex-wrap: wrap; justify-content: center; }
	.unu-usp__track + .unu-usp__track { display: none; }
	.unu-usp__item + .unu-usp__item { box-shadow: none; }
}


/* ------------------------------------------------------- section rhythm
 * Each section is rendered inside its own Elementor container, so the
 * `.unu-sec + .unu-sec` rule never matched a sibling and every section kept
 * both its top and bottom padding — doubling the gap between them. Spacing is
 * now carried on the bottom only, which halves those gaps and makes the
 * rhythm even. */

.unu-sec {
	padding-top: 0;
	padding-bottom: clamp(38px, 5vw, 64px);
}

/* The first section under the statements bar needs a little air, but 64px read
   as a gap rather than breathing room against the dark band. */
.unu-sec--tiles { padding-top: clamp(18px, 2.2vw, 30px); }

/* Full-bleed photography stays flush on both edges. */
.unu-sec--locate,
.unu-sec--bulk {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* A banner directly after a rail would otherwise sit tight against the cards. */
.unu-sec--banner { padding-bottom: clamp(38px, 5vw, 64px); }


/* --------------------------------------------------- declared adjacency
 * Two banners in sequence left the first one's bottom padding showing as a
 * white stripe between two photographs. The sections sit in separate Elementor
 * containers, so no sibling selector can see the pairing — the shortcode
 * declares it instead. */

.unu-sec--flush-bottom { padding-bottom: 0 !important; }
.unu-sec--flush-top { padding-top: 0 !important; }

/* ------------------------------------------------------- seven-up tiles
 * Wide screens fit the whole range in one row; narrower ones fall back to the
 * auto-fit flow rather than squeezing seven tiles into 1200px. */

.unu-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (min-width: 1500px) {
	.unu-tiles[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
	.unu-tiles[data-count="6"] { grid-template-columns: repeat(6, 1fr); }
	.unu-tiles[data-count="7"] { grid-template-columns: repeat(7, 1fr); }

	/* Seven across leaves each tile narrow, so the label steps down a size. */
	.unu-tiles[data-count="7"] .unu-tile__name { font-size: 16px; }
	.unu-tiles[data-count="7"] .unu-tile__count { font-size: 10px; letter-spacing: 0.1em; }
	.unu-tiles[data-count="7"] .unu-tile__body { padding: 16px 15px 15px; }
}


/* -------------------------------------------------- tiles, edge to edge
 * No gutters between tiles and none at the page edge: the grid reads as one
 * continuous band of imagery, the way the large retailers run theirs. The
 * negative inline margin cancels the section's own padding, which the heading
 * above still needs. */

.unu-tiles {
	gap: 0;
	margin-inline: calc(-1 * clamp(16px, 2.2vw, 40px));
}

@media (min-width: 1500px) {
	.unu-tiles[data-count="8"] { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 1100px) and (max-width: 1499px) {
	.unu-tiles[data-count="7"],
	.unu-tiles[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
}

/* Tighter labels once the tiles are this narrow. */
@media (min-width: 1500px) {
	.unu-tiles[data-count="8"] .unu-tile__name { font-size: 15px; }
	.unu-tiles[data-count="8"] .unu-tile__count { font-size: 10px; letter-spacing: 0.1em; }
	.unu-tiles[data-count="8"] .unu-tile__body { padding: 15px 13px 14px; }
}

@media (max-width: 720px) {
	.unu-tiles { gap: 0; margin-inline: calc(-1 * clamp(16px, 2.2vw, 40px)); }
}


/* Eight across leaves each tile ~200px wide, and at 4:5 that is a 250px strip.
   A taller crop gives the imagery room to be a photograph rather than a sliver,
   and the label gets a little more floor. */

@media (min-width: 1300px) {
	.unu-tiles[data-count="7"] .unu-tile__media,
	.unu-tiles[data-count="8"] .unu-tile__media { aspect-ratio: 2 / 3; }

	.unu-tiles[data-count="7"] .unu-tile__body,
	.unu-tiles[data-count="8"] .unu-tile__body { padding: 18px 14px 18px; }
}


/* Mobile: two tiles per row. This has to come last — the auto-fit rule added
   above for the wide layouts sits later in the file than the original mobile
   block and was winning, dropping phones to a single tile per row. */

@media (max-width: 720px) {
	.unu-tiles,
	.unu-tiles[data-count] {
		grid-template-columns: repeat(2, 1fr);
	}

	.unu-tiles .unu-tile__media { aspect-ratio: 4 / 5; }
	.unu-tiles .unu-tile__body { padding: 14px 12px 13px; }
	.unu-tiles .unu-tile__name { font-size: 15px; }
	.unu-tiles .unu-tile__count { font-size: 10px; }
}


/* ------------------------------------------------------- five-up tiles
 * Eight across made each tile a 200px strip. Five gives every tile half again
 * the width, and a 3:4 crop gives it the height to match — still gutterless and
 * still edge to edge, just with room to be a photograph.
 *
 * One row from 1100px up, so laptops get the full set rather than a 3+2 break. */

@media (min-width: 1100px) {
	.unu-tiles[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
	.unu-tiles[data-count="5"] .unu-tile__media { aspect-ratio: 3 / 4; }
	.unu-tiles[data-count="5"] .unu-tile__body { padding: 24px 22px 22px; }
	.unu-tiles[data-count="5"] .unu-tile__name { font-size: 21px; }
	.unu-tiles[data-count="5"] .unu-tile__count { font-size: 11px; letter-spacing: 0.13em; }
	.unu-tiles[data-count="5"] .unu-tile__cta { font-size: 11px; }
}


/* -------------------------------------------------- locator, dark variant
 * The band's photograph is a dark frame now. The light wash that suited the
 * bright boutique interior would flatten it to grey, so this inverts: a deep
 * scrim, white type, and the button in white on ink. */

.unu-locate--dark { background: #14171f; }

.unu-locate--dark .unu-locate__media::after {
	background: linear-gradient(180deg, rgba(12, 14, 20, 0.62) 0%, rgba(12, 14, 20, 0.72) 55%, rgba(12, 14, 20, 0.8) 100%);
}

.unu-locate--dark .unu-locate__kicker { color: rgba(255, 255, 255, 0.7) !important; }
.unu-locate--dark .unu-locate__title { color: #fff !important; }
.unu-locate--dark .unu-locate__sub { color: rgba(255, 255, 255, 0.82) !important; }
.unu-locate--dark .unu-locate__list { color: rgba(255, 255, 255, 0.78); }
.unu-locate--dark .unu-locate__list li + li::before { background: rgba(255, 255, 255, 0.45); }

.unu-locate--dark .unu-btn--light { background: #fff; color: #14171f !important; }
.unu-locate--dark .unu-btn--light:hover { background: #c8b98f; color: #14171f !important; }

/* ================================================================= hero ===
 * The first section: a full-bleed 2.44:1 frame per market, subject right,
 * headline over the clear left. Slides cross-fade in one grid cell so the
 * height never jumps between them. */

.unu-hero {
	position: relative;
	overflow: hidden;
	background: #14171f;
}

.unu-hero__track { display: grid; }

.unu-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	/* The artwork is 2.44:1 and full width, so the frame follows it exactly
	   rather than cropping the set the photograph was built around. */
	aspect-ratio: 2.44;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease;
}

.unu-hero__slide.is-active { opacity: 1; visibility: visible; }

.unu-hero__media { position: absolute; inset: 0; }

.unu-hero__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* The copy sits over the cleared left side. The scrim is gentle — these frames
   were composed with an empty left, so it only needs to guarantee contrast, not
   rescue it. */
.unu-hero__copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding: clamp(28px, 5vw, 96px);
	max-width: 52%;
}

.unu-hero__slide--dark .unu-hero__copy {
	background: linear-gradient(90deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0.28) 55%, rgba(8, 10, 14, 0) 100%);
}

.unu-hero__slide--light .unu-hero__copy {
	background: linear-gradient(90deg, rgba(250, 248, 244, 0.62) 0%, rgba(250, 248, 244, 0.3) 55%, rgba(250, 248, 244, 0) 100%);
}

.unu-hero__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.unu-hero__title {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(30px, 4.6vw, 66px);
	line-height: 1.02;
	letter-spacing: -0.028em;
}

.unu-hero__text {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.55;
}

.unu-hero__cta {
	margin-top: 10px;
	padding: 16px 34px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Ink type on the pale courtyard frames, white on the emerald and aubergine. */
.unu-hero__slide--light .unu-hero__kicker { color: #4A4034 !important; }
.unu-hero__slide--light .unu-hero__title  { color: #14100B !important; }
.unu-hero__slide--light .unu-hero__text   { color: #3A332A !important; }
.unu-hero__slide--light .unu-hero__cta    { background: #14100B; color: #fff !important; }
.unu-hero__slide--light .unu-hero__cta:hover { background: #0d1c57; }

.unu-hero__slide--dark .unu-hero__kicker { color: rgba(255, 255, 255, 0.76) !important; }
.unu-hero__slide--dark .unu-hero__title  { color: #fff !important; }
.unu-hero__slide--dark .unu-hero__text   { color: rgba(255, 255, 255, 0.86) !important; }
.unu-hero__slide--dark .unu-hero__cta    { background: #fff; color: #14100B !important; }
.unu-hero__slide--dark .unu-hero__cta:hover { background: #c8b98f; }

/* -------------------------------------------------------------- hero nav */

.unu-hero__dots {
	position: absolute;
	left: clamp(28px, 5vw, 96px);
	bottom: clamp(20px, 3vw, 40px);
	display: flex;
	gap: 9px;
	z-index: 3;
}

.unu-hero__dot {
	width: 28px;
	height: 3px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: rgba(255, 255, 255, 0.42) !important;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.unu-hero__dot.is-active { background: #fff !important; }

/* On a pale frame the white dots vanish, so they invert with the slide. */
.unu-hero:has(.unu-hero__slide--light.is-active) .unu-hero__dot { background: rgba(20, 16, 11, 0.28) !important; }
.unu-hero:has(.unu-hero__slide--light.is-active) .unu-hero__dot.is-active { background: #14100B !important; }

.unu-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: none;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.24) !important;
	color: #fff !important;
	cursor: pointer;
}

.unu-hero__arrow--prev { left: 20px; }
.unu-hero__arrow--next { right: 20px; }
.unu-hero__arrow:hover { background: rgba(0, 0, 0, 0.45) !important; }

.unu-hero:has(.unu-hero__slide--light.is-active) .unu-hero__arrow {
	border-color: rgba(20, 16, 11, 0.3) !important;
	background: rgba(255, 255, 255, 0.5) !important;
	color: #14100B !important;
}

@media (hover: hover) and (min-width: 1000px) { .unu-hero__arrow { display: flex; } }

/* On a phone the 2.44:1 frame would be a letterbox strip, and the cleared left
   is lost to the crop — so the art takes a portrait crop biased to the subject
   and the copy sits beneath it on its own ground. */
@media (max-width: 860px) {
	.unu-hero__slide { aspect-ratio: auto; }
	.unu-hero__media { position: relative; aspect-ratio: 4 / 3.2; }
	.unu-hero__media img { object-position: 74% center !important; }

	.unu-hero__copy {
		position: static;
		max-width: none;
		background: none !important;
		padding: 22px 20px 50px;
	}

	.unu-hero__slide--light { background: #F6F2EA; }
	.unu-hero__slide--dark { background: #14171f; }

	.unu-hero__dots { left: 20px; bottom: 18px; }
	.unu-hero__title { font-size: clamp(27px, 7.4vw, 36px); max-width: none; }
	.unu-hero__text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) { .unu-hero__slide { transition: none; } }

/* ============================================================
   Mobile corrections
   Measured on a 390px viewport. Three real faults, not cosmetics.
   ============================================================ */

/* 1. Full-bleed banners overlapped their own photograph.
   .unu-cb--full puts media and copy in the same grid cell (1 / 1) so the type
   sits over the picture, and the mobile block then removed the scrim behind
   the copy — but never released the shared cell. The result was headline and
   paragraph printed straight onto the image with the button pushed out below
   it. Giving each a row of its own stacks them properly. */
@media (max-width: 720px) {
	.unu-cb--full {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.unu-cb--full .unu-cb__media {
		grid-area: 1 / 1;
		aspect-ratio: 4 / 3;
	}

	.unu-cb--full .unu-cb__copy {
		grid-area: 2 / 1;
		position: static;
		background: none !important;
		max-width: none;
		padding: 22px 20px 26px;
	}

	/* The crop can stay centred now that nothing is written across it. */
	.unu-cb--full .unu-cb__media img {
		object-position: center center !important;
	}
}

/* 2. Shop-by-category left an orphan.
   Five tiles in two columns puts one alone on a third row beside an empty
   half. A snap rail shows two and a bit, which is how a phone should read a
   category strip anyway, and no arrangement of five can orphan. */
@media (max-width: 720px) {
	.unu-tiles {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: 16px;
		scroll-padding-left: 16px;
	}

	.unu-tiles::-webkit-scrollbar {
		display: none;
	}

	.unu-tiles > * {
		flex: 0 0 44%;
		scroll-snap-align: start;
	}

	.unu-tile__media {
		aspect-ratio: 3 / 4;
	}
}

/* 3. The Trending tabs wrapped onto a second line, which broke the underline
   and left the third tab hanging under the first two. They scroll sideways
   instead. */
@media (max-width: 720px) {
	.unu-trend__tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.unu-trend__tabs::-webkit-scrollbar {
		display: none;
	}

	.unu-trend__tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Head and "see all" stop fighting for one line. */
	.unu-trend__head {
		flex-wrap: wrap;
		row-gap: 6px;
	}
}