/*
Theme Name: Beeming
Theme URI: https://beemingrentals.com/
Author: Beeming Jumpers & Slides
Author URI: https://beemingrentals.com/
Description: The Beeming Jumpers & Slides website. Bright, fast and mobile-first, built for WooCommerce and the Bounce Booking plugin — no page builder, no subscription. Colors, phone number, service area and homepage copy are all editable under Appearance > Customize.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bounce
Tags: business, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	--bounce-primary: #f4543c;
	--bounce-primary-dark: #d23c26;
	--bounce-primary-ink: #fff;
	--bounce-secondary: #2bb3e8;
	--bounce-accent: #ffc93c;
	--bounce-ink: #1d2330;
	--bounce-muted: #5d6675;
	--bounce-line: #e3e7ee;
	--bounce-surface: #fff;
	--bounce-cream: #fff8f2;


	--bounce-radius: 18px;
	--bounce-radius-lg: 28px;
	--bounce-shadow: 0 10px 30px rgba( 29, 35, 48, 0.08 );
	--bounce-shadow-lift: 0 18px 44px rgba( 29, 35, 48, 0.14 );

	--bounce-font-body: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bounce-font-display: "Baloo 2", var( --bounce-font-body );

	--bounce-wrap: 1160px;
	--bounce-gutter: clamp( 16px, 4vw, 40px );
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var( --bounce-surface );
	color: var( --bounce-ink );
	font-family: var( --bounce-font-body );
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var( --bounce-font-display );
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 0.5em;
	letter-spacing: -0.015em;
}

h1 {
	font-size: clamp( 2.1rem, 5.2vw, 3.6rem );
}

h2 {
	font-size: clamp( 1.7rem, 3.6vw, 2.6rem );
}

h3 {
	font-size: clamp( 1.2rem, 2vw, 1.5rem );
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var( --bounce-primary-dark );
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

a:hover {
	color: var( --bounce-ink );
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

:focus-visible {
	outline: 3px solid var( --bounce-secondary );
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	background: var( --bounce-ink );
	color: #fff;
	padding: 12px 18px;
	border-radius: 8px;
}

.skip-link:focus {
	left: 8px;
}

.wrap {
	width: 100%;
	max-width: var( --bounce-wrap );
	margin: 0 auto;
	padding: 0 var( --bounce-gutter );
}

/* -------------------------------------------------------------------------
   3. Buttons
   ---------------------------------------------------------------------- */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var( --bounce-font-display );
	font-weight: 800;
	font-size: 1.02rem;
	line-height: 1.2;
	padding: 15px 28px;
	border: 0;
	border-radius: 999px;
	background: var( --bounce-primary );
	color: var( --bounce-primary-ink );
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
	box-shadow: 0 4px 0 var( --bounce-primary-dark );
}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var( --bounce-primary );
	color: var( --bounce-primary-ink );
	transform: translateY( -2px );
	box-shadow: 0 6px 0 var( --bounce-primary-dark );
}

.btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY( 2px );
	box-shadow: 0 2px 0 var( --bounce-primary-dark );
}

.btn--ghost {
	background: transparent;
	color: var( --bounce-ink );
	box-shadow: inset 0 0 0 3px var( --bounce-line );
}

.btn--ghost:hover {
	background: transparent;
	color: var( --bounce-ink );
	box-shadow: inset 0 0 0 3px var( --bounce-ink );
}

.btn--sun {
	background: var( --bounce-accent );
	color: var( --bounce-ink );
	box-shadow: 0 4px 0 #d8a411;
}

.btn--sun:hover {
	background: var( --bounce-accent );
	color: var( --bounce-ink );
	box-shadow: 0 6px 0 #d8a411;
}

.btn--lg {
	font-size: 1.12rem;
	padding: 18px 34px;
}

