/* ==========================================================================
   Size guide (/sizing)
   ========================================================================== */
.sizing {
	--col: 888px;                        /* table column width */
	--slide: 336px;                      /* card slot width */
	--slide-active: 372px;               /* selected card slot (neighbours ease apart) */
	--box: 366px;                        /* highlighted card */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	max-width: calc(var(--col) + 5rem);
}

.sizing .sizing__title {
	margin-bottom: 3.1875rem;
	padding-top: 1.125rem;
	font-size: 2.5rem;
	line-height: 2.5rem;
}

/* ---------- Card rail (full-bleed, swipeable) ---------- */
.sizing__rail {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
	cursor: grab;
}
.sizing__rail::-webkit-scrollbar { display: none; }
.sizing__rail.is-dragging { cursor: grabbing; }
.sizing__rail.is-dragging .size-card { pointer-events: none; }

.sizing__track {
	--pad: calc(max(2.5rem, (100vw - var(--col)) / 2) - (var(--slide-active) - var(--box)) / 2);
	display: flex;
	width: max-content;
	padding: 1rem var(--pad) 0.25rem;
}

.size-card {
	position: relative;
	flex: 0 0 var(--slide);
	height: var(--box);
	transition: flex-basis 640ms var(--ease-out);
	padding: 0;
	border: 0;
	background: none;
	color: var(--white);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
}
.size-card.is-active { flex-basis: var(--slide-active); }
.sizing__rail.is-dragging .size-card,
.sizing__rail:active .size-card { cursor: inherit; }

/* Highlight box: fades/scales in on the selected card. */
.size-card__box {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--box);
	height: var(--box);
	margin-left: calc(var(--box) / -2);
	border: 1.5px solid #3e3e42;
	border-radius: 1.125rem;
	background: #28282d;
	opacity: 0;
	transform: scale(0.94);
	transition:
		opacity 520ms var(--ease-out),
		transform 640ms var(--ease-out);
	will-change: opacity, transform;
}
.size-card.is-active .size-card__box { opacity: 1; transform: none; }


.size-card__name {
	position: absolute;
	top: 3.1875rem;
	left: 0;
	right: 0;
	padding: 0 0.75rem;
	font-family: var(--font-body);
	font-size: 1.5625rem;
	line-height: 1.875rem;
	letter-spacing: 0.2px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-text-stroke: 0.45px currentColor;
	transform: translateY(8px) scale(0.6);
	transform-origin: 50% 50%;
	transition: transform 640ms var(--ease-out);
}
.size-card.is-active .size-card__name { transform: none; }

.size-card__media {
	position: absolute;
	top: 5.5rem;
	left: 50%;
	width: 246px;
	height: 220px;
	margin-left: -123px;
	pointer-events: none;
	transition: transform 640ms var(--ease-out);
}
.size-card.is-active .size-card__media { transform: scale(1.03); }
.size-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
}

.size-card:focus { outline: none; }
.size-card:focus-visible .size-card__box {
	opacity: 1;
	transform: none;
	box-shadow: 0 0 0 2px var(--white);
}

/* ---------- Table ---------- */
.sizing__body { margin-top: 2.9375rem; }

.sizing__panel { position: relative; }
.sizing__table {
	overflow-x: auto;
	scrollbar-width: none;
}
.sizing__table::-webkit-scrollbar { display: none; }

.size-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.25rem;
	text-transform: uppercase;
	color: var(--white);
	-webkit-text-stroke: 0.45px currentColor;
	font-variant-numeric: tabular-nums;
}
.size-table th,
.size-table td {
	padding: 0 0.75rem;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
}
.size-table th:first-child {
	width: 100%;
	padding-left: 0.6875rem;
	text-align: left;
}
.size-table thead th {
	height: 2.75rem;
	border-bottom: 0.5px solid var(--white);
	vertical-align: middle;
}
.size-table tbody th,
.size-table tbody td { height: 2.8125rem; }

/* ---------- Metric / Imperial toggle ---------- */
.unit-toggle {
	--w1: 107px;
	--w2: 108px;
	position: relative;
	display: inline-grid;
	grid-template-columns: var(--w1) var(--w2);
	margin-top: 1.4375rem;
	padding: 2px;
	border: 0.5px solid var(--white);
	border-radius: 1rem;
}
.unit-toggle__pill {
	position: absolute;
	top: 2px;
	left: 2px;
	width: var(--w1);
	height: calc(100% - 4px);
	border-radius: 0.8125rem;
	background: var(--grey-tab);
	transition:
		transform 480ms var(--ease-out),
		width 480ms var(--ease-out);
}
.unit-toggle[data-unit="imperial"] .unit-toggle__pill {
	width: var(--w2);
	transform: translateX(var(--w1));
}
.unit-toggle__btn {
	position: relative;
	height: 2.8125rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--grey-tab);
	font-family: var(--font-body);
	font-size: 1rem;
	text-transform: uppercase;
	-webkit-text-stroke: 0.45px currentColor;
	cursor: pointer;
	transition: color 320ms var(--ease-out);
}
.unit-toggle__btn[aria-pressed="true"] { color: var(--white); cursor: default; }
@media (hover: hover) {
	.unit-toggle__btn[aria-pressed="false"]:hover { color: #c4c3c6; }
}
.unit-toggle__btn:focus { outline: none; }
.unit-toggle__btn:focus-visible { outline: 1px solid var(--white); outline-offset: -4px; border-radius: 0.6875rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.sizing { --slide: 290px; --slide-active: 318px; --box: 312px; }
	.size-card__name { top: 2.5rem; font-size: 1.375rem; }
	.size-card__media { top: 4.75rem; width: 206px; height: 184px; margin-left: -103px; }
}

@media (max-width: 600px) {
	.sizing { --slide: 214px; --slide-active: 236px; --box: 230px; }
	.sizing .sizing__title { margin-bottom: 1.25rem; padding-top: 0; font-size: 2rem; line-height: 2.25rem; }
	.sizing__track { --pad: calc(1rem - (var(--slide-active) - var(--box)) / 2); padding-top: 0.5rem; }
	.size-card__name { top: 1.5rem; font-size: 1rem; line-height: 1.25rem; transform: translateY(5px) scale(0.78); }
	.size-card__media { top: 3.5rem; width: 188px; height: 156px; margin-left: -94px; }
	.size-card__box { border-radius: 0.875rem; }

	.sizing__body { margin-top: 1.75rem; }
	.size-table { font-size: 0.75rem; line-height: 1rem; }
	.size-table th,
	.size-table td { padding: 0 0.4375rem; }
	.size-table th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		min-width: 9.5rem;
		padding-left: 0.25rem;
		white-space: normal;
		background: var(--bg);
	}
	.size-table tbody th,
	.size-table tbody td { height: 2.75rem; }
	.unit-toggle { --w1: 92px; --w2: 96px; margin-top: 1.25rem; border-radius: 0.875rem; }
	.unit-toggle__pill { border-radius: 0.6875rem; }
	.unit-toggle__btn { height: 2.375rem; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
	.size-card,
	.size-card__box,
	.size-card__name,
	.size-card__media,
	.unit-toggle__pill,
	.unit-toggle__btn { transition: none; }
}