/**
 * Footer design: Hotline — .esptb-ft-hotline
 *
 * A centred, call-first footer. The contact desk: kicker, the phone number
 * huge in the display font (tap to call) beside a ringing phone badge, the
 * help text, the opening hours as pills, the call + WhatsApp buttons and a
 * quiet row with the other ways to reach the shop. Then the brand block:
 * the logo on a hairline divider, the about text, one inline row of links
 * and the socials. A centred bottom bar closes it; its back-to-top button
 * rides on the divider.
 *
 * Every colour, font and size comes from the kit tokens (the theme's
 * settings) unless the block sets its own, so it reads in every tone.
 */

/* ------------------------------------------------------------------ body */

/* Room for the back-to-top disc that sits on the bottom divider. */
.espt-block-footer .esptb-ft-hotline:has(.esptb-ft-totop) .esptb-ft-hl-body {
	padding-bottom: calc(var(--ft-pad, var(--fk-pad-r)) + 10px);
}

/* ---------------------------------------------------------- contact desk */

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hero {
	align-items: center;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 14px;
	isolation: isolate;
	position: relative;
	text-align: center;
}

/* A soft spotlight of the accent behind the number — it fades out inside
   its own box, so no edge ever shows. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hero::before {
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ftc-accent) 14%, transparent), transparent);
	content: "";
	height: min(100%, 340px);
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 0;
	translate: -50% 0;
	width: min(100%, 760px);
	z-index: -1;
}

/* Kicker: the help band title as a small live pill. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-kicker {
	align-items: center;
	background: var(--ftc-accent-soft);
	border: 1px solid color-mix(in srgb, var(--ftc-accent) 30%, transparent);
	border-radius: 999px;
	color: var(--ftc-accent-ink);
	display: inline-flex;
	font-family: var(--fk-display);
	font-weight: 700;
	gap: 10px;
	line-height: 1.35;
	max-width: 100%;
	padding: 7px 18px 7px 14px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-kicker > span:last-child { min-width: 0; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-dot {
	background: var(--ftc-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ftc-accent) 24%, transparent);
	flex: none;
	height: 8px;
	width: 8px;
}

/* The number — huge, in the heading font, the whole row taps to call. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-num {
	align-items: center;
	border-radius: 14px;
	color: var(--ftc-heading);
	display: inline-flex;
	font-family: var(--fk-display);
	font-size: clamp(32px, 9vw, 72px);
	font-size: clamp(32px, 10.5cqi, 72px);
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 800;
	gap: 0.3em;
	justify-content: center;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 6px 0 0;
	max-width: 100%;
	min-height: 44px; /* the main tap target, even when the number shrinks on small phones */
}

