/* =========================================================================
   CLUTCHES — Footer + floating elements
   ========================================================================= */

.site-footer { background: #000; color: #d9d6d0; margin-block-start: var(--sp-9); }
.footer-cols {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.6fr;
	gap: var(--sp-7); padding-block: var(--sp-8);
	padding-inline: var(--gutter); /* bare container--wide has no gutters of its own */
}
.footer-title { color: #fff; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-block-end: var(--sp-4); }
.footer-title--brand .logo-img { block-size: 44px; inline-size: auto; display: block; }
.logo-link--footer { display: inline-block; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-menu a { color: #c9c6c0; font-size: var(--fs-sm); }
.footer-menu a:hover { color: #fff; }

.footer-newsletter { display: grid; gap: var(--sp-3); }
.footer-nl-row { display: flex; gap: var(--sp-2); }
.footer-nl-row input { background: transparent; border-color: #555; color: #fff; }
.footer-nl-row input::placeholder { color: #8a8781; }
.footer-nl-row .btn { flex: 0 0 auto; border-color: #fff; background: #fff; color: var(--c-black); }
.footer-nl-consent { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-xs); color: #a8a49d; }
.footer-social { display: flex; gap: var(--sp-4); margin-block-start: var(--sp-4); }
.footer-social-link { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: #c9c6c0; border-block-end: 1px solid #555; padding-block-end: 2px; }
.footer-social-link:hover { color: #fff; }
.form-msg { font-size: var(--fs-xs); margin: 0; }
.form-msg.is-ok { color: #7fd18a; }
.form-msg.is-err { color: #f2a5a5; }

.footer-bottom { border-block-start: 1px solid #333; }
.footer-bottom-inner {
	display: flex; align-items: center; justify-content: space-between;
	padding-block: var(--sp-4); flex-wrap: wrap; gap: var(--sp-3);
	/* inline-end (left in RTL) also clears the floating accessibility button
	   so the copyright line is never hidden under it */
	padding-inline: var(--gutter) calc(var(--gutter) + var(--float-size) + 16px);
}
.footer-copy { unicode-bidi: plaintext; }
.payment-icons { display: flex; gap: var(--sp-2); }
.pay-chip { font-size: 10px; letter-spacing: .06em; padding: 4px 8px; border: 1px solid #444; border-radius: 3px; color: #b3afa8; }
.footer-copy { font-size: var(--fs-xs); color: #8a8781; margin: 0; }

/* ---- Floating buttons: one vertical stack in a single corner ----
   Stack geometry via variables so every breakpoint stays overlap-free:
   a11y (bottom) -> whatsapp -> back-to-top, iOS safe-area aware. */
:root { --float-base: 22px; --float-size: 52px; --float-gap: 12px; }
.wa-float, .a11y-toggle, .back-to-top {
	position: fixed; z-index: var(--z-float);
	inline-size: var(--float-size); block-size: var(--float-size); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow); cursor: pointer; border: 0;
	transition: transform var(--dur-fast) var(--ease);
	inset-inline-end: 22px; inset-inline-start: auto;
}
.wa-float:hover, .a11y-toggle:hover, .back-to-top:hover { transform: scale(1.06); }
.a11y-toggle {
	inset-block-end: calc(var(--float-base) + env(safe-area-inset-bottom, 0px));
	background: var(--c-black); color: #fff; z-index: var(--z-a11y);
}
.wa-float {
	inset-block-end: calc(var(--float-base) + var(--float-size) + var(--float-gap) + env(safe-area-inset-bottom, 0px));
	background: #25d366; color: #fff;
}
.back-to-top {
	inset-block-end: calc(var(--float-base) + 2 * (var(--float-size) + var(--float-gap)) + env(safe-area-inset-bottom, 0px));
	background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-line);
}

/* ---- A11y panel (opens beside its toggle, same corner) ---- */
.a11y-panel {
	position: fixed;
	inset-block-end: calc(var(--float-base) + var(--float-size) + var(--float-gap) + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 22px; inset-inline-start: auto;
	inline-size: 280px; background: #fff; color: var(--c-ink);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
	z-index: var(--z-a11y); padding: var(--sp-4);
}
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-3); }
.a11y-head h2 { margin: 0; font-size: var(--fs-md); }
.a11y-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.a11y-actions button { padding: 10px; font-size: var(--fs-sm); border: 1px solid var(--c-line-strong); background: #fff; border-radius: var(--radius-sm); cursor: pointer; }
.a11y-actions button:hover, .a11y-actions button.is-active { background: var(--c-black); color: #fff; border-color: var(--c-black); }
.a11y-reset { grid-column: 1 / -1; }
.a11y-statement { display: block; margin-block-start: var(--sp-3); font-size: var(--fs-xs); text-align: center; border-block-start: 1px solid var(--c-line); padding-block-start: var(--sp-3); }

/* ---- A11y body states ---- */
body.a11y-contrast { filter: contrast(1.35); }
body.a11y-links a { text-decoration: underline !important; }
body.a11y-readable, body.a11y-readable * { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: .02em !important; }
body.a11y-stop-motion * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (max-width: 768px) {
	.footer-cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
	.footer-col--connect { grid-column: 1 / -1; }

	/* Link columns collapse into accordions on phones (JS toggles .is-open);
	   the newsletter column stays always visible. Desktop untouched. */
	.footer-cols { grid-template-columns: 1fr; gap: 0; }
	.footer-col:not(.footer-col--connect) { border-block-end: 1px solid #333; }
	.footer-col:not(.footer-col--connect) .footer-title {
		display: flex; align-items: center; justify-content: space-between;
		cursor: pointer; margin: 0; padding-block: var(--sp-4);
	}
	.footer-col:not(.footer-col--connect) .footer-title::after { content: "+"; font-weight: 400; }
	.footer-title--brand .logo-img { block-size: 34px; }
	.footer-col.is-open .footer-title::after { content: "–"; }
	.footer-col:not(.footer-col--connect):not(.is-open) > :not(.footer-title) { display: none; }
	.footer-col--connect { padding-block-start: var(--sp-5); }

	/* Newsletter fields stack: full-width input above a full-width button */
	.footer-nl-row { display: flex; flex-direction: column; gap: var(--sp-2); }
	.footer-nl-row input, .footer-nl-row .btn { inline-size: 100%; }

	/* footer containers also use the bare modifier — phones need gutters */
	.footer-cols, .footer-bottom-inner { padding-inline: var(--gutter); }
}
@media (max-width: 480px) {
	.footer-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	:root { --float-size: 42px; --float-gap: 10px; }
	.footer-cols { padding-block: var(--sp-6); gap: var(--sp-5); }
}