/* -------------------------------------------------------------------------
   4. Header
   ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --bounce-line );
}

.header-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 92px;
	padding: 10px var( --bounce-gutter );
	max-width: var( --bounce-wrap );
	margin: 0 auto;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	min-width: 0;
}

.site-branding img,
.custom-logo-link img {
	/* Roomy enough for a stacked logo (art above a wordmark) to stay legible. */
	max-height: 72px;
	width: auto;
}

@media ( max-width: 900px ) {
	.site-branding img,
	.custom-logo-link img {
		max-height: 54px;
	}
}

.site-title {
	font-family: var( --bounce-font-display );
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
}

.site-title a {
	color: var( --bounce-ink );
	text-decoration: none;
}

.site-description {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: var( --bounce-muted );
}

.main-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav a {
	color: var( --bounce-ink );
	text-decoration: none;
	font-weight: 700;
	font-size: 0.98rem;
	padding: 6px 0;
	border-bottom: 3px solid transparent;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
	border-bottom-color: var( --bounce-primary );
}

.main-nav .sub-menu {
	display: none;
	position: absolute;
	background: #fff;
	border: 1px solid var( --bounce-line );
	border-radius: var( --bounce-radius );
	box-shadow: var( --bounce-shadow );
	padding: 10px;
	flex-direction: column;
	gap: 4px;
	min-width: 210px;
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
	display: flex;
}

.main-nav .sub-menu a {
	padding: 8px 12px;
	border-radius: 9px;
	border: 0;
}

.main-nav .sub-menu a:hover {
	background: var( --bounce-cream );
}

.main-nav li {
	position: relative;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var( --bounce-font-display );
	font-weight: 800;
	font-size: 1.02rem;
	color: var( --bounce-ink );
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:hover {
	color: var( --bounce-primary-dark );
}

.header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var( --bounce-ink );
	text-decoration: none;
	font-weight: 700;
}

.header-cart .count {
	position: absolute;
	top: -7px;
	right: -11px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var( --bounce-primary );
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	display: grid;
	place-items: center;
}

.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	border: 2px solid var( --bounce-line );
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	padding: 0;
	place-items: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	display: block;
	width: 20px;
	height: 2.5px;
	border-radius: 2px;
	background: var( --bounce-ink );
	position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle span::before {
	top: -6px;
}

.nav-toggle span::after {
	top: 6px;
}

@media ( max-width: 900px ) {
	.nav-toggle {
		display: grid;
		order: 3;
	}

	.main-nav {
		order: 4;
		flex-basis: 100%;
		display: none;
	}

	.main-nav.is-open {
		display: block;
	}

	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 14px;
	}

	.main-nav a {
		display: block;
		padding: 12px 2px;
		border-bottom: 1px solid var( --bounce-line );
	}

	.main-nav .sub-menu {
		position: static;
		display: flex;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 14px;
	}

	.header-bar {
		flex-wrap: wrap;
	}

	.header-phone span.label {
		display: none;
	}

	/* A long business name must not push the menu button onto its own row. */
	.site-branding {
		flex: 1 1 auto;
		min-width: 0;
		margin-right: 8px;
	}

	.site-title {
		font-size: 1.1rem;
	}

	.site-description {
		display: none;
	}

	.header-actions,
	.nav-toggle {
		flex: 0 0 auto;
	}
}

/* -------------------------------------------------------------------------
   5. Sections
   ---------------------------------------------------------------------- */

.section {
	padding: clamp( 48px, 7vw, 92px ) 0;
}

.section--cream {
	background: var( --bounce-cream );
}

.section--ink {
	background: var( --bounce-ink );
	color: #fff;
}

.section--ink h2,
.section--ink h3 {
	color: #fff;
}

.section-head {
	max-width: 620px;
	margin: 0 0 42px;
}

.section-head.is-centered {
	margin-inline: auto;
	text-align: center;
}

.section-head p {
	color: var( --bounce-muted );
	font-size: 1.08rem;
	margin: 0;
}

