/* Site footer — the blue panel design.
 *
 * One rounded panel on a pale page, holding a full-width contact banner, four
 * cards (brand, quick links, trust seal, hours) and a closing row with the
 * social buttons and the copyright.
 *
 * Namespaced `pp-ft-*` on purpose: the previous footer's `pp-footer` /
 * `pp-mobile-footer` names are pinned with layout rules across app.css,
 * desktop-reference.css, mobile-reference.css, footer-reference.css and
 * responsive-fixes.css, so this component shares none of them and nothing
 * legacy can leak in. Enqueued after responsive-fixes.css.
 *
 * Layout is one grid whose column count changes per breakpoint; the cards carry
 * explicit `order` values at each breakpoint instead of three separate markup
 * paths, because the reference rearranges them (the brand card leads on mobile
 * but sits in the second row on desktop).
 */

.pp-ft {
	/* The panel wears the store's own blue gradient — the same pair the buy
	   button wears on every product card (`.pc-btn`, 135deg #0f1536 -> #273789).
	   Change this single value to re-tune the whole footer; everything inside is
	   a translucent overlay so it inherits whichever gradient is set here. */
	--ft-panel: linear-gradient(135deg, #0f1536 0%, #273789 100%);
	--ft-card: rgba(255, 255, 255, .13);
	--ft-card-hi: rgba(255, 255, 255, .16);
	--ft-ink: #ffffff;
	--ft-soft: rgba(255, 255, 255, .88);
	--ft-line: rgba(255, 255, 255, .28);
	--ft-page: #f1f6fd;
	--ft-inset: 16px;
	/* Full-bleed: no container, no outer margin, and no bottom padding, so the
	   footer's own bottom edge IS the end of the document. Scrolling stops there
	   instead of running on into a strip of empty page. The gradient lives here
	   rather than on the panel so it covers the gutter too. */
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--ft-panel);
}

.pp-ft-panel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 13px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--ft-inset);
	border-radius: 0;
	background: transparent;
	direction: rtl;
}

.pp-ft-card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: 15px;
	background: var(--ft-card);
	color: var(--ft-ink);
}

.pp-ft svg { display: block; }

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

.pp-ft-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 26px 24px;
	order: 1;
}

/* Two oversized ellipses clipped by the card, standing in for the reference's
   curved artwork. Oversized on purpose so only their arcs show. */
.pp-ft-swirl {
	position: absolute;
	border-radius: 50%;
	background: var(--ft-card-hi);
	pointer-events: none;
}

.pp-ft-swirl-a { width: 320px; height: 320px; left: -180px; bottom: -170px; }
.pp-ft-swirl-b { width: 230px; height: 230px; left: -110px; bottom: -40px; background: rgba(255, 255, 255, .10); }

.pp-ft-logo {
	position: relative;
	margin: 0;
	color: var(--ft-ink);
	font-size: 40px;
	font-weight: 900;
	line-height: 1.25;
}

.pp-ft-tagline {
	position: relative;
	margin: 8px 0 0;
	color: var(--ft-soft);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}

/* -------------------------------------------------------------- quick links */

.pp-ft-links {
	padding: 24px 22px;
	order: 2;
}

.pp-ft-h {
	margin: 0;
	color: var(--ft-ink);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

.pp-ft-list {
	display: grid;
	gap: 4px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.pp-ft-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ft-soft);
	font-size: 16px;
	font-weight: 600;
	line-height: 2.1;
	text-decoration: none;
}

.pp-ft-list a:hover { color: #fff; }
.pp-ft-list-label { flex: 1 1 auto; }

/* --------------------------------------------------------------- trust seal */

.pp-ft-seal {
	display: grid;
	padding: 20px;
	place-items: center;
	order: 3;
}

.pp-ft-seal img {
	display: block;
	width: 100%;
	max-width: 168px;
	height: auto;
	border-radius: 14px;
	background: #fff;
}

/* -------------------------------------------------------------------- hours */

.pp-ft-hours {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 26px 22px;
	text-align: center;
	order: 4;
}

.pp-ft-hours-v {
	margin: 10px 0 0;
	color: var(--ft-ink);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.6;
}

/* ------------------------------------------------------------ closing row */

.pp-ft-copy {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 18px 26px;
	color: var(--ft-soft);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	grid-column: span 3;
	order: 5;
}

.pp-ft-socials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 16px;
	grid-column: span 1;
	order: 6;
}

