/* TTS home: live WooCommerce product grid */
.tts-hp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tts-hp-pill {
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1px solid #E7E7E7;
	background: #FFFFFF;
	color: #141414;
	font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tts-hp-pill:hover {
	border-color: #141414;
}

.tts-hp-pill.is-active {
	background: #141414;
	border-color: #141414;
	color: #fff;
}

.tts-hp-pill:focus-visible,
.tts-hp-add:focus-visible,
.tts-hp-name a:focus-visible,
.tts-hp-more__btn:focus-visible {
	outline: 3px solid #E10600;
	outline-offset: 2px;
}

.tts-hp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.tts-hp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #E7E7E7;
	border-radius: 24px;
	padding: 12px;
	transition: box-shadow .25s ease, transform .25s ease;
}

.tts-hp-card[hidden] {
	display: none;
}

.tts-hp-card:hover {
	box-shadow: 0 18px 40px -18px rgba(17,17,17,.25);
	transform: translateY(-3px);
}

.tts-hp-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	overflow: hidden;
	background: #EDEDED;
}

.tts-hp-media img,
.tts-hp-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	margin: 0 !important;
	transition: transform .4s ease;
}

.tts-hp-card:hover .tts-hp-media img {
	transform: scale(1.04);
}

.tts-hp-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	font: 800 11px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: #141414;
	color: #fff;
}

.tts-hp-badge--hot {
	background: #E10600;
}

.tts-hp-badge--sale {
	background: #B00500;
}

.tts-hp-badge--tag {
	background: #E2E2E2;
	color: #141414;
}

.tts-hp-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 6px 4px;
}

.tts-hp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 500 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	color: #7A7671;
	margin-bottom: 10px;
}

.tts-hp-stars {
	display: inline-flex;
	gap: 2px;
}