.section--ink .section-head p {
	color: rgba( 255, 255, 255, 0.76 );
}

.eyebrow {
	display: inline-block;
	font-family: var( --bounce-font-display );
	font-weight: 800;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --bounce-primary-dark );
	background: #ffe9e4;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 14px;
}

.section--ink .eyebrow {
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --bounce-accent );
}

/* Hero ------------------------------------------------------------------ */

.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient( 170deg, var( --bounce-cream ) 0%, #ffeee6 58%, #ffe4d9 100% );
	padding: clamp( 40px, 6vw, 80px ) 0 clamp( 56px, 7vw, 96px );
}

/* A modern colour wash: a few large, soft gradients in the brand palette on a
   near-white base. No hard edges, no illustration — the colour reads as
   atmosphere rather than as a picture of a sky. */
.bounce-fresh .hero {
	background:
		radial-gradient( 58% 60% at 82% 2%, rgba( 43, 168, 224, 0.30 ) 0%, rgba( 43, 168, 224, 0 ) 62% ),
		radial-gradient( 46% 52% at 8% 88%, rgba( 124, 194, 67, 0.22 ) 0%, rgba( 124, 194, 67, 0 ) 64% ),
		radial-gradient( 40% 44% at 42% 28%, rgba( 255, 201, 60, 0.16 ) 0%, rgba( 255, 201, 60, 0 ) 70% ),
		radial-gradient( 44% 46% at 96% 78%, rgba( 228, 38, 44, 0.10 ) 0%, rgba( 228, 38, 44, 0 ) 66% ),
		linear-gradient( 180deg, #fcfdff 0%, #f6f9fd 100% );
}

/* The original decorative blobs would fight the wash. */
.bounce-fresh .hero::before,
.bounce-fresh .hero::after {
	content: none;
}

/* Alternating sections: a clean, cool off-white rather than cream. */
.bounce-fresh .section--cream {
	background: #f6f9fd;
}

.bounce-fresh .page-hero {
	background:
		radial-gradient( 60% 120% at 88% 0%, rgba( 43, 168, 224, 0.22 ) 0%, rgba( 43, 168, 224, 0 ) 66% ),
		radial-gradient( 50% 120% at 6% 100%, rgba( 124, 194, 67, 0.16 ) 0%, rgba( 124, 194, 67, 0 ) 68% ),
		linear-gradient( 180deg, #fbfdff 0%, #f5f8fc 100% );
}

.bounce-fresh .bb-specs {
	background: #f6f9fd;
}

.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hero::before {
	width: 420px;
	height: 420px;
	right: -120px;
	top: -140px;
	background: radial-gradient( circle at 30% 30%, rgba( 43, 179, 232, 0.28 ), transparent 66% );
}

.hero::after {
	width: 340px;
	height: 340px;
	left: -110px;
	bottom: -150px;
	background: radial-gradient( circle at 60% 40%, rgba( 255, 201, 60, 0.34 ), transparent 66% );
}

.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp( 28px, 5vw, 60px );
	align-items: center;
}

.hero h1 {
	margin: 0 0 18px;
}

.hero h1 em {
	font-style: normal;
	color: var( --bounce-primary-dark );
}

.hero-lede {
	font-size: clamp( 1.05rem, 1.7vw, 1.25rem );
	color: var( --bounce-muted );
	margin: 0 0 26px;
	max-width: 30em;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 24px;
}

.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 700;
	font-size: 0.94rem;
	color: var( --bounce-ink );
}

.hero-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hero-trust svg {
	flex: 0 0 auto;
	color: #1f9d55;
}

.hero-media {
	position: relative;
}

