/**
 * DELTITECH size selector + size guide (v1.0.249)
 *
 * inc/dt-sizing.php renders it, assets/js/dt-size.js runs it. The help
 * center's language: a soft white card, an ink switch whose thumb glides
 * between systems, number tiles with the conversion beneath, spring motion
 * and the store green as the only accent.
 */

html body .dt-size,
html body .dt-size-guide {
	--sz-ink: #0a0c10;
	--sz-ink-2: #2b3038;
	--sz-text: #3a3f47;
	--sz-muted: #6b7280;
	--sz-faint: #a3a8b0;
	--sz-stone: #f2f4f7;
	--sz-line: rgba(10, 12, 16, 0.1);
	--sz-green: var(--dt-p-4cd964, #4cd964);
	--sz-green-rgb: var(--dt-p-4cd964-rgb, 76, 217, 100);
	--sz-green-deep: var(--dt-p-15803d, #15803d);
	--sz-amber: #f59e0b;
	--sz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sz-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--sz-ink-fill: linear-gradient(145deg, #2b3038 0%, #0a0c10 70%);
}

/* WooCommerce's own size row stays in the form, out of sight. A table
   holding nothing else goes too (its margin would leave a gap). */
html body.dt-size-on .variations_form table.variations tr:has(select[name*="shoe-size"]),
html body.dt-size-on .variations_form table.variations tr.dt-size-native-row,
html body.dt-size-on .variations_form table.variations:has(select[name*="shoe-size"]):not(:has(tr + tr)) {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Card
 * ---------------------------------------------------------------------- */
html body .dt-size {
	position: relative;
	margin: 0 0 18px !important;
	padding: 20px 20px 14px;
	border-radius: 24px;
	background: #fff;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 20, 40, 0.06), 0 1px 2px rgba(10, 20, 40, 0.04), 0 22px 50px -28px rgba(20, 40, 80, 0.28);
	color: var(--sz-ink);
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

html body .dt-size *,
html body .dt-size *::before,
html body .dt-size *::after {
	box-sizing: border-box;
}

html body .dt-size button {
	margin: 0;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

html body .dt-size button::before,
html body .dt-size button::after {
	animation: none;
}

/* "Choose your size" from the add to cart button: the card rings green and
   the tiles ripple once. */
html body .dt-size.is-prompt {
	animation: dt-size-ring 1.2s var(--sz-ease);
}

html body .dt-size.is-prompt .dt-size__opt:not(.is-out) {
	animation: dt-size-wave 0.62s var(--sz-ease) both;
	animation-delay: calc(var(--i, 0) * 22ms);
}

/* Head ---------------------------------------------------------------- */
html body .dt-size__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

html body .dt-size__heading {
	min-width: 0;
}

html body .dt-size .dt-size__title {
	margin: 0 !important;
	padding: 0;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--sz-ink) !important;
	text-transform: none !important;
}

html body .dt-size .dt-size__picked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	min-height: 18px;
	margin: 3px 0 0 !important;
	font-size: 13px;
	line-height: 1.35;
	color: var(--sz-muted);
}

html body .dt-size__picked b {
	font-weight: 600;
	color: var(--sz-ink);
	animation: dt-size-fade 0.35s var(--sz-ease);
}

html body .dt-size__picked span:not(.dt-size__picked-empty) {
	font-variant-numeric: tabular-nums;
	animation: dt-size-fade 0.35s var(--sz-ease);
}

html body .dt-size__picked i {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
}

html body .dt-size .dt-size__guide {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 13px 0 11px;
	border: 0;
	border-radius: 999px;
	background: var(--sz-stone);
	box-shadow: inset 0 0 0 1px rgba(10, 12, 16, 0.04);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--sz-ink);
	transition: background-color 0.3s var(--sz-ease), color 0.3s var(--sz-ease), transform 0.45s var(--sz-spring), box-shadow 0.3s var(--sz-ease);
}

html body .dt-size .dt-size__guide .dt-size__ic {
	width: 16px;
	height: 16px;
	transition: transform 0.5s var(--sz-spring);
}

html body .dt-size .dt-size__guide:active {
	transform: scale(0.95);
}

html body .dt-size .dt-size__guide:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.35);
}

@media (hover: hover) and (pointer: fine) {
	html body .dt-size .dt-size__guide:hover {
		background: var(--sz-ink);
		color: #fff;
	}

	html body .dt-size .dt-size__guide:hover .dt-size__ic {
		transform: rotate(-14deg) scale(1.06);
	}
}

/* Conversion switch ---------------------------------------------------- */
html body .dt-size__systems {
	position: relative;
	display: flex;
	gap: 2px;
	margin: 0 0 14px;
	padding: 4px;
	border-radius: 999px;
	background: var(--sz-stone);
	box-shadow: inset 0 1px 2px rgba(10, 12, 16, 0.05);
	overflow-x: auto;
	scrollbar-width: none;
	isolation: isolate;
}

html body .dt-size__systems::-webkit-scrollbar {
	display: none;
}

html body .dt-size__thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	z-index: 0;
	width: 0;
	border-radius: 999px;
	background: var(--sz-ink-fill);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -8px rgba(10, 12, 16, 0.55);
	opacity: 0;
	transition: transform 0.55s var(--sz-spring), width 0.45s var(--sz-ease), opacity 0.2s;
}

