/**
 * GGP Footer — front end.
 *
 * Numbers are the ones measured off the live Shopify footer, now expressed as
 * custom properties so the sidebar can change them:
 *   background #121212 · text rgba(255,255,255,.75) · headings 18px/400 in #fff
 *   with 20px below · links 14px/1.9 · container 1600px with 50px sides
 *   social 20px icons in a centred row · bottom rule 1px rgba(255,255,255,.08)
 *   with the copyright at 11px.
 *
 * As in the header, every element that shows text names its own font-family:
 * inheriting it from .gsf-root loses to the theme's own `h1,h2,h3 { … }`,
 * because an inherited value loses to any direct rule at any specificity.
 */

.gsf-root {
	--gsf-ease: cubic-bezier( 0.4, 0, 0.2, 1 );

	background: var( --gsf-bg, #121212 );
	color: var( --gsf-txt, rgba( 255, 255, 255, 0.75 ) );
	font-family: var( --gsf-font, sans-serif );
	letter-spacing: 0.6px;
	-webkit-font-smoothing: antialiased;
	padding-top: var( --gsf-top, 50px );
}

.gsf-root *,
.gsf-root *::before,
.gsf-root *::after {
	box-sizing: border-box;
}

.gsf-root ul,
.gsf-root li,
.gsf-root figure,
.gsf-root blockquote,
.gsf-root p,
.gsf-root h2 {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsf-root a {
	color: inherit;
	text-decoration: none;
}

.gsf-root a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * The columns row
 *
 * A 12-track grid rather than "however many columns there are", so a panel can
 * be told to take a third or a half without the other panels having to agree.
 * ------------------------------------------------------------------ */

.gsf-root .gsf-top {
	max-width: var( --gsf-max, 1600px );
	margin: 0 auto;
	padding: 0 var( --gsf-pad, 50px ) var( --gsf-pad, 50px );
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	gap: var( --gsf-gap, 40px );
}

.gsf-root .gsf-col {
	grid-column: span var( --gsf-span, 4 );
	min-width: 0;
}

.gsf-root .gsf-h {
	font-family: var( --gsf-font, sans-serif );
	font-size: var( --gsf-h-size, 18px );
	font-weight: 400;
	line-height: 1.3;
	color: var( --gsf-head, #fff );
	margin-bottom: 20px;
}

.gsf-root .gsf-list li {
	padding-bottom: 5px;
}

.gsf-root .gsf-list a {
	font-family: var( --gsf-font, sans-serif );
	font-size: var( --gsf-link-size, 14px );
	line-height: 1.9;
}

.gsf-root .gsf-note {
	font-family: var( --gsf-font, sans-serif );
	font-size: var( --gsf-note-size, 16px );
	/* Shopify renders this block through .rte with an <em> around it. */
	font-style: italic;
	line-height: 1.6;
	max-width: 46ch;
	margin-left: auto;
}

.gsf-root .gsf-note a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * Social
 * ------------------------------------------------------------------ */

.gsf-root .gsf-social-row {
	max-width: var( --gsf-max, 1600px );
	margin: 0 auto;
	padding: 0 var( --gsf-pad, 50px ) 40px;
}

.gsf-root .gsf-social-row.is-left { text-align: left; }
.gsf-root .gsf-social-row.is-center { text-align: center; }
.gsf-root .gsf-social-row.is-right { text-align: right; }

.gsf-root .gsf-social-heading {
	margin-bottom: 14px;
}

.gsf-root .gsf-social {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.gsf-root .gsf-social-row.is-center .gsf-social { justify-content: center; }
.gsf-root .gsf-social-row.is-right .gsf-social { justify-content: flex-end; }

.gsf-root .gsf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc( var( --gsf-social-size, 20px ) + 24px );
	height: calc( var( --gsf-social-size, 20px ) + 24px );
	border-radius: 50%;
	color: var( --gsf-txt, rgba( 255, 255, 255, 0.75 ) );
	transition: color 0.15s ease, background-color 0.15s ease;
}

.gsf-root .gsf-social a:hover {
	color: #fff;
	background: rgba( 255, 255, 255, 0.07 );
	text-decoration: none;
}

.gsf-root .gsf-social svg {
	display: block;
	width: var( --gsf-social-size, 20px );
	height: var( --gsf-social-size, 20px );
}

/* A social list used as a column inside the grid rather than as its own row. */
.gsf-root .gsf-social.is-inline {
	gap: 6px;
	margin-left: -10px;
}

/* ------------------------------------------------------------------ *
 * Google reviews
 * ------------------------------------------------------------------ */

.gsf-root .gsf-reviews {
	max-width: var( --gsf-max, 1600px );
	margin: 0 auto;
	padding: 0 var( --gsf-pad, 50px ) 44px;
}

.gsf-root .gsf-rv-heading {
	margin-bottom: 18px;
}

.gsf-root .gsf-rv-body {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 22px 26px;
	border: 1px solid var( --gsf-rule, rgba( 255, 255, 255, 0.08 ) );
	border-radius: 18px;
}

.gsf-root .gsf-reviews.is-stacked .gsf-rv-body {
	flex-direction: column;
	gap: 18px;
	text-align: center;
}

/* --- the score --- */

.gsf-root .gsf-rv-score {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 132px;
}

.gsf-root .gsf-rv-score:hover {
	text-decoration: none;
}

.gsf-root .gsf-rv-num {
	font-family: var( --gsf-font, sans-serif );
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var( --gsf-head, #fff );
	letter-spacing: -0.01em;
}

.gsf-root .gsf-rv-count {
	font-family: var( --gsf-font, sans-serif );
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.75;
	text-align: center;
}

/*
 * The stars. Two identical rows stacked, the gold one cut with clip-path
 * rather than narrowed with width — width would squeeze five stars into the
 * space of 4.3 and turn them into ellipses. clip-path crops the picture and
 * leaves the geometry alone, which is what a partial star actually is.
 */
.gsf-root .gsf-stars {
	position: relative;
	display: inline-flex;
	line-height: 0;
}

.gsf-root .gsf-stars-off,
.gsf-root .gsf-stars-on {
	display: inline-flex;
	gap: 2px;
}

.gsf-root .gsf-stars-off {
	color: rgba( 255, 255, 255, 0.22 );
}

.gsf-root .gsf-stars-on {
	position: absolute;
	inset: 0;
	color: var( --gsf-star, #fbbc04 );
	clip-path: inset( 0 calc( 100% - var( --gsf-fill, 100% ) ) 0 0 );
}

.gsf-root .gsf-stars svg {
	width: 17px;
	height: 17px;
	display: block;
}

.gsf-root .gsf-stars.is-small svg {
	width: 12px;
	height: 12px;
}

/* --- the rotating quotes --- */

.gsf-root .gsf-rv-quotes {
	flex: 1;
	min-width: 0;
	display: grid;
}

/*
 * Every quote occupies the SAME grid cell, so the box is automatically as tall
 * as the longest one and no fixed height has to be guessed. Absolute
 * positioning would have collapsed the container and needed one.
 */
.gsf-root .gsf-quote {
	grid-area: 1 / 1;
	min-width: 0;
}

.gsf-root .gsf-quote blockquote {
	font-family: var( --gsf-font, sans-serif );
	font-size: var( --gsf-note-size, 16px );
	line-height: 1.6;
	color: var( --gsf-head, #fff );
	quotes: '\201C' '\201D';
}

.gsf-root .gsf-quote blockquote::before { content: open-quote; }
.gsf-root .gsf-quote blockquote::after { content: close-quote; }

.gsf-root .gsf-quote-by {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	font-family: var( --gsf-font, sans-serif );
	font-size: 13px;
	opacity: 0.8;
}

.gsf-root .gsf-reviews.is-stacked .gsf-quote-by {
	justify-content: center;
}

.gsf-root .gsf-rv-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.gsf-root .gsf-quote-when {
	opacity: 0.7;
}

.gsf-root.rv-rotates .gsf-quote {
	opacity: 0;
	animation-name: var( --gsf-rot-name );
	animation-duration: var( --gsf-rot-cycle, 21s );
	animation-timing-function: var( --gsf-ease );
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/* Hold still while somebody is reading or tabbing through. */
.gsf-root.rv-rotates .gsf-rv-quotes:hover .gsf-quote,
.gsf-root.rv-rotates .gsf-rv-quotes:focus-within .gsf-quote {
	animation-play-state: paused;
}

/* Editor-only placeholder; never reaches a visitor. */
.gsf-root .gsf-rv-empty .gsf-rv-inner {
	padding: 20px 24px;
	border: 1px dashed var( --gsf-rule, rgba( 255, 255, 255, 0.25 ) );
	border-radius: 18px;
	font-family: var( --gsf-font, sans-serif );
	font-size: 14px;
	line-height: 1.6;
}

.gsf-root .gsf-rv-err {
	margin-top: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	opacity: 0.7;
	word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * Bottom bar
 * ------------------------------------------------------------------ */

.gsf-root .gsf-bottom {
	max-width: var( --gsf-max, 1600px );
	margin: 0 auto;
	padding: 30px var( --gsf-pad, 50px );
	border-top: 1px solid var( --gsf-rule, rgba( 255, 255, 255, 0.08 ) );
	font-family: var( --gsf-font, sans-serif );
	font-size: var( --gsf-bottom-size, 11px );
	line-height: 1.8;
}

.gsf-root .gsf-bottom.no-rule {
	border-top: 0;
}

.gsf-root .gsf-bottom.is-left { text-align: left; }
.gsf-root .gsf-bottom.is-center { text-align: center; }
.gsf-root .gsf-bottom.is-right { text-align: right; }

/* ------------------------------------------------------------------ *
 * Phone
 * ------------------------------------------------------------------ */

@media ( max-width: 989px ) {

	.gsf-root .gsf-top {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 0 20px 34px;
		text-align: center;
	}

	.gsf-root .gsf-col {
		grid-column: span 1;
	}

	.gsf-root .gsf-note {
		margin: 0 auto;
	}

	.gsf-root .gsf-social.is-inline {
		justify-content: center;
		margin-left: 0;
	}

	.gsf-root .gsf-social-row {
		padding: 0 20px 28px;
	}

	.gsf-root .gsf-social-row.is-left,
	.gsf-root .gsf-social-row.is-right {
		text-align: center;
	}

	.gsf-root .gsf-social-row.is-left .gsf-social,
	.gsf-root .gsf-social-row.is-right .gsf-social {
		justify-content: center;
	}

	.gsf-root .gsf-reviews {
		padding: 0 20px 30px;
	}

	/* The columns row gets centred by .gsf-top above; the reviews heading sits
	   outside it and was the one thing left hanging off to the left. */
	.gsf-root .gsf-rv-heading {
		text-align: center;
	}

	.gsf-root .gsf-rv-body {
		flex-direction: column;
		gap: 18px;
		text-align: center;
		padding: 20px 18px;
	}

	.gsf-root .gsf-quote-by {
		justify-content: center;
	}

	.gsf-root .gsf-bottom {
		padding: 26px 20px;
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion — stop on the first review rather than stacking all of them
 * ------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.gsf-root.rv-rotates .gsf-quote {
		animation: none;
		opacity: 0;
	}

	.gsf-root.rv-rotates .gsf-quote:first-child {
		opacity: 1;
	}
}