.hero-media img {
	width: 100%;
	border-radius: var( --bounce-radius-lg );
	box-shadow: var( --bounce-shadow-lift );
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hero-media .hero-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var( --bounce-radius-lg );
	background: repeating-linear-gradient( 45deg, #ffd9cf, #ffd9cf 22px, #ffe5de 22px, #ffe5de 44px );
	color: var( --bounce-primary-dark );
	font-family: var( --bounce-font-display );
	font-weight: 800;
	text-align: center;
	padding: 24px;
	box-shadow: var( --bounce-shadow-lift );
}

/* Hero slideshow ------------------------------------------------------- */

.hero-slides {
	position: relative;
	border-radius: var( --bounce-radius-lg );
	overflow: hidden;
	box-shadow: var( --bounce-shadow-lift );
	aspect-ratio: 4 / 3;
	background: var( --bounce-cream );
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-slides-ui {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
}

.hero-dots {
	display: flex;
	gap: 7px;
	margin-left: auto;
}

.hero-dot,
.hero-slides-toggle {
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba( 255, 255, 255, 0.55 );
	backdrop-filter: blur( 6px );
	box-shadow: 0 1px 4px rgba( 29, 35, 48, 0.25 );
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.hero-dot {
	width: 11px;
	height: 11px;
	border-radius: 999px;
}

.hero-dot:hover {
	background: #fff;
}

.hero-dot.is-active {
	background: var( --bounce-primary );
	width: 26px;
}

.hero-slides-toggle {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	color: var( --bounce-ink );
}

.hero-slides-toggle:hover {
	background: #fff;
	transform: scale( 1.06 );
}

.hero-dot:focus-visible,
.hero-slides-toggle:focus-visible {
	outline: 3px solid var( --bounce-ink );
	outline-offset: 2px;
}

/* Pause and play glyphs, drawn in CSS so there is no icon font to load. */
.hero-icon-pause,
.hero-icon-play {
	display: block;
}

.hero-icon-pause {
	width: 9px;
	height: 11px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.hero-icon-play {
	display: none;
	width: 0;
	height: 0;
	border-left: 10px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 2px;
}

.hero-slides.is-paused .hero-icon-pause {
	display: none;
}

.hero-slides.is-paused .hero-icon-play {
	display: block;
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-slide {
		transition: none;
	}
}

.hero-badge {
	position: absolute;
	bottom: -18px;
	left: -14px;
	background: #fff;
	border-radius: var( --bounce-radius );
	box-shadow: var( --bounce-shadow-lift );
	padding: 13px 18px;
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: 260px;
}

.hero-badge strong {
	display: block;
	font-family: var( --bounce-font-display );
	font-size: 1.28rem;
	line-height: 1;
}

.hero-badge span {
	font-size: 0.8rem;
	color: var( --bounce-muted );
	line-height: 1.3;
}

.hero-badge .stars {
	color: var( --bounce-accent );
	font-size: 0.95rem;
	letter-spacing: 1px;
}

@media ( max-width: 860px ) {
	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-media {
		order: -1;
	}

	.hero-badge {
		left: 8px;
		bottom: -14px;
	}
}

/* Steps ----------------------------------------------------------------- */

.steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
	gap: 24px;
	counter-reset: step;
}

.step {
	position: relative;
	background: #fff;
	border: 2px solid var( --bounce-line );
	border-radius: var( --bounce-radius-lg );
	padding: 30px 26px 26px;
}

.step::before {
	counter-increment: step;
	content: counter( step );
	position: absolute;
	top: -20px;
	left: 26px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var( --bounce-primary );
	color: #fff;
	font-family: var( --bounce-font-display );
	font-weight: 800;
	font-size: 1.22rem;
	box-shadow: 0 4px 0 var( --bounce-primary-dark );
}

.step h3 {
	margin: 12px 0 8px;
}

.step p {
	margin: 0;
	color: var( --bounce-muted );
}

/* Feature cards --------------------------------------------------------- */

.feature-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 236px, 1fr ) );
	gap: 22px;
}