html body .dt-size__systems.is-ready .dt-size__thumb {
	opacity: 1;
}

html body .dt-size .dt-size__system {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--sz-muted);
	transition: color 0.3s var(--sz-ease);
}

/* Before the script places the thumb (or without it). */
html body .dt-size__systems:not(.is-ready) .dt-size__system.is-on {
	background: var(--sz-ink-fill);
}

html body .dt-size .dt-size__system.is-on {
	color: #fff;
}

html body .dt-size .dt-size__system:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.35);
}

@media (hover: hover) and (pointer: fine) {
	html body .dt-size .dt-size__system:not(.is-on):hover {
		color: var(--sz-ink);
	}
}

/* Size tiles ----------------------------------------------------------- */
html body .dt-size__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 8px;
}

html body .dt-size .dt-size__opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	height: 58px;
	padding: 0 4px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sz-line);
	color: var(--sz-ink);
	overflow: hidden;
	transition: transform 0.45s var(--sz-spring), box-shadow 0.3s var(--sz-ease), background-color 0.3s var(--sz-ease), color 0.3s var(--sz-ease);
}

/* The ink fill grows from the centre when a size is picked. */
html body .dt-size .dt-size__opt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--sz-ink-fill);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.3s var(--sz-ease), transform 0.5s var(--sz-spring);
}

html body .dt-size__num,
html body .dt-size__sub {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s var(--sz-ease);
}

html body .dt-size__num {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

html body .dt-size__sub {
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--sz-muted);
}

html body .dt-size__sub:empty {
	display: none;
}

/* Flag: green dot when picked, amber when few are left. */
html body .dt-size__flag {
	position: absolute;
	top: 7px;
	right: 7px;
	z-index: 1;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sz-green);
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.25s var(--sz-ease), transform 0.45s var(--sz-spring);
}

html body .dt-size .dt-size__opt.is-low .dt-size__flag {
	background: var(--sz-amber);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
	opacity: 1;
	transform: none;
}

html body .dt-size .dt-size__opt:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--sz-ink), 0 0 0 4px rgba(var(--sz-green-rgb), 0.3);
}

html body .dt-size .dt-size__opt:active:not(.is-out) {
	transform: scale(0.95);
	transition-duration: 0.12s;
}

@media (hover: hover) and (pointer: fine) {
	html body .dt-size .dt-size__opt:not(.is-out):not(.is-on):hover {
		transform: translateY(-2px);
		box-shadow: inset 0 0 0 1.5px var(--sz-ink), 0 12px 22px -14px rgba(10, 12, 16, 0.45);
	}
}

/* Picked. */
html body .dt-size .dt-size__opt.is-on {
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 26px -14px rgba(10, 12, 16, 0.65);
}

html body .dt-size .dt-size__opt.is-on::before {
	opacity: 1;
	transform: none;
}