.pp-ft-social {
	display: grid;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	color: #fff;
	place-items: center;
	transition: background .18s ease;
}

.pp-ft-social:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ------------------------------------------------------------------ tablet */

@media (max-width: 1180px) {
	.pp-ft-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 11px;
		padding: 11px;
	}

	.pp-ft-logo { font-size: 32px; }

	/* The reference pairs brand with hours on the first row and the links with
	   the seal on the second. */
	.pp-ft-brand { order: 1; }
	.pp-ft-hours { order: 2; }
	.pp-ft-links { order: 3; }
	.pp-ft-seal { order: 4; }
	.pp-ft-socials { order: 5; grid-column: span 1; padding: 14px 10px; }
	.pp-ft-copy { order: 6; grid-column: span 1; justify-content: center; }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 650px) {
	.pp-ft { padding: 0; }

	.pp-ft-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		width: 100%;
		/* The room the fixed mobile nav needs is INSIDE the panel, so the
		   copyright clears it without the panel itself ending short of the
		   document bottom. */
		padding: 10px 12px calc(100px + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
	}

	/* The bottom bar is full-bleed too: footer-reference.css floats it as a pill
	   inset 12px from each side with a 15px radius. Drop the side insets, the
	   radius and the outer glow, and let it run to the bottom edge. The
	   safe-area padding keeps it off the home indicator on a notched phone. */
	.pp-mobile-nav {
		right: 0;
		left: 0;
		bottom: 0;
		height: auto;
		min-height: 58px;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-radius: 0;
		box-shadow: 0 -6px 20px rgba(20, 30, 60, .10);
	}

	.pp-ft-brand { order: 1; padding: 22px 20px; }
	.pp-ft-links { order: 2; }
	.pp-ft-hours { order: 3; }
	.pp-ft-seal { order: 4; }
	.pp-ft-socials { order: 5; grid-column: auto; padding: 18px; gap: 18px; }
	.pp-ft-copy { order: 6; grid-column: auto; justify-content: center; text-align: center; }

	.pp-ft-logo { font-size: 30px; }
	.pp-ft-tagline { font-size: 14px; }
	.pp-ft-swirl-a { width: 240px; height: 240px; left: -140px; bottom: -120px; }
	.pp-ft-swirl-b { width: 170px; height: 170px; left: -86px; bottom: -30px; }

	/* Quick links stack vertically on mobile too — no grid, no rules between
	   them, each label aligned to the same edge as the column heading. */
	.pp-ft-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
	.pp-ft-list a { justify-content: flex-start; padding: 11px 0; font-size: 15px; line-height: 1.8; }
	.pp-ft-list-label { text-align: start; }

	.pp-ft-seal img { max-width: 150px; }
	.pp-ft-hours { padding: 22px 18px; }
	.pp-ft-social { width: 48px; height: 48px; }

	/* responsive-fixes.css reserves room under the page for the fixed mobile nav
	   with `body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) }`.
	   The panel now keeps that room inside itself instead, so the page-level
	   padding is redundant — and it was exactly the strip the document scrolled
	   on into past the end of the footer. `html body` rather than `body` so this
	   wins on specificity rather than on load order. */
	html body { padding-bottom: 0; }
}

/* -------------------------------------------------------------------- dark */

html[data-theme="dark"] .pp-ft {
	--ft-page: #0c0f18;
	--ft-card: rgba(255, 255, 255, .09);
	--ft-card-hi: rgba(255, 255, 255, .13);
	--ft-line: rgba(255, 255, 255, .22);
}