/**
 * Teddy's Place design-system components.
 * Reusable bespoke components for the Teddy's Place Avada child theme.
 */

/* =========================================================
   HERO FOLD STICKER
   Decorative SVG overlapping the hero and following section
   ========================================================= */

.tp-sticker-hero {
	position: relative !important;
	z-index: 3;
	overflow: visible !important;
}

.tp-sticker-hero::after {
	content: "";
	position: absolute;
	right: clamp(28px, 6vw, 110px);
	bottom: clamp(-94px, -6.5vw, -62px);
	z-index: 30;

	display: block;
	width: clamp(180px, 18vw, 285px);
	aspect-ratio: 1 / 1;

	background-image: url("../images/teddys-original-sticker.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	pointer-events: none;
	user-select: none;
}


/* =========================================================
   HERO FOLD STICKER — TABLET
   Balanced overlap for intermediate viewport widths
   ========================================================= */

@media only screen and (max-width: 1024px) {
	.tp-sticker-hero::after {
		right: clamp(20px, 4vw, 48px);
		bottom: -72px;
		width: clamp(160px, 22vw, 210px);
	}
}


/* =========================================================
   HERO FOLD STICKER — MOBILE
   Compact right-aligned sticker crossing the section fold
   ========================================================= */

@media only screen and (max-width: 640px) {
	.tp-sticker-hero::after {
		right: 14px;
		bottom: -58px;
		width: clamp(138px, 40vw, 158px);
	}
}


/* =========================================================
   TEDDY'S USP GRID
   Theme HQ-controlled two-column callout grid
   ========================================================= */

.tp-usps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--tp-usp-col-gap-desktop, 76px);
	row-gap: var(--tp-usp-row-gap-desktop, 24px);
	align-items: center;
	width: 100%;
	container-type: inline-size;
}

.tp-usp {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--tp-usp-item-gap-desktop, 24px);
	min-width: 0;
}

.tp-usp--icon-hidden,
.tp-usps--icons-hidden .tp-usp {
	grid-template-columns: minmax(0, 1fr);
}

.tp-usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tp-usp-icon-size-desktop, 64px);
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	background: var(--tp-usp-icon-bg, #e5d5c0);
	border: var(--tp-usp-icon-border-desktop, 2px) solid var(--tp-usp-icon-border-color, #211815);
	border-radius: 50%;
}

.tp-usp__icon img {
	display: block;
	width: var(--tp-usp-artwork-desktop, 42%);
	max-height: var(--tp-usp-artwork-desktop, 42%);
	height: auto;
	object-fit: contain;
}

.tp-usp__label {
	display: block;
	min-width: 0;
	color: var(--tp-usp-label-color, #211815);
	font-family: "Source Sans 3", sans-serif;
	font-size: var(--tp-usp-label-size-desktop, 18px);
	font-weight: var(--tp-usp-label-weight, 700);
	line-height: 1;
	letter-spacing: var(--tp-usp-label-track-desktop, .18em);
	text-transform: uppercase;
	white-space: nowrap;
}

@media only screen and (max-width: 1024px) {
	.tp-usps {
		column-gap: var(--tp-usp-col-gap-tablet, 48px);
		row-gap: var(--tp-usp-row-gap-tablet, 22px);
	}

	.tp-usp {
		column-gap: var(--tp-usp-item-gap-tablet, 16px);
	}

	.tp-usp__icon {
		width: var(--tp-usp-icon-size-tablet, 60px);
		border-width: var(--tp-usp-icon-border-tablet, 2px);
	}

	.tp-usp__icon img {
		width: var(--tp-usp-artwork-tablet, 42%);
		max-height: var(--tp-usp-artwork-tablet, 42%);
	}

	.tp-usp__label {
		font-size: var(--tp-usp-label-size-tablet, 18px);
		letter-spacing: var(--tp-usp-label-track-tablet, .18em);
	}
}

@media only screen and (max-width: 640px) {
	.tp-usps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--tp-usp-col-gap-mobile, 8px);
		row-gap: var(--tp-usp-row-gap-mobile, 18px);
	}

	.tp-usp {
		grid-template-columns: var(--tp-usp-icon-size-mobile, 38px) minmax(0, 1fr);
		column-gap: var(--tp-usp-item-gap-mobile, 6px);
	}

	.tp-usp--icon-hidden,
	.tp-usps--icons-hidden .tp-usp {
		grid-template-columns: minmax(0, 1fr);
	}

	.tp-usp__icon {
		width: var(--tp-usp-icon-size-mobile, 38px);
		border-width: var(--tp-usp-icon-border-mobile, 1.5px);
	}

	.tp-usp__icon img {
		width: var(--tp-usp-artwork-mobile, 46%);
		max-height: var(--tp-usp-artwork-mobile, 46%);
	}

	.tp-usp__label {
		font-size: var(--tp-usp-label-size-mobile, 11.5px);
		letter-spacing: var(--tp-usp-label-track-mobile, .095em);
	}
}