html body .dt-size .dt-size__opt.is-on .dt-size__sub {
	color: rgba(255, 255, 255, 0.62);
}

html body .dt-size .dt-size__opt.is-on .dt-size__flag {
	background: var(--sz-green);
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.25);
	opacity: 1;
	transform: none;
}

html body .dt-size .dt-size__opt.is-pop {
	animation: dt-size-pop 0.5s var(--sz-spring);
}

/* Sold out: struck through, no lift. */
html body .dt-size .dt-size__opt.is-out {
	background: #fafbfc;
	box-shadow: inset 0 0 0 1px rgba(10, 12, 16, 0.06);
	color: var(--sz-faint);
	cursor: not-allowed;
}

html body .dt-size .dt-size__opt.is-out .dt-size__sub {
	color: #c4c8ce;
}

html body .dt-size .dt-size__opt.is-out::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 12%;
	right: 12%;
	z-index: 2;
	height: 1.5px;
	border-radius: 2px;
	background: rgba(10, 12, 16, 0.16);
	transform: rotate(-21deg);
}

html body .dt-size .dt-size__opt.is-nope {
	animation: dt-size-nope 0.4s var(--sz-ease);
}

/* Switching systems: values roll up and out, the new ones roll in. */
html body .dt-size__grid.is-rolling-out :is(.dt-size__num, .dt-size__sub) {
	opacity: 0;
	transform: translateY(-55%);
	filter: blur(3px);
	transition: opacity 0.16s var(--sz-ease), transform 0.17s var(--sz-ease), filter 0.16s var(--sz-ease);
	transition-delay: calc(var(--i, 0) * 6ms);
}

html body .dt-size__grid.is-rolling-in :is(.dt-size__num, .dt-size__sub) {
	animation: dt-size-roll 0.46s var(--sz-spring) both;
	animation-delay: calc(var(--i, 0) * 14ms);
}

/* Foot ----------------------------------------------------------------- */
html body .dt-size__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 30px;
	margin: 12px 0 0;
}

html body .dt-size__chart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--sz-muted);
}

html body .dt-size__chart-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sz-green);
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.18);
}

html body .dt-size .dt-size__clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--sz-ink);
	animation: dt-size-fade 0.3s var(--sz-ease);
	transition: background-color 0.25s var(--sz-ease), color 0.25s var(--sz-ease);
}

html body .dt-size .dt-size__clear[hidden] {
	display: none;
}

html body .dt-size .dt-size__clear .dt-size__ic {
	width: 14px;
	height: 14px;
	transition: transform 0.6s var(--sz-ease);
}

html body .dt-size .dt-size__clear:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.35);
}

@media (hover: hover) and (pointer: fine) {
	html body .dt-size .dt-size__clear:hover {
		background: var(--sz-stone);
	}

	html body .dt-size .dt-size__clear:hover .dt-size__ic {
		transform: rotate(-200deg);
	}
}

/* -------------------------------------------------------------------------
 * Size guide
 * ---------------------------------------------------------------------- */
html.dt-size-guide-open,
html.dt-size-guide-open body {
	overflow: hidden !important;
}

html body .dt-size-guide {
	position: fixed;
	inset: 0;
	z-index: 100090;
	display: grid;
	place-items: center;
	padding: 24px;
	font-family: inherit;
	color: var(--sz-ink);
}

html body .dt-size-guide[hidden] {
	display: none;
}

html body .dt-size-guide__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, 0.42);
	opacity: 0;
	transition: opacity 0.35s var(--sz-ease);
}

html body .dt-size-guide__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(82vh, 780px);
	border-radius: 28px;
	background: #fff;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 20, 40, 0.06), 0 40px 90px -30px rgba(10, 12, 16, 0.55);
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition: opacity 0.3s var(--sz-ease), transform 0.5s var(--sz-spring);
}

html body .dt-size-guide.is-open .dt-size-guide__scrim {
	opacity: 1;
}

html body .dt-size-guide.is-open .dt-size-guide__panel {
	opacity: 1;
	transform: none;
}

html body .dt-size-guide__grip {
	display: none;
}

html body .dt-size-guide__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 28px 14px;
}

