/* Topper4Cakes Hero */
.t4c-hero {
	width: 100%;
	margin: 0 0 24px;
	line-height: 0;
}
.t4c-hero__frame {
	position: relative;
	max-width: 1513px;
	margin: 0 auto;
}
.t4c-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Clickable areas — positions are % of the image so they scale with it */
.t4c-hero__spot {
	position: absolute;
	display: block;
	left: var(--l); top: var(--t); width: var(--w); height: var(--h);
	border-radius: 14px;
	transition: box-shadow .2s ease, background-color .2s ease;
}
.t4c-hero__spot:hover {
	background-color: rgba(255, 255, 255, .08);
	box-shadow: 0 0 0 3px rgba(233, 84, 140, .55);
}
.t4c-hero__spot:focus-visible {
	outline: 3px solid #e9548c;
	outline-offset: 2px;
}

/* Desktop: full 3-panel image (1513 × 1039) */
.t4c-hero__spot--main   { --l: 33.3%; --t: 0;     --w: 33%;   --h: 100%;  border-radius: 0; }
.t4c-hero__spot--rect   { --l: 72%;   --t: 23.1%; --w: 23.8%; --h: 18.8%; }
.t4c-hero__spot--square { --l: 72.2%; --t: 46.7%; --w: 23.7%; --h: 18.8%; }
.t4c-hero__spot--circle { --l: 72.6%; --t: 71.4%; --w: 23.6%; --h: 18.6%; }
.t4c-hero__spot--main:hover { box-shadow: none; background-color: rgba(255,255,255,.04); }

/* Mobile: cropped image (middle + right panel, 1010 × 1039) */
@media (max-width: 767px) {
	.t4c-hero__spot--main   { --l: 0;     --w: 49.6%; }
	.t4c-hero__spot--rect   { --l: 58.1%; --w: 35.6%; }
	.t4c-hero__spot--square { --l: 58.3%; --w: 35.4%; }
	.t4c-hero__spot--circle { --l: 58.9%; --w: 35.3%; }
	.t4c-hero__spot { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.t4c-hero__spot { transition: none; }
}

/* Fallback in case the theme lacks this class */
.t4c-hero .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}