/* =========================================================
   TEDDY'S SPACES & SETS
   Editable reference-proportioned card carousel via [teddys_spaces]
   ========================================================= */

.tp-spaces,
.tp-spaces *,
.tp-spaces *::before,
.tp-spaces *::after {
	box-sizing: border-box;
}

.tp-spaces {
	--tp-spaces-gap: clamp(16px, 1.6vw, 24px);
	position: relative;
	width: 100%;
	min-width: 0;
	color: var(--tp-ink, #211815);
}

.tp-spaces__stage {
	position: relative;
	min-width: 0;
}

.tp-spaces__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}

.tp-spaces__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding-bottom: 4px;
}

.tp-spaces__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: var(--tp-light-cream, #f2e4d1);
	color: var(--tp-ink, #211815);
	border: 2px solid var(--tp-ink, #211815);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--tp-ink, #211815);
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}

.tp-spaces__control svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tp-spaces__control:hover:not(:disabled),
.tp-spaces__control:focus-visible:not(:disabled) {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--tp-ink, #211815);
}

.tp-spaces__control:active:not(:disabled) {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--tp-ink, #211815);
}

.tp-spaces__control:disabled {
	opacity: 0.32;
	cursor: default;
}

.tp-spaces--static .tp-spaces__controls {
	visibility: hidden;
}

.tp-spaces__viewport {
	position: relative;
	min-width: 0;
}

.tp-spaces__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(220px, calc((100% - (var(--tp-spaces-gap) * 4)) / 5), 300px);
	gap: var(--tp-spaces-gap);
	width: 100%;
	min-width: 0;
	padding: 4px 9px 15px 2px;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tp-spaces__track::-webkit-scrollbar {
	display: none;
}

.tp-space-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
	height: auto;
	min-width: 0;
	padding: clamp(10px, 0.9vw, 14px);
	background: var(--tp-light-cream, #f2e4d1);
	color: var(--tp-ink, #211815);
	border: 2px solid var(--tp-ink, #211815);
	border-radius: clamp(14px, 1.1vw, 18px);
	box-shadow: 4px 4px 0 var(--tp-ink, #211815);
	overflow: visible;
	scroll-snap-align: start;
	text-decoration: none !important;
	transform: translateZ(0);
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-space-card__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--tp-tan, #cfbeaa);
	border: 1.5px solid color-mix(in srgb, var(--tp-ink, #211815) 55%, transparent);
	border-radius: clamp(10px, 0.9vw, 14px);
	overflow: hidden;
}

.tp-space-card__image,
.tp-space-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.tp-space-card__image {
	object-fit: cover;
	object-position: center;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-space-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18%;
	color: var(--tp-ink, #211815);
	font-family: "Source Sans 3", sans-serif;
	font-size: 10px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

.tp-space-card__label {
	position: absolute;
	left: clamp(7px, 0.7vw, 10px);
	bottom: clamp(7px, 0.7vw, 10px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - 14px);
	padding: 5px 10px;
	background: var(--tp-seafoam, #b7d5bf);
	color: var(--tp-white, #fffaf0);
	border: 1.5px solid var(--tp-ink, #211815);
	border-radius: 999px;
	font-family: "Source Sans 3", sans-serif;
	font-size: var(--tp-space-card-label-size-desktop, 10px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tp-space-card__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
	min-height: clamp(60px, 5.5vw, 82px);
	gap: var(--tp-space-card-row-gap-desktop, 5px);
	padding: var(--tp-space-card-media-gap-desktop, 10px) 0 0;
	overflow: visible;
}

.tp-space-card__title {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	color: var(--tp-red, #b6402f);
	font-family: "Source Sans 3", sans-serif;
	font-size: var(--tp-space-card-title-size-desktop, 16px) !important;
	font-weight: 900;
	line-height: 0.98 !important;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
}

.tp-space-card__caption {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	color: var(--tp-ink, #211815);
	font-family: "Source Sans 3", sans-serif;
	font-size: var(--tp-space-card-caption-size-desktop, 11px);
	font-weight: 700;
	line-height: 1.16 !important;
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
}

.tp-spaces__empty {
	margin: 0;
	padding: 20px;
	background: var(--tp-light-cream, #f2e4d1);
	border: 2px dashed var(--tp-ink, #211815);
	border-radius: 14px;
	font-family: "Source Sans 3", sans-serif;
	font-weight: 700;
}


/* =========================================================
   TEDDY'S SPACES & SETS — DESKTOP SIDE CONTROLS
   Carousel arrows flank the card row without adding vertical space
   ========================================================= */

@media (min-width: 1025px) {
	.tp-spaces__stage {
		--tp-spaces-control-outset: min(76px, max(0px, calc((100vw - 100%) / 2 - 10px)));
	}

	.tp-spaces__toolbar {
		position: absolute;
		inset: 0;
		z-index: 12;
		display: block;
		margin: 0;
		pointer-events: none;
	}

	.tp-spaces__controls {
		position: absolute;
		top: 50%;
		left: calc(-1 * var(--tp-spaces-control-outset));
		right: calc(-1 * var(--tp-spaces-control-outset));
		display: flex;
		justify-content: space-between;
		gap: 0;
		padding: 0;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.tp-spaces__control {
		pointer-events: auto;
	}
}


/* =========================================================
   TEDDY'S SPACES & SETS — DESKTOP EDGE FADES
   Soft continuation cues at the constrained carousel edges
   ========================================================= */

@media (min-width: 1025px) {
	.tp-spaces__viewport::before,
	.tp-spaces__viewport::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 12px;
		z-index: 6;
		width: clamp(26px, 3vw, 48px);
		pointer-events: none;
		opacity: 0;
		transition: opacity 180ms ease;
	}

	.tp-spaces__viewport::before {
		left: 0;
		background: linear-gradient(to right, var(--tp-spaces-fade-color, #f7f2e7) 0%, transparent 100%);
	}

	.tp-spaces__viewport::after {
		right: 0;
		background: linear-gradient(to left, var(--tp-spaces-fade-color, #f7f2e7) 0%, transparent 100%);
	}

	.tp-spaces--can-scroll-prev .tp-spaces__viewport::before,
	.tp-spaces--can-scroll-next .tp-spaces__viewport::after {
		opacity: 1;
	}
}


/* =========================================================
   TEDDY'S SPACES & SETS — DESKTOP INTERACTION
   Subtle hard-shadow lift for linked cards only
   ========================================================= */

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	.tp-space-card--linked:hover,
	.tp-space-card--linked:focus-visible {
		transform: translate(-3px, -5px) scale(1.012);
		box-shadow: 8px 10px 0 var(--tp-ink, #211815);
		outline: none;
	}

	.tp-space-card--linked:hover .tp-space-card__image,
	.tp-space-card--linked:focus-visible .tp-space-card__image {
		transform: scale(1.025);
	}
}


/* =========================================================
   TEDDY'S SPACES & SETS — TABLET
   Three-card horizontal track with a clear continuation cue
   ========================================================= */

@media (max-width: 1024px) {
	.tp-spaces {
		--tp-spaces-gap: 18px;
	}

	.tp-spaces__track {
		grid-auto-columns: 31%;
	}

	.tp-space-card__label {
		font-size: var(--tp-space-card-label-size-tablet, 9px);
	}

	.tp-space-card__title {
		font-size: var(--tp-space-card-title-size-tablet, 15px) !important;
	}

	.tp-space-card__body {
		min-height: 68px;
		gap: var(--tp-space-card-row-gap-tablet, 5px);
		padding-top: var(--tp-space-card-media-gap-tablet, 9px);
	}

	.tp-space-card__caption {
		font-size: var(--tp-space-card-caption-size-tablet, 10px);
	}
}


/* =========================================================
   TEDDY'S SPACES & SETS — MOBILE
   One complete card plus a visible slice of the next card
   ========================================================= */

@media (max-width: 640px) {
	.tp-spaces {
		--tp-spaces-gap: 14px;
		width: 100vw;
		max-width: none;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}

	.tp-spaces__toolbar,
	.tp-spaces__controls {
		display: none;
	}

	.tp-spaces__track {
		grid-auto-columns: clamp(210px, 64vw, 260px);
		padding: 3px 16px 12px;
		scroll-padding-inline: 16px;
	}

	.tp-space-card {
		padding: 10px;
		border-radius: 14px;
		box-shadow: 3px 3px 0 var(--tp-ink, #211815);
	}

	.tp-space-card__media {
		border-radius: 10px;
	}

	.tp-space-card__label {
		left: 7px;
		bottom: 7px;
		padding: 4px 8px;
		font-size: var(--tp-space-card-label-size-mobile, 8px);
	}

	.tp-space-card__body {
		min-height: 68px;
		gap: var(--tp-space-card-row-gap-mobile, 4px);
		padding: var(--tp-space-card-media-gap-mobile, 8px) 0 0;
	}

	.tp-space-card__title {
		font-size: var(--tp-space-card-title-size-mobile, 14px) !important;
		line-height: 1 !important;
	}

	.tp-space-card__caption {
		margin-top: 0 !important;
		font-size: var(--tp-space-card-caption-size-mobile, 10px);
		line-height: 1.15 !important;
	}
}


/* =========================================================
   REDUCED MOTION
   Accessibility preference for carousel and card interactions
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.tp-spaces__track {
		scroll-behavior: auto;
	}

	.tp-space-card,
	.tp-space-card__image,
	.tp-spaces__control {
		transition: none !important;
	}
}

/* =========================================================
   TEDDY'S USP GRID — WRAPPER RESET
   Prevent Avada shortcode/text wrappers from drawing a frame
   around the callout component on the front end.
   ========================================================= */

.tp-usps,
.tp-usps::before,
.tp-usps::after {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background-clip: border-box;
}

.fusion-text:has(> .tp-usps),
.fusion-text:has(.tp-usps),
.fusion-code-block:has(.tp-usps),
.fusion-builder-code-block:has(.tp-usps),
p:has(> .tp-usps) {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* =========================================================
   TEDDY'S SPACES & SETS — CLEAN IMAGE + COPY CARDS
   Intentionally removes all outer-card chrome while preserving
   the existing carousel, links, image loading and card content.
   ========================================================= */

.tp-space-card {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	transform: none !important;
	transition: none !important;
}

.tp-space-card__media {
	aspect-ratio: var(--tp-space-card-image-aspect-ratio, 1 / 1);
	background: var(--tp-light-cream, #f2e4d1);
	border: var(--tp-space-card-image-border-width, 0px) solid var(--tp-space-card-image-border-color, #211815) !important;
	border-radius: 0 !important;
}

.tp-space-card__label {
	display: none !important;
}

.tp-space-card__body {
	flex: 0 0 auto;
	min-height: 0 !important;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.tp-space-card__title {
	font-family: var(--tp-space-card-title-font, "Source Sans 3", sans-serif) !important;
	font-weight: var(--tp-space-card-title-weight, 700) !important;
	line-height: 1.05 !important;
	letter-spacing: var(--tp-space-card-title-letter-spacing, 0.055em);
}

.tp-space-card__caption {
	font-family: var(--tp-space-card-caption-font, "Source Sans 3", sans-serif) !important;
	font-weight: var(--tp-space-card-caption-weight, 700) !important;
	line-height: 1.18 !important;
	letter-spacing: var(--tp-space-card-caption-letter-spacing, 0em);
}

.tp-space-card--linked:hover,
.tp-space-card--linked:focus-visible {
	box-shadow: none !important;
	transform: none !important;
}

.tp-space-card--linked:hover .tp-space-card__image,
.tp-space-card--linked:focus-visible .tp-space-card__image {
	transform: none !important;
}

.tp-space-card--linked:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

@media (max-width: 640px) {
	.tp-space-card {
		padding: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.tp-space-card__media {
		border-radius: 0 !important;
	}
}

/* =========================================================
   TEDDY'S SPACES & SETS — COMPONENT FRAME RESET
   Prevent Avada or shortcode wrappers from drawing an outer
   border around the carousel. Image-border controls remain intact.
   ========================================================= */

.tp-spaces,
.tp-spaces__stage,
.tp-spaces__viewport,
.tp-spaces__track {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.fusion-text:has(> .tp-spaces),
.fusion-text:has(.tp-spaces),
.fusion-code-block:has(> .tp-spaces),
.fusion-code-block:has(.tp-spaces),
.fusion-builder-code-block:has(> .tp-spaces),
.fusion-builder-code-block:has(.tp-spaces),
p:has(> .tp-spaces) {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* =========================================================
   TEDDY'S SPACES & SETS — QUIET DESKTOP NAVIGATION
   Keeps the existing carousel controls and click targets while
   reducing them to clean, unframed chevrons on desktop only.
   ========================================================= */

@media (min-width: 1025px) {
	.tp-spaces__control {
		width: 44px;
		height: 52px;
		aspect-ratio: auto;
		padding: 0;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		transform: none !important;
		transition: opacity 180ms ease !important;
	}

	.tp-spaces__control svg {
		width: 28px;
		height: 28px;
		stroke-width: 1.8;
	}

	.tp-spaces__control:hover:not(:disabled) {
		opacity: 0.58;
		transform: none !important;
		box-shadow: none !important;
	}

	.tp-spaces__control:focus-visible:not(:disabled) {
		opacity: 1;
		outline: 2px solid currentColor;
		outline-offset: 2px;
		transform: none !important;
		box-shadow: none !important;
	}

	.tp-spaces__control:active:not(:disabled) {
		opacity: 0.38;
		transform: none !important;
		box-shadow: none !important;
	}

	.tp-spaces__control:disabled {
		opacity: 0.18;
	}
}

/* =========================================================
   TEDDY'S SPACES & SETS — DESKTOP MATERIAL ARROWS
   Uses the supplied left-arrow SVG for both directions. The next
   icon is mirrored. Enabled icons stay Teddy red; disabled icons
   simply become grey with no additional treatment.
   ========================================================= */

.tp-spaces__arrow--desktop {
	display: none !important;
}

@media (min-width: 1025px) {
	.tp-spaces__arrow--mobile {
		display: none !important;
	}

	.tp-spaces__arrow--desktop {
		display: block !important;
		width: 36px !important;
		height: 36px !important;
		fill: currentColor !important;
		stroke: none !important;
		transform-origin: 50% 50%;
	}

	.tp-spaces__control--next .tp-spaces__arrow--desktop {
		transform: rotate(180deg);
	}

	.tp-spaces__control,
	.tp-spaces__control:hover:not(:disabled),
	.tp-spaces__control:active:not(:disabled) {
		color: #B6402F !important;
		opacity: 1 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
	}

	.tp-spaces__control:focus-visible:not(:disabled) {
		color: #B6402F !important;
		opacity: 1 !important;
		background: transparent !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
	}

	.tp-spaces__control:disabled {
		color: #AAA4A1 !important;
		opacity: 1 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
		cursor: default;
	}
}