html body .dt-size-guide .dt-size-guide__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sz-green-deep);
}

html body .dt-size-guide__eyebrow i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sz-green);
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.18);
}

html body .dt-size-guide .dt-size-guide__title {
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--sz-ink);
	text-transform: none;
}

html body .dt-size-guide__title span {
	color: var(--sz-faint);
}

html body .dt-size-guide .dt-size-guide__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sz-stone);
	color: var(--sz-ink);
	cursor: pointer;
	transition: background-color 0.3s var(--sz-ease), color 0.3s var(--sz-ease), transform 0.45s var(--sz-spring);
}

html body .dt-size-guide .dt-size-guide__close svg {
	width: 18px;
	height: 18px;
	transition: transform 0.45s var(--sz-spring);
}

html body .dt-size-guide .dt-size-guide__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--sz-green-rgb), 0.35);
}

@media (hover: hover) and (pointer: fine) {
	html body .dt-size-guide .dt-size-guide__close:hover {
		background: var(--sz-ink);
		color: #fff;
	}

	html body .dt-size-guide .dt-size-guide__close:hover svg {
		transform: rotate(90deg);
	}
}

html body .dt-size-guide__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 0 28px 14px;
	font-size: 12px;
	color: var(--sz-muted);
}

html body .dt-size-guide__legend span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

html body .dt-size-guide__legend i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--sz-ink);
}

html body .dt-size-guide__legend i.is-other {
	box-shadow: inset 0 0 0 1px rgba(10, 12, 16, 0.15);
	background: #fafbfc;
}

html body .dt-size-guide__legend i.is-on {
	background: var(--sz-ink);
	box-shadow: none;
}

html body .dt-size-guide__scroll {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 16px;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px rgba(10, 12, 16, 0.06);
}

html body .dt-size-guide__scroll:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(10, 12, 16, 0.06), 0 0 0 3px rgba(var(--sz-green-rgb), 0.3);
}

html body .dt-size-guide .dt-size-guide__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
	table-layout: fixed;
}

html body .dt-size-guide .dt-size-guide__table :is(th, td) {
	padding: 11px 8px;
	border: 0;
	background: transparent;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

html body .dt-size-guide .dt-size-guide__table th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding-top: 13px;
	padding-bottom: 13px;
	background: #fff;
	box-shadow: inset 0 -1px 0 rgba(10, 12, 16, 0.08);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sz-muted);
}

html body .dt-size-guide .dt-size-guide__short {
	display: none;
}

html body .dt-size-guide .dt-size-guide__table th.is-col {
	color: var(--sz-green-deep);
}

html body .dt-size-guide .dt-size-guide__table td {
	font-size: 14px;
	font-weight: 500;
	color: var(--sz-faint);
	transition: background-color 0.2s var(--sz-ease), color 0.2s var(--sz-ease);
}

html body .dt-size-guide .dt-size-guide__table td.is-col {
	background: rgba(var(--sz-green-rgb), 0.08);
}

html body .dt-size-guide .dt-size-guide__table tbody tr + tr td {
	box-shadow: inset 0 1px 0 rgba(10, 12, 16, 0.045);
}

html body .dt-size-guide .dt-size-guide__table tr.is-offered td {
	font-weight: 600;
	color: var(--sz-ink);
	cursor: pointer;
}

html body .dt-size-guide .dt-size-guide__table tr.is-out td {
	color: #c4c8ce;
	text-decoration: line-through;
	text-decoration-color: rgba(10, 12, 16, 0.2);
}

html body .dt-size-guide .dt-size-guide__table tr.is-offered:focus-visible {
	outline: none;
}

html body .dt-size-guide .dt-size-guide__table tr.is-offered:focus-visible td {
	background: rgba(var(--sz-green-rgb), 0.16);
}

@media (hover: hover) and (pointer: fine) {
	html body .dt-size-guide .dt-size-guide__table tr.is-offered:hover td {
		background: var(--sz-stone);
	}

	html body .dt-size-guide .dt-size-guide__table tr.is-offered:hover td.is-col {
		background: rgba(var(--sz-green-rgb), 0.16);
	}
}