.feature {
	background: #fff;
	border-radius: var( --bounce-radius-lg );
	padding: 28px 26px;
	box-shadow: var( --bounce-shadow );
}

.feature .icon {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: var( --bounce-cream );
	color: var( --bounce-primary-dark );
	margin: 0 0 16px;
}

.feature h3 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.feature p {
	margin: 0;
	color: var( --bounce-muted );
	font-size: 0.98rem;
}

/* Testimonials ---------------------------------------------------------- */

.quote-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 22px;
}

.quote {
	background: #fff;
	border-radius: var( --bounce-radius-lg );
	padding: 28px 26px;
	box-shadow: var( --bounce-shadow );
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.quote .stars {
	color: var( --bounce-accent );
	letter-spacing: 2px;
	font-size: 1.05rem;
}

.quote blockquote {
	margin: 0;
	font-size: 1.04rem;
	line-height: 1.6;
}

.quote cite {
	font-style: normal;
	font-weight: 800;
	font-size: 0.92rem;
	color: var( --bounce-muted );
	margin-top: auto;
}

/* Service area ---------------------------------------------------------- */

.area-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 24px, 5vw, 56px );
	align-items: center;
}

.area-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.area-list li {
	background: #fff;
	border: 2px solid var( --bounce-line );
	border-radius: 999px;
	padding: 7px 16px;
	font-weight: 700;
	font-size: 0.92rem;
}

@media ( max-width: 800px ) {
	.area-split {
		grid-template-columns: 1fr;
	}
}

/* FAQ ------------------------------------------------------------------- */

.faq {
	max-width: 780px;
	margin: 0 auto;
}

.faq details {
	background: #fff;
	border: 2px solid var( --bounce-line );
	border-radius: var( --bounce-radius );
	margin: 0 0 12px;
	overflow: hidden;
}

.faq details[open] {
	border-color: var( --bounce-primary );
}

.faq summary {
	cursor: pointer;
	padding: 18px 22px;
	font-family: var( --bounce-font-display );
	font-weight: 800;
	font-size: 1.08rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var( --bounce-primary-dark );
	flex: 0 0 auto;
}

.faq details[open] summary::after {
	content: "\2013";
}

.faq .answer {
	padding: 0 22px 20px;
	color: var( --bounce-muted );
}

.faq .answer p:last-child {
	margin-bottom: 0;
}

/* CTA band -------------------------------------------------------------- */

.cta-band {
	position: relative;
	overflow: hidden;
	background: var( --bounce-primary );
	color: #fff;
	border-radius: var( --bounce-radius-lg );
	padding: clamp( 34px, 5vw, 58px );
	text-align: center;
	margin: 0 0 clamp( 48px, 7vw, 92px );
}

.cta-band h2 {
	color: #fff;
	margin: 0 0 12px;
}

.cta-band p {
	max-width: 46em;
	margin: 0 auto 26px;
	color: rgba( 255, 255, 255, 0.9 );
	font-size: 1.08rem;
}

.cta-band .btn {
	background: #fff;
	color: var( --bounce-primary-dark );
	box-shadow: 0 4px 0 rgba( 0, 0, 0, 0.18 );
}

.cta-band .btn:hover {
	background: #fff;
	color: var( --bounce-ink );
}

.cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* -------------------------------------------------------------------------
   6. WooCommerce
   ---------------------------------------------------------------------- */

.woo-wrap {
	padding-bottom: clamp( 48px, 7vw, 92px );
}

.woocommerce-products-header {
	padding: 40px 0 0;
}

.woocommerce-products-header__title {
	font-size: clamp( 1.9rem, 4vw, 2.8rem );
	margin: 0 0 8px;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 26px;
}

.woocommerce-breadcrumb {
	padding: 22px 0 0;
	font-size: 0.9rem;
	color: var( --bounce-muted );
}

.woocommerce-breadcrumb a {
	color: var( --bounce-muted );
}

