/* Site-wide footer — same layout pattern as the Prography project's
   footer.php (brand column + 3 link columns, bottom bar with copyright,
   fixed back-to-top button), in Chicco Fresh's own green with white text
   instead of Prography's grey/gold. Loaded on every page, like header.css. */

.tpl-footer {
	background: #6d902b;
	color: #ffffff;
	padding: 64px 0 0;
}

.tpl-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Newsletter-Vorteile-Leiste oberhalb der Spalten — Link zum "Willkommen
   zurück"-Popup (siehe unten), mit sichtbaren Benefits statt nur einem Link,
   damit die Anmeldung sitewide auffindbar bleibt (nicht nur beim Popup auf
   der Startseite). */
.tpl-footer-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 32px;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.tpl-footer-newsletter-text h3 {
	margin: 0 0 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #ffffff !important;
}

.tpl-footer-newsletter-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.tpl-footer-newsletter-benefits li {
	position: relative;
	padding-left: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.9) !important;
}

.tpl-footer-newsletter-benefits li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #ffffff;
}

.tpl-footer-newsletter-btn {
	flex: 0 0 auto;
	margin-top: 0;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.tpl-footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 50px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.tpl-footer-logo {
	display: inline-flex;
}

.tpl-footer-logo img {
	height: 26px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

.tpl-footer-tagline {
	margin-top: 18px;
	max-width: 300px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85) !important;
}

.tpl-footer-social {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.tpl-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-size: 15px;
	transition: background 0.2s, color 0.2s;
}

.tpl-footer-social a:hover {
	background: #ffffff;
	color: #6d902b;
}

.tpl-footer-col h3 {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 20px;
}

.tpl-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tpl-footer-col a {
	font-family: 'Roboto', sans-serif;
	font-size: 14.5px;
	color: #ffffff !important;
	text-decoration: none;
}

.tpl-footer-col a:hover {
	text-decoration: none;
}

.tpl-footer-col li {
	font-family: 'Roboto', sans-serif;
	font-size: 14.5px;
	color: #ffffff !important;
}

.tpl-footer-payment-icons {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 8px;
}

.tpl-footer-payment-icons i,
.tpl-footer-payment-icons svg {
	font-size: 30px !important;
	width: 30px !important;
	height: 30px !important;
	color: #ffffff;
}

/* Google Pay ships as an inline SVG (not in Storefront's Font Awesome build).
   The FA payment glyphs render inside the box above but their artwork only
   fills roughly the middle half of it; this SVG's artwork fills a similar
   share of its 640x512 viewBox, so matching the box height lands it at about
   the same visual size. width:auto keeps the aspect ratio. */
.tpl-footer-payment-icons svg.tpl-icon-gpay {
	width: auto !important;
	height: 30px !important;
}

.tpl-footer-sub {
	display: inline-block;
	margin-top: 4px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.75) !important;
}

.tpl-footer-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 8px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s;
}

.tpl-footer-btn:hover {
	background: #ffffff;
	color: #6d902b !important;
}

.tpl-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 22px 0;
	font-family: 'Roboto', sans-serif;
}

.tpl-footer-bottom p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85) !important;
}

.tpl-footer-bottom a {
	color: #ffffff !important;
	text-decoration: none;
}

.tpl-footer-bottom a:hover {
	text-decoration: none;
}

.tpl-back-to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 300;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #6d902b;
	border: 1px solid #333333;
	color: #ffffff;
	font-size: 18px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
}

.tpl-back-to-top.tpl-is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tpl-back-to-top:hover {
	background: #5a7623;
}

@media (max-width: 900px) {
	.tpl-footer-top {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
}

@media (max-width: 560px) {
	.tpl-footer {
		padding-top: 48px;
	}

	.tpl-footer-newsletter {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 32px;
		margin-bottom: 32px;
	}

	.tpl-footer-newsletter-btn {
		width: 100%;
		justify-content: center;
	}

	.tpl-footer-top {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.tpl-footer-brand {
		grid-column: span 1;
	}

	.tpl-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.tpl-back-to-top {
		right: 16px;
		bottom: 16px;
		width: 42px;
		height: 42px;
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------------
   "Willkommen zurück"-Popup (Relaunch) mit Newsletter-Anmeldung. Lebt hier
   (statt in templates.css), weil es site-weit aufrufbar sein muss — der
   Link/Button im Footer oben öffnet es auf jeder Seite, nicht nur auf der
   Startseite. Optik an die Relaunch-Newsletter angelehnt: weiße Karte,
   Markengrün #6d902b, kein Border-Radius. Steuerung: templates/welcome-popup.js.
--------------------------------------------------------------------------- */
body.tpl-welcome-popup-open {
	overflow: hidden;
}

.tpl-welcome-popup {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.tpl-welcome-popup[hidden] {
	display: none;
}

.tpl-welcome-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 12, 0.55);
}

.tpl-welcome-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #ffffff;
	border-top: 4px solid #6d902b;
	padding: 40px 36px 34px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	text-align: center;
}

.tpl-welcome-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #8a9088;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.tpl-welcome-close:hover {
	color: #1b1b1b;
}

.tpl-welcome-eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6d902b;
	font-weight: 600;
}

.tpl-welcome-text {
	margin: 0 0 22px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #2b2b2b;
}

.tpl-welcome-form {
	margin: 0;
}

.tpl-welcome-field {
	display: block;
	margin: 0 0 10px;
}

.tpl-welcome-name,
.tpl-welcome-email {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #cdd8bd;
	border-radius: 0;
	font-family: Arial, sans-serif;
	font-size: 15px;
	color: #1b1b1b;
	background: #f7f9f4;
}

.tpl-welcome-name:focus,
.tpl-welcome-email:focus {
	outline: none;
	border-color: #6d902b;
	background: #ffffff;
}

.tpl-welcome-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.tpl-welcome-submit {
	width: 100%;
	padding: 12px 20px;
	border: 0;
	border-radius: 0;
	background: #6d902b;
	color: #ffffff;
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.tpl-welcome-submit:hover {
	background: #5c7a24;
}

.tpl-welcome-submit.is-loading {
	opacity: 0.7;
	cursor: default;
}

.tpl-welcome-feedback {
	margin: 14px 0 0;
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}

.tpl-welcome-feedback[hidden] {
	display: none;
}

.tpl-welcome-feedback--success {
	color: #4f6f1c;
}

.tpl-welcome-feedback--error {
	color: #b23b3b;
}

.tpl-welcome-feedback--pending {
	color: #8a9088;
}

.tpl-welcome-legal {
	margin: 18px 0 0;
	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 1.6;
	color: #8a9088;
}

.tpl-welcome-legal a {
	color: #6d902b;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.tpl-welcome-card {
		padding: 34px 22px 28px;
	}
}