html body .dt-size-guide .dt-size-guide__table tr.is-on td,
html body .dt-size-guide .dt-size-guide__table tr.is-on:hover td {
	background: var(--sz-ink);
	color: #fff;
	box-shadow: none;
}

html body .dt-size-guide .dt-size-guide__table tr.is-on td.is-col {
	background: #1d2a22;
	color: var(--sz-green);
}

html body .dt-size-guide__foot {
	display: grid;
	gap: 6px;
	padding: 14px 28px 22px;
}

html body .dt-size-guide .dt-size-guide__foot p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sz-muted);
}

html body .dt-size-guide__foot b {
	font-weight: 600;
	color: var(--sz-ink);
}

/* Phones: a bottom sheet with a grip; drag down to close (dt-size.js). */
@media (max-width: 767px) {
	html body .dt-size {
		padding: 16px 14px 10px;
		border-radius: 22px;
	}

	html body .dt-size__grid {
		grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
		gap: 7px;
	}

	html body .dt-size .dt-size__opt {
		height: 56px;
		border-radius: 13px;
	}

	html body .dt-size .dt-size__system {
		height: 34px;
		padding: 0 10px;
		font-size: 12.5px;
	}

	html body .dt-size .dt-size__guide span {
		font-size: 12px;
	}

	html body .dt-size-guide {
		place-items: end stretch;
		padding: 0;
	}

	html body .dt-size-guide__panel {
		width: 100%;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: 26px 26px 0 0;
		transform: translateY(100%);
		opacity: 1;
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	html body .dt-size-guide__grip {
		display: block;
		width: 40px;
		height: 5px;
		margin: 10px auto 0;
		border-radius: 999px;
		background: rgba(10, 12, 16, 0.14);
	}

	html body .dt-size-guide__head {
		padding: 14px 20px 12px;
	}

	html body .dt-size-guide__legend {
		padding: 0 20px 12px;
	}

	html body .dt-size-guide__scroll {
		margin: 0 10px;
	}

	html body .dt-size-guide .dt-size-guide__table :is(th, td) {
		padding: 10px 4px;
	}

	html body .dt-size-guide .dt-size-guide__table th {
		font-size: 10px;
		letter-spacing: 0.06em;
	}

	html body .dt-size-guide .dt-size-guide__long {
		display: none;
	}

	html body .dt-size-guide .dt-size-guide__short {
		display: inline;
	}

	html body .dt-size-guide .dt-size-guide__table td {
		font-size: 13px;
	}

	html body .dt-size-guide__foot {
		padding: 12px 20px calc(18px + env(safe-area-inset-bottom));
	}
}

/* Motion --------------------------------------------------------------- */
@keyframes dt-size-pop {
	0% { transform: scale(0.94); }
	55% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes dt-size-nope {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	50% { transform: translateX(3px); }
	75% { transform: translateX(-2px); }
}

@keyframes dt-size-roll {
	from {
		opacity: 0;
		transform: translateY(55%);
		filter: blur(3px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes dt-size-fade {
	from {
		opacity: 0;
		transform: translateY(3px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dt-size-ring {
	0% { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 20, 40, 0.06), 0 0 0 0 rgba(var(--sz-green-rgb), 0.5), 0 22px 50px -28px rgba(20, 40, 80, 0.28); }
	35% { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(var(--sz-green-rgb), 0.6), 0 0 0 7px rgba(var(--sz-green-rgb), 0.22), 0 22px 50px -28px rgba(20, 40, 80, 0.28); }
	100% { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 20, 40, 0.06), 0 0 0 14px rgba(var(--sz-green-rgb), 0), 0 22px 50px -28px rgba(20, 40, 80, 0.28); }
}

@keyframes dt-size-wave {
	0%, 100% { transform: none; }
	40% {
		transform: translateY(-3px);
		box-shadow: inset 0 0 0 1.5px rgba(var(--sz-green-rgb), 0.9), 0 10px 18px -12px rgba(var(--sz-green-rgb), 0.7);
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .dt-size *,
	html body .dt-size,
	html body .dt-size-guide * {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}