.espt-block-footer .esptb-ft-hotline a.esptb-ft-hl-num:hover { color: var(--ftc-link-h); }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-digits { min-width: 0; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring {
	align-items: center;
	background: var(--ftc-fill);
	border-radius: 50%;
	color: var(--ftc-on-fill);
	display: inline-flex;
	flex: none;
	height: calc(0.58em + 14px);
	justify-content: center;
	position: relative;
	transition: transform 0.2s ease;
	width: calc(0.58em + 14px);
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring .esptb-ft-ic svg {
	height: calc(0.24em + 8px);
	width: calc(0.24em + 8px);
}

/* Two rings ripple out of the badge, like a phone that is ringing. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring::before,
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring::after {
	/* One "ring, ring" on arrival (under five seconds), then still. */
	animation: esptb-ft-hl-ping 3s cubic-bezier(0.2, 0.6, 0.3, 1) 1;
	border: 2px solid var(--ftc-fill);
	border-radius: 50%;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring::after { animation-delay: 1.5s; }

.espt-block-footer .esptb-ft-hotline a.esptb-ft-hl-num:hover .esptb-ft-hl-ring { transform: scale(1.06); }

@keyframes esptb-ft-hl-ping {
	0% {
		opacity: 0.55;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-text {
	font-size: 1.06em;
	line-height: 1.65;
	max-width: 60ch;
	text-wrap: balance;
}

/* Opening hours: one pill per line of days. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hours {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 2px;
	max-width: 100%;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hours li {
	align-items: center;
	background: var(--ftc-soft);
	border: 0;
	border-radius: 999px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 8px;
	justify-content: center;
	line-height: 1.4;
	max-width: 100%;
	min-height: 38px;
	padding: 7px 16px 7px 12px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hours li::before {
	background: var(--ftc-accent-ink);
	content: "";
	flex: none;
	height: 15px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 15px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hours .esptb-ft-hours-d {
	color: var(--ftc-muted);
	font-weight: 500;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hours .esptb-ft-hours-t {
	color: var(--ftc-heading);
	font-weight: 700;
	text-align: center;
}

/* Call + WhatsApp: a thumb-sized pair (side by side on phones). */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-btns {
	justify-content: center;
	margin-top: 8px;
	max-width: 520px;
	width: 100%;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-btns a.esptb-ft-btn {
	font-size: 1.04em;
	min-height: 52px;
	padding: 12px 24px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-btns a.esptb-ft-btn.is-call {
	box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ftc-fill) 85%, transparent);
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-btns a.esptb-ft-btn.is-chat {
	border-color: color-mix(in srgb, var(--ftc-heading) 26%, transparent);
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-btns a.esptb-ft-btn.is-chat:hover { border-color: var(--ftc-accent-ink); }

/* The other ways to reach the shop: a quiet centred row. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-alt {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 26px;
	justify-content: center;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-alt .esptb-ft-crow {
	align-items: center;
	gap: 8px;
	min-height: 40px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-alt .esptb-ft-crow .esptb-ft-ic {
	background: transparent;
	height: auto;
	width: auto;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-alt .esptb-ft-crow .esptb-ft-ic svg {
	height: 16px;
	width: 16px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-alt .esptb-ft-crow .esptb-ft-crow-t {
	padding-top: 0;
	text-align: left;
}

/* ----------------------------------------------------------- brand block */

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot.is-marked,
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot.is-lined {
	margin-top: calc(var(--ftc-gap) * 1.5);
}

/* No logo: the same hairline, fading out at both ends. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot.is-lined {
	border-image: linear-gradient(90deg, transparent, var(--ftc-line) 18%, var(--ftc-line) 82%, transparent) 1;
	border-top: 1px solid var(--ftc-line);
	padding-top: calc(var(--ftc-gap) * 1.25);
}

/* The logo sits on a hairline that fades out toward both edges. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-mark {
	align-items: center;
	display: flex;
	gap: 22px;
	justify-content: center;
	width: 100%;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot.is-marked .esptb-ft-hl-mark::before,
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot.is-marked .esptb-ft-hl-mark::after {
	background: linear-gradient(90deg, transparent, var(--ftc-line));
	content: "";
	flex: 1 1 0;
	height: 1px;
	min-width: 20px;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot.is-marked .esptb-ft-hl-mark::after {
	background: linear-gradient(90deg, var(--ftc-line), transparent);
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-mark .esptb-ft-logo {
	flex: 0 1 auto;
	min-width: 0;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-mark .esptb-ft-logo img { object-position: center; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-foot .esptb-ft-about {
	margin: 0;
	max-width: 60ch;
	text-wrap: balance;
}

/* One row of links. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 26px;
	justify-content: center;
	max-width: 100%;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-nav .esptb-ft-inline { gap: 0 26px; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-nav a {
	background-origin: content-box;
	display: inline-block;
	font-weight: 600;
	min-height: 40px;
	padding: 8px 0;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-social {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 100%;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-social .esptb-ft-social { justify-content: center; }

/* ------------------------------------------------------------ bottom bar */

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom { position: relative; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-bottom-in {
	gap: 8px 28px;
	justify-content: center;
	padding-top: 20px;
	text-align: center;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom:has(.esptb-ft-totop) .esptb-ft-bottom-in { padding-top: 38px; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-bottom-l,
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-bottom-r {
	justify-content: center;
	margin-left: 0;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-policy { justify-content: center; }

/* Back to top: a disc centred on the divider. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-totop {
	background: var(--ftc-bg);
	left: 50%;
	position: absolute;
	top: 0;
	translate: -50% -50%;
	z-index: 1;
}

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-totop:hover { background: var(--ftc-fill); }

/* A bar with nothing but the button keeps it in the row. */
.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom:not(:has(.esptb-ft-bottom-l)):not(:has(.esptb-ft-pay)):not(:has(.esptb-ft-credit)) .esptb-ft-bottom-in { padding-top: 16px; }

.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom:not(:has(.esptb-ft-bottom-l)):not(:has(.esptb-ft-pay)):not(:has(.esptb-ft-credit)) .esptb-ft-totop {
	position: static;
	translate: none;
}

/* ---------------------------------------------------------------- phones */

/* Every tap target reaches 40px: the social icons and the bottom bar's
   policy and credit links (the kit draws them at 38 / 34px). */
@media (max-width: 767px) {
	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-social a.esptb-ft-soc {
		min-height: 40px;
		min-width: 40px;
	}

	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-policy a,
	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-bottom .esptb-ft-credit a {
		background-origin: content-box;
		min-height: 40px;
		padding: 9px 0;
	}
}

/* ------------------------------------------------------------ ≥ 600px */

@media (min-width: 600px) {
	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-social {
		flex-direction: row;
		gap: 16px;
	}
}

/* ------------------------------------------------------------ ≥ 768px */

@media (min-width: 768px) {
	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-hero { gap: 16px; }

	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-btns a.esptb-ft-btn {
		flex: 0 1 auto;
		min-width: 220px;
	}
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring { transition: none; }

	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring::before,
	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring::after { animation: none; }

	.espt-block-footer .esptb-ft-hotline .esptb-ft-hl-ring::before {
		opacity: 0.3;
		transform: scale(1.28);
	}

	.espt-block-footer .esptb-ft-hotline a.esptb-ft-hl-num:hover .esptb-ft-hl-ring { transform: none; }
}