/* MetaAffinity Kit Designer widget */
html body { overflow-x: clip; }

.makd {
	--makd-bg: #C9541F;
	--makd-ink: #ffffff;
	--makd-btn-bg: #ffffff;
	--makd-btn-ink: #111111;
	--makd-min-h: clamp(560px, 46vw, 760px);
	--makd-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--makd-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
	--makd-cut: 0px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: var(--makd-min-h);
	display: flex;
	align-items: center;
	background-color: var(--makd-bg);
	color: var(--makd-ink);
	font-family: var(--makd-font);
	transition: background-color .55s ease;
	clip-path: polygon(0 0, calc(100% - var(--makd-cut)) 0, 100% var(--makd-cut), 100% 100%, var(--makd-cut) 100%, 0 calc(100% - var(--makd-cut)));
}
.makd.makd--cut { --makd-cut: clamp(18px, 2.4vw, 40px); }
.makd *, .makd *::before, .makd *::after { box-sizing: border-box; }

/* darker left side + soft glow behind the jersey */
.makd::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(42% 60% at 70% 52%, rgba(255, 255, 255, .16), transparent 70%),
		linear-gradient(100deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .18) 40%, rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
}

.makd-inner {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) auto;
	align-items: center;
	gap: 32px;
	padding: 72px max(24px, calc((100vw - 1320px) / 2));
}

/* ---- copy ---- */
.makd-copy { position: relative; z-index: 2; max-width: 690px; }
.makd .makd-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}
.makd-slashes { display: inline-flex; gap: 3px; }
.makd-slashes i {
	width: 4px;
	height: 13px;
	background: currentColor;
	transform: skewX(-24deg);
	display: block;
}
.makd .makd-title {
	font-family: var(--makd-head);
	font-weight: 800;
	font-size: clamp(60px, 7.2vw, 132px);
	line-height: .88;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--makd-ink);
	margin: 0 0 28px;
}
.makd .makd-text {
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.75;
	color: rgba(255, 255, 255, .86);
	max-width: 520px;
	margin: 0 0 26px;
}
.makd .makd-chips {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.makd .makd-chips li {
	margin: 0;
	padding: 8px 18px;
	font-size: 14.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .95);
	background: rgba(255, 255, 255, .14);
	clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.makd .makd-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 38px 16px 30px;
	background: var(--makd-btn-bg);
	color: var(--makd-btn-ink);
	font-family: var(--makd-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	transition: transform .25s ease, opacity .25s ease;
}
.makd .makd-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.makd .makd-btn:hover { color: var(--makd-btn-ink); opacity: .92; }
.makd .makd-btn:hover svg { transform: translateX(4px); }

/* ---- visual ---- */
.makd-visual {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
}
.makd-outline {
	position: absolute;
	inset: 0 -4% 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 0;
	pointer-events: none;
}
.makd-outline span {
	display: block;
	font-family: var(--makd-head);
	font-weight: 800;
	font-size: clamp(110px, 13vw, 250px);
	line-height: .84;
	text-transform: uppercase;
	letter-spacing: .01em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .2);
}
.makd-jerseys {
	position: relative;
	z-index: 1;
	width: clamp(260px, 27vw, 500px);
	aspect-ratio: 591 / 759;
	animation: makd-float 6s ease-in-out infinite;
}
.makd .makd-jersey {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	margin: 0;
	opacity: 0;
	transform: scale(.96);
	transition: opacity .45s ease, transform .45s ease;
	filter: drop-shadow(0 38px 34px rgba(0, 0, 0, .35));
}
.makd .makd-jersey.is-active { opacity: 1; transform: scale(1); }
@keyframes makd-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* ---- swatches ---- */
.makd-swatches {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.makd .makd-swatch {
	width: 46px;
	height: 46px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	background: var(--makd-sw);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
	transition: transform .2s ease, box-shadow .2s ease;
}
.makd .makd-swatch:hover { transform: scale(1.08); }
.makd .makd-swatch.is-active { box-shadow: inset 0 0 0 3px #fff; transform: scale(1.12); }
.makd .makd-swatch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- tablet & mobile ---- */
@media (max-width: 1024px) {
	.makd-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 64px 24px; }
	.makd-visual { min-height: 0; padding: 10px 0; }
	.makd-jerseys { width: min(70vw, 380px); }
	.makd-outline { inset: 0; align-items: center; }
	.makd-outline span { font-size: clamp(80px, 20vw, 170px); }
	.makd-swatches { flex-direction: row; justify-content: center; }
	.makd .makd-title { font-size: clamp(52px, 13vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
	.makd-jerseys { animation: none; }
	.makd, .makd .makd-jersey { transition: none; }
}