.woocommerce ul.products {
	display: grid;
	/* auto-fit collapses the empty tracks and the capped track width stops two
	   units stretching the full row, so a short fleet sits centred rather than
	   pinned left with a gap beside it. */
	grid-template-columns: repeat( auto-fit, minmax( 248px, 330px ) );
	justify-content: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border: 2px solid var( --bounce-line );
	border-radius: var( --bounce-radius-lg );
	padding: 14px 14px 20px;
	text-align: left;
	transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product:hover {
	transform: translateY( -4px );
	box-shadow: var( --bounce-shadow-lift );
	border-color: transparent;
}

.woocommerce ul.products li.product a img {
	border-radius: var( --bounce-radius );
	margin: 0 0 14px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --bounce-font-display );
	font-size: 1.16rem !important;
	font-weight: 800;
	padding: 0 !important;
	margin: 0 0 6px;
	color: var( --bounce-ink );
}

.woocommerce ul.products li.product .price {
	color: var( --bounce-ink ) !important;
	font-size: 1.04rem;
	font-weight: 800;
	margin: 0 0 14px;
	display: block;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	margin: auto 0 0;
	align-self: flex-start;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var( --bounce-accent );
	color: var( --bounce-ink );
	font-family: var( --bounce-font-display );
	font-weight: 800;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	padding: 5px 14px;
	line-height: 1.2;
	top: 22px;
	left: 22px;
	right: auto;
	margin: 0;
}

.woocommerce div.product {
	padding: 40px 0 0;
}

.woocommerce div.product .product_title {
	font-size: clamp( 1.8rem, 3.4vw, 2.6rem );
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --bounce-ink );
	font-family: var( --bounce-font-display );
	font-size: 1.9rem;
	font-weight: 800;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: var( --bounce-radius-lg );
}

.woocommerce div.product form.cart {
	margin-top: 8px;
}

.woocommerce div.product form.cart div.quantity {
	margin-right: 12px;
}

.woocommerce .quantity input.qty {
	height: 52px;
	border: 2px solid var( --bounce-line );
	border-radius: 11px;
	font-weight: 700;
}

.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 11px 11px 0 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	border-top: 0;
	border-radius: var( --bounce-radius );
	background: var( --bounce-cream );
	box-shadow: none;
	padding: 16px 20px 16px 52px;
	line-height: 1.5;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 17px;
	left: 20px;
}

.woocommerce-message {
	background: #f1fbf3;
	color: #17552c;
}

.woocommerce-error {
	background: #fff1ee;
	color: #8a2b06;
}

.woocommerce table.shop_table {
	border-radius: var( --bounce-radius );
	border-collapse: separate;
}

.woocommerce-cart table.cart img {
	width: 78px;
	border-radius: 11px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border: 2px solid var( --bounce-line );
	border-radius: 11px;
	padding: 12px 13px;
	min-height: 50px;
	font-size: 1rem;
}

.woocommerce-checkout #payment {
	background: var( --bounce-cream );
	border-radius: var( --bounce-radius-lg );
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
}

/* WooCommerce Blocks (the cart and checkout blocks ship their own classes,
   which none of the selectors above reach). */

.wc-block-components-button:not( .is-link ):not( .wc-block-components-notice-banner__dismiss ),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var( --bounce-primary ) !important;
	color: var( --bounce-primary-ink ) !important;
	font-family: var( --bounce-font-display );
	font-weight: 800;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 15px 28px !important;
	box-shadow: 0 4px 0 var( --bounce-primary-dark );
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wc-block-components-button:not( .is-link ):not( .wc-block-components-notice-banner__dismiss ):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 0 var( --bounce-primary-dark );
}

.wc-block-components-button:not( .is-link ):not( .wc-block-components-notice-banner__dismiss ):active,
.wc-block-cart__submit-button:active {
	transform: translateY( 2px );
	box-shadow: 0 2px 0 var( --bounce-primary-dark );
}

