/* Card — cinque schede in una pagina. Ogni sezione ha il suo prefisso
   (.pop, .shop, .tilt, .pass, .tk) e usa solo le variabili di base.css. */

/* Colori che si possono animare: registrati come <color>, così il cambio di
   finitura sfuma invece di scattare. Dove @property manca, scatta e basta. */
@property --body { syntax: '<color>'; inherits: true; initial-value: #ff3b30; }
@property --cap { syntax: '<color>'; inherits: true; initial-value: #1a1a1a; }
@property --band { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --tint { syntax: '<color>'; inherits: true; initial-value: #ff3b30; }

.stage {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* ——— 1. Ritaglio che esce dalla cornice ——— */

.pop {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.25rem;
}
.pop__card {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	width: min(17rem, 100%);
	aspect-ratio: 5 / 7;
	perspective: 50rem;
	touch-action: pan-y;
}
.pop__shadow,
.pop__layer,
.pop__content {
	position: absolute;
	inset: 0;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, 0, var(--z, 0));
}
.pop__shadow {
	--z: -2rem;
	background: var(--photo) center / cover;
	filter: blur(1.5rem) saturate(0.9);
	opacity: 0.75;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, 2rem, var(--z));
}
.pop__layer {
	background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent 55%), var(--photo);
	background-size: cover;
	background-position: center;
}
.pop__cut {
	z-index: 2;
	/* 4rem verso chi guarda con prospettiva 50rem ingrandisce di 1/0,92:
	   lo scale lo compensa, così a riposo il ritaglio combacia con lo sfondo. */
	--z: 4rem;
	background: var(--cut) center / cover;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, 0, var(--z)) scale(0.92);
}
/* Cornice: una completa dietro il ritaglio, una davanti a cui manca il lato
   (o i lati) da cui il soggetto la scavalca. */
.pop__card::before,
.pop__card::after {
	content: '';
	position: absolute;
	inset: 1.5rem;
	border: 0.4rem solid var(--accent);
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, 0, 2rem) scale(0.96);
	pointer-events: none;
}
.pop__card::after {
	z-index: 1;
}
.pop__card::before {
	z-index: 3;
}
.pop__card.is-open-t::before {
	border-top-color: transparent;
}
.pop__card.is-open-l::before {
	border-left-color: transparent;
}
.pop__card.is-open-r::before {
	border-right-color: transparent;
}
.pop__content {
	--z: 6rem;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 3rem 2.5rem;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, 0, var(--z)) scale(0.89);
}
.pop__content h3 {
	font-size: 1.25rem;
	text-shadow: 0 0 1.5rem rgb(0 0 0 / 0.6);
}
.pop__content p {
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.45;
	text-shadow: 0 0 1.5rem rgb(0 0 0 / 0.7);
}

/* ——— 2. Scheda prodotto con finiture ——— */

.shop {
	--body: #ff3b30;
	--cap: #1a1a1a;
	--band: #000000;
	--tint: #ff3b30;
	--ink: #fff;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	width: min(48rem, 100%);
	transition:
		--body 0.45s var(--ease-out),
		--cap 0.45s var(--ease-out),
		--band 0.45s var(--ease-out),
		--tint 0.45s var(--ease-out);
}
.shop:has(input[name='finish'][data-name='Notte']:checked) {
	--body: #1f1f1f;
	--cap: #ff3b30;
	--band: #3a3a3a;
	--tint: #6a6a6a;
}
.shop:has(input[name='finish'][data-name='Oceano']:checked) {
	--body: #3b6ea8;
	--cap: #0f2038;
	--band: #1a3a63;
	--tint: #3b6ea8;
}
.shop:has(input[name='finish'][data-name='Salvia']:checked) {
	--ink: #000;
	--body: #7e9a7a;
	--cap: #25321f;
	--band: #c8d6c2;
	--tint: #7e9a7a;
}
.shop:has(input[name='finish'][data-name='Sabbia']:checked) {
	--ink: #000;
	--body: #d9c9ae;
	--cap: #3b2f22;
	--band: #a58b63;
	--tint: #d9c9ae;
}
.shop:has(input[name='finish'][data-name='Grafite']:checked) {
	--body: #6b6f72;
	--cap: #d9d9d9;
	--band: #3c3f41;
	--tint: #8a9094;
}

.shop__visual {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 1.25rem;
	background:
		radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 68%),
		var(--bg);
	border: 1px solid var(--line);
}
.shop__visual svg {
	height: 86%;
	width: auto;
	filter: drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / 0.45));
}