.tts-hp-star {
	width: 15px;
	height: 15px;
	background: linear-gradient(90deg, #E10600 var(--fill), #DEDEDE var(--fill));
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.tts-hp-cat {
	margin: 0 0 4px;
	font: 700 11px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7A7671;
}

.tts-hp-name {
	margin: 0 0 14px;
	font: 700 18px/1.3 "Space Grotesk", system-ui, sans-serif;
	letter-spacing: -.01em;
}

.tts-hp-name a {
	color: #141414;
	text-decoration: none;
}

.tts-hp-name a:hover {
	color: #E10600;
}

.tts-hp-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px dashed #E7E7E7;
}

.tts-hp-price {
	font: 700 20px/1.2 "Space Grotesk", system-ui, sans-serif;
	color: #141414;
	font-variant-numeric: tabular-nums;
}

.tts-hp-price del {
	color: #7A7671;
	font-size: 14px;
	font-weight: 500;
	margin-left: 6px;
}

.tts-hp-price ins {
	text-decoration: none;
}

.tts-hp-add.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 18px !important;
	border-radius: 999px !important;
	border: 1px solid #E7E7E7 !important;
	background: #FFFFFF !important;
	color: #141414 !important;
	font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tts-hp-add.button:hover {
	background: #141414 !important;
	border-color: #141414 !important;
	color: #fff !important;
}

.tts-hp-add.loading {
	opacity: .6;
	pointer-events: none;
}

.tts-hp-add.added {
	background: #B00500 !important;
	border-color: #B00500 !important;
	color: #fff !important;
}

.tts-hp-card .added_to_cart {
	display: block;
	width: 100%;
	margin-top: 8px;
	font: 600 13px "Plus Jakarta Sans", system-ui, sans-serif;
	color: #B00500;
}

.tts-hp-none,
.tts-hp-empty p {
	width: 100%;
	text-align: center;
	padding: 32px 0;
	font: 500 16px "Plus Jakarta Sans", system-ui, sans-serif;
	color: #7A7671;
}

.tts-hp-more {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 32px;
}

.tts-hp-more__btn {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 32px;
	border-radius: 999px;
	background: #141414;
	color: #fff !important;
	font: 700 14px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease;
}

.tts-hp-more__btn:hover {
	background: #E10600;
}

@media (max-width: 1024px) {
	.tts-hp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.tts-hp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.tts-hp-card {
		padding: 8px;
		border-radius: 18px;
	}

	.tts-hp-name {
		font-size: 15px;
	}

	.tts-hp-price {
		font-size: 16px;
	}

	.tts-hp-add.button {
		width: 100%;
		justify-content: center;
	}

	.tts-hp-pill {
		min-height: 40px;
		padding: 0 16px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tts-hp-card,
	.tts-hp-media img {
		transition: none;
	}

	.tts-hp-card:hover,
	.tts-hp-card:hover .tts-hp-media img {
		transform: none;
	}
}

/* ---------- Hero (store scene, exact layout) ---------- */
.tts-hero {
	--h-ink: #141414;
	--h-coral: #E10600;
	--h-muted: #666666;
	position: relative;
	overflow: hidden;
	background: #F1F1F1;
}

.tts-hero__frame {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1672 / 940;
	width: 100%;
}

.tts-hero__scene {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.tts-hero__canvas {
	--mx: 0;
	--my: 0;
	position: absolute;
	inset: 0;
}

.tts-hero__world {
	position: absolute;
	inset: 0;
	transform-origin: 62% 50%;
	transform: translate(calc(var(--mx) * -8px), calc(var(--my) * -5px));
	animation: ttsWorldIn 1.2s cubic-bezier(.2, .8, .2, 1) both, ttsKenBurns 22s ease-in-out 1.2s infinite alternate;
}

.tts-hero__plate {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0 !important;
}

.tts-hero__glare {
	position: absolute;
	left: 59.5%;
	top: 7.4%;
	width: 16.2%;
	height: 5.4%;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 48%, rgba(17,17,17,.5) 52%, transparent 70%) 0 0 / 300% 100% no-repeat;
	mix-blend-mode: screen;
	animation: ttsGlare 6s ease-in-out 1.8s infinite;
	pointer-events: none;
}

.tts-hero__man {
	position: absolute;
	left: 56.519%;
	top: 13.617%;
	width: 15.849%;
	height: 81.596%;
	margin: 0 !important;
	transform-origin: 50% 100%;
	animation: ttsBreathe 4.8s ease-in-out 1.6s infinite alternate;
	pointer-events: none;
}

.tts-hero__card {
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	border-radius: 0.9cqw;
	filter: drop-shadow(0 1.2cqw 1.6cqw rgba(17,17,17,.18));
	translate: calc(var(--mx) * var(--z) * 18px) calc(var(--my) * var(--z) * 12px);
	animation: ttsCardIn .9s cubic-bezier(.34, 1.56, .64, 1) both, ttsCardFloat calc(3.8s + var(--d) * .29s) ease-in-out infinite alternate;
	animation-delay: calc(.35s + var(--d) * .07s), calc(1.4s + var(--d) * .23s);
	transition: scale .25s ease, filter .25s ease;
}

.tts-hero__card:hover {
	scale: 1.06;
	z-index: 5;
	filter: drop-shadow(0 1.8cqw 2.2cqw rgba(17,17,17,.28));
}

/* Copy, sized to the frame so it lines up with the picture */
.tts-hero__copy {
	position: absolute;
	z-index: 4;
	left: 3%;
	top: 21.6%;
	width: 31%;
}

.tts-hero__kicker {
	margin: 0 0 1.1cqw;
	font: 700 1.2cqw/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--h-coral);
	animation: ttsHeroUp .5s ease both;
}

.tts-hero__title {
	margin: 0 0 1.9cqw;
	font: 700 4.4cqw/1.02 "Space Grotesk", system-ui, sans-serif;
	letter-spacing: -.035em;
	color: var(--h-ink);
}

.tts-hero__line {
	display: block;
	overflow: hidden;
	padding-bottom: .06em;
}

.tts-hero__line > span {
	display: inline-block;
	animation: ttsHeroLine .9s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(.1s + var(--i) * .1s);
}

.tts-hero__lede {
	margin: 0 0 2.2cqw;
	max-width: 28cqw;
	font: 400 1.08cqw/1.6 "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--h-muted);
	animation: ttsHeroUp .6s ease .4s both;
}

.tts-hero__ctas {
	display: flex;
	gap: 1.3cqw;
	margin-bottom: 2.8cqw;
	animation: ttsHeroUp .6s ease .5s both;
}

.tts-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5cqw;
	min-height: 3.45cqw;
	padding: 0 1.8cqw;
	border-radius: .6cqw;
	font: 600 1.05cqw/1 "Plus Jakarta Sans", system-ui, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.tts-hero__btn svg {
	width: 1.1cqw;
	height: 1.1cqw;
	transition: transform .2s ease;
}

.tts-hero__btn:hover svg {
	transform: translateX(3px);
}

.tts-hero__btn:active {
	transform: scale(.97);
}

.tts-hero__btn:focus-visible {
	outline: 3px solid var(--h-coral);
	outline-offset: 3px;
}

.tts-hero__btn--primary {
	background: var(--h-coral);
	color: #fff !important;
	box-shadow: 0 .8cqw 1.6cqw -.8cqw rgba(17,17,17,.7);
}

.tts-hero__btn--primary:hover {
	background: #B00500;
}

.tts-hero__btn--ghost {
	background: #fff;
	border: 1px solid #DDDDDD;
	color: var(--h-ink) !important;
}

.tts-hero__btn--ghost:hover {
	border-color: var(--h-ink);
}

.tts-hero__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2cqw;
	animation: ttsHeroFade .6s ease .65s both;
}