.wc-block-components-button.is-link {
	color: var( --bounce-primary-dark );
}

.wc-block-components-notice-banner__dismiss {
	background: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 6px !important;
}

.wc-block-components-totals-item__label {
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var( --bounce-font-display );
	font-weight: 800;
}

/* The deferred balance is a negative fee, so make it read as information
   rather than as a discount the customer is being given. */
.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value {
	color: var( --bounce-muted );
}

.wc-block-components-text-input input,
.wc-block-components-select__container,
.wc-block-components-textarea {
	border-radius: 11px !important;
}

.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: var( --bounce-radius-lg );
}

/* -------------------------------------------------------------------------
   7. Content pages, blog and footer
   ---------------------------------------------------------------------- */

.page-hero {
	background: var( --bounce-cream );
	padding: clamp( 36px, 5vw, 64px ) 0;
	margin: 0 0 clamp( 32px, 5vw, 56px );
}

.page-hero h1 {
	margin: 0;
}

.page-hero p {
	margin: 12px 0 0;
	color: var( --bounce-muted );
	font-size: 1.1rem;
	max-width: 44em;
}

.entry-content {
	max-width: 760px;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
}

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 5px solid var( --bounce-accent );
	font-size: 1.1rem;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var( --bounce-line );
}

.post-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 26px;
	padding: 0 0 clamp( 40px, 6vw, 72px );
}

.post-card {
	background: #fff;
	border: 2px solid var( --bounce-line );
	border-radius: var( --bounce-radius-lg );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.post-card img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.post-card .body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.post-card h2 {
	font-size: 1.24rem;
	margin: 0;
}

.post-card h2 a {
	color: var( --bounce-ink );
	text-decoration: none;
}

.post-card .meta {
	font-size: 0.84rem;
	color: var( --bounce-muted );
}

.pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 0 0 clamp( 40px, 6vw, 72px );
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 11px;
	border: 2px solid var( --bounce-line );
	text-decoration: none;
	font-weight: 700;
	color: var( --bounce-ink );
}

.pagination .page-numbers.current {
	background: var( --bounce-primary );
	border-color: var( --bounce-primary );
	color: #fff;
}

.site-footer {
	background: var( --bounce-ink );
	color: rgba( 255, 255, 255, 0.76 );
	padding: clamp( 44px, 6vw, 72px ) 0 28px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp( 24px, 4vw, 56px );
	padding-bottom: 36px;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .wp-block-heading {
	font-family: var( --bounce-font-display );
	font-size: 1.04rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	color: #fff;
	margin: 0 0 14px;
}

.site-footer .footer-widget + .footer-widget {
	margin-top: 26px;
}

.site-footer .footer-widget ul,
.site-footer .footer-widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer a {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover {
	color: var( --bounce-accent );
	text-decoration: underline;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: 0.96rem;
}

.footer-logo {
	margin: 0 0 18px;
}

.footer-logo img {
	width: auto;
	max-width: 260px;
	max-height: 150px;
	height: auto;
}

.footer-phone {
	font-family: var( --bounce-font-display );
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	margin: 0 0 6px;
}

.footer-note {
	font-size: 0.94rem;
	max-width: 34em;
}

.footer-bottom {
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-size: 0.86rem;
}

@media ( max-width: 760px ) {
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-logo img {
		max-width: 220px;
	}
}

/* Sticky mobile call bar ------------------------------------------------- */

.call-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var( --bounce-line );
	padding: 10px 12px calc( 10px + env( safe-area-inset-bottom ) );
	gap: 10px;
	box-shadow: 0 -6px 22px rgba( 29, 35, 48, 0.1 );
}

.call-bar .btn {
	flex: 1;
	padding: 14px 10px;
	font-size: 1rem;
}

@media ( max-width: 700px ) {
	.call-bar {
		display: flex;
	}

	body {
		padding-bottom: 76px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}