.shop__kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.shop h3 {
	margin-top: 0.25rem;
	font-size: clamp(1.75rem, 4vw, 2.25rem);
}
.shop__price {
	margin-top: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
}
.shop__price s {
	margin-left: 0.5rem;
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--muted);
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}
.shop__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin-top: 1.25rem;
}
.shop__tabs input,
.swatch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.shop__tabs label {
	padding-block: 0.35rem;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition:
		color 0.2s var(--ease-out),
		border-color 0.2s var(--ease-out);
}
.shop__tabs input:checked + label {
	color: var(--text);
	border-color: var(--accent);
}
.shop__tabs input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
	.shop__tabs input:not(:checked) + label:hover {
		color: var(--text);
	}
}
.shop__panels {
	display: grid;
	flex-basis: 100%;
	margin-top: 0.5rem;
}
.shop__panel {
	grid-area: 1 / 1;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #d4d4d4;
	opacity: 0;
	visibility: hidden;
	translate: 0 0.5rem;
	transition:
		opacity 0.25s var(--ease-out),
		translate 0.25s var(--ease-out),
		visibility 0s 0.25s;
}
.shop__panel--misure {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	gap: 1rem 1.5rem;
	align-content: start;
}
.shop__panel--misure dt {
	font-size: 0.75rem;
	color: var(--muted);
}
.shop__panel--misure dd {
	margin: 0;
}
.shop__panel--misure b {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
}
.shop:has(#tab-desc:checked) .shop__panel--desc,
.shop:has(#tab-misure:checked) .shop__panel--misure {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
}

.shop__finishes {
	margin-top: 1.25rem;
}
.shop__finishes legend {
	margin-bottom: 0.6rem;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
}
.shop__finishes legend span {
	color: var(--muted);
	font-weight: 400;
}
.swatch {
	position: relative;
	display: inline-block;
	width: 2.25rem;
	height: 2.25rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--sw);
	border: 2px solid var(--surface);
	box-shadow: 0 0 0 1px var(--line);
	cursor: pointer;
	transition:
		box-shadow 0.2s var(--ease-out),
		scale 0.2s var(--ease-out);
}
.swatch:has(input:checked) {
	box-shadow: 0 0 0 2px var(--text);
	scale: 1.1;
}
.swatch:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}
.swatch:active {
	scale: 0.95;
}

.shop__buy {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0.8rem 1.4rem;
	font: inherit;
	font-weight: 700;
	color: #000;
	background: #fff;
	border: 0;
	border-radius: 100vmax;
	cursor: pointer;
	transition:
		scale 0.15s var(--ease-out),
		background-color 0.2s var(--ease-out);
}
.shop__buy svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.shop__buy:active {
	scale: 0.97;
}
.shop__buy[aria-pressed='true'] {
	background: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
	.shop__buy:hover {
		background: #e6e6e6;
	}
}

/* ——— 3. Inclinazione con prodotto in rilievo ——— */

.tilts {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
}
.tilt {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	width: min(16rem, 100%);
	height: 22rem;
	border-radius: 1.5rem;
	border: 1px solid var(--line);
	background: radial-gradient(ellipse at right top, color-mix(in srgb, var(--c) 85%, transparent), var(--bg) 62%);
	transform: perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: scale 0.3s var(--ease-out);
	touch-action: pan-y;
}
.tilt__name,
.tilt__buy {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	opacity: 0;
	transition:
		opacity 0.3s var(--ease-out),
		translate 0.3s var(--ease-out);
}
.tilt__name {
	top: 1.5rem;
	font-size: 1.15rem;
	translate: 0 -0.5rem;
	transform: translateZ(4rem);
}
.tilt__disc {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11rem;
	aspect-ratio: 1;
	margin: -5.5rem 0 0 -5.5rem;
	border-radius: 50%;
	background: var(--c);
	transform: translateZ(0);
	transition: transform 0.4s var(--ease-out);
}
.tilt__bag {
	position: absolute;
	inset: 50% 0 auto;
	display: grid;
	place-items: center;
	margin-top: -7rem;
	transform: translateZ(0) rotate(-8deg);
	transition: transform 0.4s var(--ease-out);
}
.tilt__bag svg {
	width: 11.5rem;
	height: auto;
	filter: drop-shadow(0 1rem 1rem rgb(0 0 0 / 0.4));
}
.tilt__buy {
	left: 50%;
	right: auto;
	bottom: 1.5rem;
	translate: -50% 0.5rem;
	padding: 0.55rem 1.4rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #000;
	background: #fff;
	border: 0;
	border-radius: 100vmax;
	cursor: pointer;
	transform: translateZ(4rem);
}
.tilt__buy[aria-pressed='true'] {
	background: var(--accent);
}
.tilt:hover,
.tilt:focus-within {
	scale: 1.04;
}
.tilt:hover .tilt__name,
.tilt:focus-within .tilt__name,
.tilt:hover .tilt__buy,
.tilt:focus-within .tilt__buy {
	opacity: 1;
	translate: 0 0;
}
.tilt:hover .tilt__buy,
.tilt:focus-within .tilt__buy {
	translate: -50% 0;
}
.tilt:hover .tilt__disc,
.tilt:focus-within .tilt__disc {
	transform: translateZ(2rem);
}
.tilt:hover .tilt__bag,
.tilt:focus-within .tilt__bag {
	transform: translateZ(6rem) rotate(-8deg);
}
/* Sul touch non c'è un "sopra": nome e pulsante restano visibili. */
@media (hover: none) {
	.tilt__name,
	.tilt__buy {
		opacity: 1;
		translate: 0 0;
	}
	.tilt__buy {
		translate: -50% 0;
	}
}