.tts-hero__facts li {
	display: flex;
	align-items: flex-start;
	gap: .6cqw;
	margin: 0;
	max-width: 10.5cqw;
	font: 500 .88cqw/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
	color: #373737;
}

.tts-hero__facts svg {
	width: 1.4cqw;
	height: 1.4cqw;
	color: var(--h-coral);
	flex: none;
}

@keyframes ttsHeroUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes ttsHeroFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ttsHeroLine {
	from { transform: translateY(105%); }
	to { transform: translateY(0); }
}

@keyframes ttsWorldIn {
	from { opacity: 0; scale: 1.05; }
	to { opacity: 1; scale: 1; }
}

@keyframes ttsKenBurns {
	from { scale: 1; }
	to { scale: 1.025; }
}

@keyframes ttsGlare {
	0%, 55% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

@keyframes ttsBreathe {
	from { scale: 1 1; }
	to { scale: 1.003 1.006; }
}

@keyframes ttsCardIn {
	from { transform: translateY(1.4cqw) scale(.94); }
	to { transform: none; }
}

@keyframes ttsCardFloat {
	from { margin-top: 0; }
	to { margin-top: -0.9cqw; }
}

/* Tablet & phone: text first, then the store scene */
@media (max-width: 921px) {
	.tts-hero__frame {
		aspect-ratio: auto;
		container-type: normal;
	}

	.tts-hero__copy {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		padding: 28px 20px 8px;
	}

	.tts-hero__kicker {
		margin-bottom: 14px;
		font-size: 15px;
	}

	.tts-hero__title {
		margin-bottom: 16px;
		font-size: clamp(40px, 10vw, 64px);
	}

	.tts-hero__lede {
		max-width: 46ch;
		margin-bottom: 22px;
		font-size: 16px;
	}

	.tts-hero__ctas {
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 24px;
	}

	.tts-hero__btn {
		min-height: 52px;
		padding: 0 24px;
		gap: 8px;
		border-radius: 10px;
		font-size: 16px;
	}

	.tts-hero__btn svg {
		width: 18px;
		height: 18px;
	}

	.tts-hero__facts {
		flex-wrap: wrap;
		gap: 12px 22px;
	}

	.tts-hero__facts li {
		max-width: none;
		align-items: center;
		gap: 8px;
		font-size: 14px;
	}

	.tts-hero__facts svg {
		width: 20px;
		height: 20px;
	}

	.tts-hero__scene {
		position: relative;
		inset: auto;
		container-type: inline-size;
		aspect-ratio: 1132 / 940;
	}

	.tts-hero__canvas {
		width: 147.7%;
		left: -47.7%;
		right: auto;
	}
}

@media (max-width: 544px) {
	.tts-hero__copy {
		padding: 24px 16px 4px;
	}

	.tts-hero__btn {
		flex: 1 1 100%;
	}

	.tts-hero__facts {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tts-hero *,
	.tts-hero *::before,
	.tts-hero *::after {
		transition: none !important;
		animation: none !important;
	}
}

body.page-id-131 .tts-global-header {
	margin-bottom: 0;
}