/* ——— 4. Inclinazione con riflesso ——— */

.pass {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 30%;
	position: relative;
	width: min(24rem, 100%);
	aspect-ratio: 1.586;
	padding: 1.5rem;
	border-radius: 1.25rem;
	background:
		radial-gradient(circle at 100% 0, rgb(255 59 48 / 0.45), transparent 55%),
		linear-gradient(145deg, #2a2a2a, #0a0a0a);
	border: 1px solid rgb(255 255 255 / 0.12);
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.55);
	transform: perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry));
	touch-action: pan-y;
	overflow: hidden;
}
.pass::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / 0.28), transparent 45%);
	opacity: 0;
	transition: opacity 0.3s var(--ease-out);
	pointer-events: none;
}
.pass:hover::after {
	opacity: 1;
}
.pass__logo {
	width: 3.25rem;
	height: auto;
}
.pass__tag {
	position: absolute;
	top: 1.6rem;
	right: 1.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c9c9c9;
}
.pass__chip {
	position: absolute;
	left: 1.5rem;
	top: 4.9rem;
	width: 2.5rem;
	height: 1.9rem;
	border-radius: 0.4rem;
	background: linear-gradient(135deg, #e8d9a8, #a58b63);
}
.pass__num {
	position: absolute;
	left: 1.5rem;
	bottom: 3.6rem;
	font-family: var(--font-display);
	font-size: 1.3rem;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}
.pass__name {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	font-weight: 600;
}
.pass__since {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	font-size: 0.75rem;
	color: #c9c9c9;
}

/* ——— 5. Biglietto che esce dalla fessura ——— */

.tk {
	width: min(26.5rem, 100%);
}
.tk__slot {
	position: relative;
	z-index: 1;
	height: 6rem;
	background: #2b2b2b;
	border: 2px solid #333;
	border-radius: 1rem;
	box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 0.5);
}
.tk__hole {
	width: 90%;
	height: 1.6rem;
	margin: 1.25rem auto 0;
	background: #000;
	border: 1px solid #1b1b1b;
	border-radius: 100vmax;
	box-shadow: inset 0 0.3rem 0.5rem rgb(0 0 0 / 0.8);
}
/* Il biglietto parte dal centro della fessura: ciò che sta più su è tagliato. */
.tk__out {
	position: relative;
	z-index: 2;
	margin: -3.75rem 5% 0;
	clip-path: inset(0 -2rem -3rem -2rem);
}
.tk__paper {
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem;
	background: #fff;
	color: #4b5563;
	border-radius: 0 0 0.6rem 0.6rem;
	box-shadow: 0 0.4rem 1.5rem rgb(0 0 0 / 0.35);
	transition: translate 1.3s var(--ease-out);
}
.tk__paper::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3.5rem;
	background: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.2) 45%, transparent);
	pointer-events: none;
}
.tk.is-armed .tk__paper {
	translate: 0 -105%;
}
.tk.is-reset .tk__paper {
	transition: none;
}
.tk__title {
	position: relative;
	margin-bottom: 1.1rem;
	padding: 0.6rem 0;
	font-family: var(--font-text);
	font-size: 1.05rem;
	font-weight: 500;
	text-align: center;
	color: #1b1b1b;
}
.tk__title::before,
.tk__title::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: repeating-linear-gradient(90deg, #1b1b1b 0 8px, transparent 8px 16px);
}
.tk__title::before {
	top: 0;
}
.tk__title::after {
	bottom: 0;
}
.tk__amount {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.4rem;
}
.tk__amount span {
	font-weight: 700;
	color: #000;
}
.tk hr {
	height: 1px;
	margin: 0.75rem 0;
	border: 0;
	background: #ddd;
}
.tk__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tk__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid #eee;
}
.tk__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.tk__list li:nth-child(2) .tk__avatar {
	background: var(--accent);
	color: #000;
}
.tk__list li:nth-child(3) .tk__avatar {
	background: #8a8a8a;
	color: #000;
}
.tk__list li:nth-child(5) .tk__avatar {
	background: #d6d6d6;
	color: #000;
}
.tk__who {
	flex: 1;
	font-size: 0.9375rem;
}
.tk__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	font: inherit;
	font-size: 0.8125rem;
	color: #374151;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	cursor: pointer;
	transition:
		scale 0.15s var(--ease-out),
		background-color 0.2s var(--ease-out);
}
.tk__tag::before {
	content: '';
	width: 0.95rem;
	height: 0.95rem;
	background: currentColor;
	mask: var(--ic) center / contain no-repeat;
}
[data-paid='true'] .tk__tag {
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
}
[data-paid='true'] .tk__tag::before {
	color: #16a34a;
}
[data-paid='false'] .tk__tag {
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
[data-paid='false'] .tk__tag::before {
	color: #b45309;
}
.tk__tag:active {
	scale: 0.96;
}
@media (hover: hover) and (pointer: fine) {
	.tk__tag:hover {
		background: #f3f4f6;
	}
}
.tk__tag:focus-visible,
.tk__btn:focus-visible {
	outline-color: #1b1b1b;
}

.tk__status {
	margin-top: 1rem;
	padding: 1rem 1rem 1.1rem;
	border: 1px solid #ddd;
	border-radius: 0.9rem;
}
.tk__status-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.9375rem;
}
.tk__status-head b {
	font-weight: 600;
	text-transform: uppercase;
	color: #000;
}
.tk__track {
	position: relative;
	height: 6px;
	margin: 1.75rem 0.9rem 0.5rem;
	background: #eee;
	border-radius: 100vmax;
}
.tk__fill {
	height: 100%;
	width: var(--fill, 0%);
	background: #000;
	border-radius: inherit;
	transition: width 0.5s var(--ease-out);
}
.tk__cp {
	position: absolute;
	top: 50%;
	left: calc(var(--i) * 25%);
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	translate: -50% -50%;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 0.15);
}
.tk__cp svg {
	display: none;
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tk__cp i {
	display: none;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: #000;
}
.tk__cp[data-state='done'] svg {
	display: block;
	color: #16a34a;
}
.tk__cp[data-state='current'] i {
	display: block;
}
.tk__cp--stamp svg {
	display: block;
	color: #c4c4c4;
}
.tk__cp--stamp[data-state='done'] svg {
	color: #000;
}

.tk__actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.tk__btn {
	flex: 1;
	padding: 0.6rem 0;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 100vmax;
	box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 0.1);
	cursor: pointer;
	transition: scale 0.15s var(--ease-out);
}
.tk__btn--dark {
	color: #fff;
	background: #111827;
	border-color: #111827;
}
.tk__btn:active {
	scale: 0.97;
}
.tk__msg {
	min-height: 1.4em;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	text-align: center;
}

@media (max-width: 40rem) {
	.shop {
		grid-template-columns: 1fr;
	}
	.shop__visual {
		aspect-ratio: 4 / 3;
	}
}

/* Piede dello scontrino: il nostro simbolo, con l'anello bianco passato a nero sulla carta. */
.tk {
	--ink: #000;
}
.tk__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	padding-top: 1rem;
	background: repeating-linear-gradient(90deg, #1b1b1b 0 8px, transparent 8px 16px) top / 100% 1.5px no-repeat;
}
.tk__brand svg {
	width: 3rem;
	height: auto;
}
.tk__brand p {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: #6b7280;
}

@media (max-width: 30rem) {
	.stage--ticket {
		padding-inline: 0.5rem;
	}
	.tk__out {
		margin-inline: 3%;
	}
	.tk__status-head,
	.tk__btn {
		font-size: 0.8125rem;
	}
}