/* Greenpower Forklifts — Custom Styles
 * --------------------------------------------------------------
 * General custom CSS file. Sections organised by area below.
 * Every selector is prefixed with .gpf-hp2- to avoid colliding
 * with parent-theme or plugin selectors.
 *
 * Class-name note (styling pass 1):
 * The styling brief uses long names like .gpf-hp2-trust-factors,
 * .gpf-hp2-case-studies, .gpf-hp2-trust-factors__item-link.
 * The actual partials use shorter names (.gpf-hp2-trust,
 * .gpf-hp2-cases, .gpf-hp2-trust__link). Partials are largely
 * read-only in this pass, so the CSS targets the names that
 * actually appear in the rendered HTML.
 * --------------------------------------------------------------
 */

/* ============================================================
   Shared tokens
   ============================================================ */
:root {
	--gpf-hp2-section-padding-y: 60px;
}

@media (max-width: 768px) {
	:root {
		--gpf-hp2-section-padding-y: 40px;
	}
}

/* Standard vertical padding for every section (hero overrides below). */
.gpf-hp2-hero,
.gpf-hp2-trust,
.gpf-hp2-banner,
.gpf-hp2-products,
.gpf-hp2-cases,
.gpf-hp2-testimonials,
.gpf-hp2-content,
.gpf-hp2-faqs,
.gpf-hp2-form,
.gpf-hp2-map {
	padding-top: var(--gpf-hp2-section-padding-y);
	padding-bottom: var(--gpf-hp2-section-padding-y);
}

/* ============================================================
   Sitewide headings — Title Case
   ============================================================
   gpf-styles.css loads on every page (via header.php / header-v2.php), so this
   one base rule makes all headings render Title Case: capitalize upper-cases the
   first letter of each word. CAVEAT: capitalize does NOT lower-case the rest, so
   headings HARD-TYPED in ALL CAPS in the content stay all-caps (those must be
   edited in the back end). Element-level (0,0,1) so it sets the default but won't
   fight any heading that has its own intentional text-transform (e.g. the footer
   widget h6, hero h3 — see report). Headings only — body text/buttons/nav/
   breadcrumb are not h1–h6 and are unaffected. */
h1, h2, h3, h4, h5, h6 {
	text-transform: capitalize;
}

/* ============================================================
   Homepage v2 — Hero
   ============================================================ */
.gpf-hp2-hero {
	/* clear:both + z-index match the Clients hero so the hero is a standalone
	 * block flush BELOW the header (the parent #masthead floats; without clear
	 * the hero rode up under it / stretched on mobile). */
	clear: both;
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: #1a1a1a;
	background-image: var(--gpf-hero-bg-desktop);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	color: #000000;
	font-family: Lato, sans-serif;
	/* Hero overrides the standard section padding — keep it tight to the content. */
	padding-top: 50px;
	padding-bottom: 50px;
	box-sizing: border-box;
}
.gpf-hp2-hero__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	box-sizing: border-box;
}
.gpf-hp2-hero__content {
	width: 100%;
	max-width: 720px;
	text-align: left;
}
.gpf-hp2-hero__headline {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	color: #000000;
}
.gpf-hp2-hero__subline {
	margin: 12px 0 0;
	font-size: 22px;
	font-weight: 400;
	color: #000000;
	line-height: 1.3;
}
.gpf-hp2-hero__bullets {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* Parent theme has a global `li { margin: 0 0 7.5px }` — kill that here
 * so the gap is controlled purely by the flex `gap` above. */
.gpf-hp2-hero__bullet {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	color: #000000;
	line-height: 1.4;
}
.gpf-hp2-hero__check {
	color: #f5841f;
	font-size: 18px;
	flex-shrink: 0;
}
.gpf-hp2-hero__prices {
	margin-top: 32px;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gpf-hp2-hero__price-label {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.2;
}
.gpf-hp2-hero__price-main {
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}
.gpf-hp2-hero__price-secondary {
	margin: 0;
	font-size: 18px;
	color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}
.gpf-hp2-hero__price-secondary-value {
	font-weight: 700;
	color: #ffffff;
	font-size: 22px;
}
.gpf-hp2-hero__price-secondary-label {
	font-weight: 400;
	color: #ffffff;
	font-size: 18px;
}
/* Per-week line — smaller value + label. */
.gpf-hp2-hero__prices .gpf-hp2-hero__price-secondary:last-child .gpf-hp2-hero__price-secondary-value {
	font-size: 20px;
}
.gpf-hp2-hero__prices .gpf-hp2-hero__price-secondary:last-child .gpf-hp2-hero__price-secondary-label {
	font-size: 16px;
}
/* Client revision — hero text WHITE (was black per the original design). Check
 * icons stay orange (not listed here). A subtle text-shadow keeps white legible
 * over the bright areas of the hero image (lighter than a full dark scrim). */
.gpf-hp2-hero__headline,
.gpf-hp2-hero__subline,
.gpf-hp2-hero__bullet,
.gpf-hp2-hero__price-label,
.gpf-hp2-hero__price-main,
.gpf-hp2-hero__price-secondary,
.gpf-hp2-hero__price-secondary-value,
.gpf-hp2-hero__price-secondary-label {
	color: #ffffff;
}
.gpf-hp2-hero__content {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
@media (max-width: 768px) {
	.gpf-hp2-hero {
		padding-top: 50px;
		padding-bottom: 50px;
		/* Mobile bg swap; the partial sets --gpf-hero-bg-mobile (falling back
		   to the desktop URL when the mobile ACF field is empty). */
		background-image: var(--gpf-hero-bg-mobile, var(--gpf-hero-bg-desktop));
		background-position: center center;
	}
	.gpf-hp2-hero__inner {
		padding: 0 20px; /* match the site container's mobile side padding */
	}
	.gpf-hp2-hero__content {
		max-width: 100%;
	}
	.gpf-hp2-hero__headline {
		font-size: 32px;
	}
	.gpf-hp2-hero__subline {
		font-size: 18px;
	}
	.gpf-hp2-hero__bullet {
		font-size: 16px;
	}
	.gpf-hp2-hero__check {
		font-size: 16px;
	}
	.gpf-hp2-hero__price-main {
		font-size: 40px;
	}
	.gpf-hp2-hero__price-secondary-value {
		font-size: 18px;
	}
	.gpf-hp2-hero__prices .gpf-hp2-hero__price-secondary:last-child .gpf-hp2-hero__price-secondary-value {
		font-size: 16px;
	}
}

/* ============================================================
   Homepage v2 — Trust Factors
   ============================================================ */
.gpf-hp2-trust {
	background: #F0F1F3;
	font-family: Lato, sans-serif;
	/* Override the global section padding for this section. */
	padding-top: 40px;
	padding-bottom: 40px;
}
.gpf-hp2-trust__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* Trust factors — Owl carousel (4 items at a time, rotating through all items).
 * Owl manages item widths/layout, so no grid/flex sizing here. Item content is
 * vertically centred within the box (align-items: center) so rows of differing
 * height read evenly. */
.gpf-hp2-trust__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.gpf-hp2-trust__item {
	padding: 12px 16px;
	margin: 0;
	display: flex;
	align-items: center;
	min-height: 80px;
	box-sizing: border-box;
}
.gpf-hp2-trust__link {
	display: flex;
	align-items: center; /* vertically centre icon + text within the box */
	gap: 16px;
	width: 100%;
	color: inherit;
	transition: opacity 0.15s ease-in-out;
}
.gpf-hp2-trust__link:hover {
	opacity: 0.85;
}
.gpf-hp2-trust__link--plain {
	cursor: default;
}
/* Parent theme has a global a:hover rule (green underline). Override it
 * for trust-factor links — !important is justified to defeat the
 * higher-specificity parent rule. */
.gpf-hp2-trust__link,
.gpf-hp2-trust__link:link,
.gpf-hp2-trust__link:visited,
.gpf-hp2-trust__link:hover,
.gpf-hp2-trust__link:focus,
.gpf-hp2-trust__link:active {
	text-decoration: none !important;
	color: inherit !important;
	border-bottom: none !important;
}
.gpf-hp2-trust__link:hover .gpf-hp2-trust__title,
.gpf-hp2-trust__link:hover .gpf-hp2-trust__strapline,
.gpf-hp2-trust__link:focus .gpf-hp2-trust__title,
.gpf-hp2-trust__link:focus .gpf-hp2-trust__strapline {
	color: inherit;
	text-decoration: none;
}
.gpf-hp2-trust__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #42b653;
	font-size: 32px;
}
.gpf-hp2-trust__icon--google {
	font-size: inherit;
}
.gpf-hp2-trust__icon--google svg {
	width: 32px;
	height: 32px;
}
/* Stars now live in the content column (between title and strapline)
 * for the Google Reviews item. */
.gpf-hp2-trust__stars {
	color: #FFB400;
	font-size: 14px;
	display: flex;
	gap: 2px;
	margin: 0 0 4px;
	line-height: 1;
}
.gpf-hp2-trust__content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.gpf-hp2-trust__title {
	font-weight: 700;
	color: #151515;
	font-size: 18px;
	line-height: 1.2;
	margin: 0 0 4px;
}
.gpf-hp2-trust__strapline {
	font-weight: 400;
	color: #555555;
	font-size: 15px;
	line-height: 1.4;
}
/* Google Reviews item only: vertically centre the icon + content within the
 * 80px item row, since the G logo is shorter than the title + stars +
 * strapline stack and looks unbalanced when both align to the top.
 * Other items keep the default flex-start alignment set above. */
.gpf-hp2-trust__item--google .gpf-hp2-trust__link {
	align-self: stretch;
	align-items: center;
}
.gpf-hp2-trust__item--google .gpf-hp2-trust__content {
	justify-content: center;
}
@media (max-width: 768px) {
	.gpf-hp2-trust {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.gpf-hp2-trust__item {
		padding: 8px 12px;
		min-height: 0;
	}
	.gpf-hp2-trust__title {
		font-size: 17px;
	}
	.gpf-hp2-trust__strapline {
		font-size: 14px;
	}
}
/* ============================================================
   Homepage v2 — Products
   ============================================================ */
/* Dealer Day banner band — same width container + section rhythm as the other
 * homepage sections, so the banner image lines up with the product cards below
 * and the section padding (above) keeps the standard inter-section spacing. */
.gpf-hp2-banner__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* No bottom padding (desktop + mobile) — sit tight to the products below; keep
 * only the top padding from the shared section rule for the gap above. */
.gpf-hp2-banner {
	padding-bottom: 0;
}
.gpf-hp2-products__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* Tighten the gap between Products and the full-bleed Case Studies image
   below; Cases has no padding of its own, so the visible gap between
   sections comes entirely from Products' bottom padding. */
.gpf-hp2-products {
	padding-bottom: 40px;
}
@media (max-width: 768px) {
	.gpf-hp2-products {
		padding-bottom: 30px;
	}
}

/* ============================================================
   Homepage v2 — Case Studies
   ============================================================
   Full-bleed section: the image touches the absolute left edge of
   the viewport, fills the left half, and defines the section height.
   The content area fills the right half with its own internal padding.
   The standard --gpf-hp2-section-padding-y token is overridden to 0
   so the image flushes against the section's top and bottom edges.
   ============================================================ */
.gpf-hp2-cases {
	position: relative;
	font-family: Lato, sans-serif;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
}
/* Inner is full-bleed: no max-width, no horizontal padding. */
.gpf-hp2-cases__inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}
.gpf-hp2-cases__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* Belt-and-braces overflow chain — prevent the next slide from peeking
 * on the right edge. Owl Carousel sometimes mis-calculates stage width
 * during init; clipping every container in the chain is the reliable
 * fix. */
.gpf-hp2-cases__list.owl-carousel,
.gpf-hp2-cases .owl-stage-outer,
.gpf-hp2-cases .owl-stage,
.gpf-hp2-cases__item {
	overflow: hidden;
}
.gpf-hp2-cases__item {
	margin: 0;
	box-sizing: border-box;
}
.gpf-hp2-cases__link {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	color: inherit;
	/* Fixed row height so the image section stays a constant size between slides
	 * (it no longer grows/shrinks to each image or to the content). Both columns
	 * stretch to this height and stay level. Mobile resets to auto (see below). */
	height: 620px;
}
/* Defeat parent-theme global link hover (green underline) on the whole-slide link. */
.gpf-hp2-cases__link,
.gpf-hp2-cases__link:link,
.gpf-hp2-cases__link:visited,
.gpf-hp2-cases__link:hover,
.gpf-hp2-cases__link:focus,
.gpf-hp2-cases__link:active {
	text-decoration: none !important;
	color: inherit !important;
	border-bottom: none !important;
}
/* Image cell fills its grid column completely. No aspect-ratio — that
 * was previously capping the cell's height below the (taller) content
 * column, leaving a gap at the bottom. The content column drives the
 * row height; the image stretches to match and crops via object-fit. */
.gpf-hp2-cases__image {
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: #eeeeee;
}
.gpf-hp2-cases__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.gpf-hp2-cases__image--placeholder {
	background: #eeeeee;
	min-height: 360px;
}
/* Right column: vertically centred, left-aligned content. */
.gpf-hp2-cases__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	padding: 80px 96px;
	box-sizing: border-box;
}
.gpf-hp2-cases__logo {
	margin: 0 0 24px;
	text-align: left;
}
.gpf-hp2-cases__logo img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	display: block;
	margin: 0;
}
.gpf-hp2-cases__title {
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 28px;
	color: #151515;
	line-height: 1.25;
	text-align: left;
}
.gpf-hp2-cases__body {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #555555;
	text-align: left;
}
.gpf-hp2-cases__body p {
	margin: 0 0 0.5rem;
}
.gpf-hp2-cases__body p:last-child {
	margin-bottom: 0;
}
/* Carousel navigation arrows.
 *
 * The child theme's style.css has a global `.owl-nav { display: none; }`
 * rule that suppresses ALL Owl Carousel nav buttons site-wide. We have
 * to explicitly re-show the nav inside this section with !important to
 * defeat that rule. Same scope-limited override is applied to the
 * disabled-class hide.
 *
 * Both arrows use the same visual treatment (white circle + soft shadow)
 * for a consistent visual rhythm — the brief permits matching styles
 * "if it looks cleaner overall". White circle on both sides reads
 * correctly whether the arrow sits on the image (left) or the content
 * (right) area. */
.gpf-hp2-cases .owl-nav {
	display: block !important;
}
.gpf-hp2-cases .owl-nav button.owl-prev,
.gpf-hp2-cases .owl-nav button.owl-next {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: #ffffff;
	border: 0;
	border-radius: 50%;
	color: #151515;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	z-index: 10;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.gpf-hp2-cases .owl-nav button.owl-prev {
	left: 16px;
}
.gpf-hp2-cases .owl-nav button.owl-next {
	right: 16px;
}
.gpf-hp2-cases .owl-nav button.owl-prev:hover,
.gpf-hp2-cases .owl-nav button.owl-next:hover,
.gpf-hp2-cases .owl-nav button.owl-prev:focus,
.gpf-hp2-cases .owl-nav button.owl-next:focus {
	color: #42b653;
	background: #ffffff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}
.gpf-hp2-cases .owl-nav button.owl-prev:active,
.gpf-hp2-cases .owl-nav button.owl-next:active {
	transform: translateY(-50%) scale(0.96);
}
.gpf-hp2-cases .owl-nav button.disabled {
	opacity: 0.55;
	cursor: default;
}
@media (max-width: 768px) {
	/* Stack columns on mobile: image full-width on top, content below.
	 * Reset the fixed desktop row height — mobile derives the image height from
	 * a 16:9 aspect ratio at full width. */
	.gpf-hp2-cases__link {
		grid-template-columns: 1fr;
		gap: 0;
		height: auto;
	}
	.gpf-hp2-cases__image,
	.gpf-hp2-cases__image--placeholder {
		aspect-ratio: 16 / 9;
		height: auto; /* derive height from the 16:9 ratio, not the desktop 100% */
	}
	.gpf-hp2-cases__content {
		padding: 32px 24px;
	}
	.gpf-hp2-cases__logo img {
		max-height: 48px;
	}
	.gpf-hp2-cases__title {
		font-size: 22px;
	}
	.gpf-hp2-cases__body {
		font-size: 15px;
	}
	/* Mobile arrows: smaller circles, still on the edges. Vertically
	 * pinned to the middle of the image (not the section midpoint). The
	 * image stacks on top with aspect-ratio 4/3 at full viewport width,
	 * so its vertical centre is at 37.5vw from the section top. */
	.gpf-hp2-cases .owl-nav button.owl-prev,
	.gpf-hp2-cases .owl-nav button.owl-next {
		width: 36px;
		height: 36px;
		font-size: 14px;
		top: 37.5vw;
	}
	.gpf-hp2-cases .owl-nav button.owl-prev {
		left: 8px;
	}
	.gpf-hp2-cases .owl-nav button.owl-next {
		right: 8px;
	}
}

/* ============================================================
   Homepage v2 — Testimonials
   ============================================================ */
.gpf-hp2-testimonials {
	background: #F3F5F4;
	font-family: Lato, sans-serif;
}
.gpf-hp2-testimonials__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.gpf-hp2-testimonials__header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 40px;
}
.gpf-hp2-testimonials__heading {
	margin: 0;
	font-weight: 700;
	color: #151515;
	font-size: 36px;
	line-height: 1.2;
	text-align: center;
}
.gpf-hp2-testimonials__badge {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease-in-out;
}
.gpf-hp2-testimonials__badge,
.gpf-hp2-testimonials__badge:link,
.gpf-hp2-testimonials__badge:visited,
.gpf-hp2-testimonials__badge:hover,
.gpf-hp2-testimonials__badge:focus,
.gpf-hp2-testimonials__badge:active {
	text-decoration: none !important;
	border-bottom: none !important;
}
.gpf-hp2-testimonials__badge:hover {
	opacity: 0.85;
}
.gpf-hp2-testimonials__rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.gpf-hp2-testimonials__stars {
	color: #FFB400;
	display: flex;
	gap: 2px;
	font-size: 16px;
}
.gpf-hp2-testimonials__rating-text {
	color: #1A73E8;
	font-size: 14px;
	font-weight: 500;
}
.gpf-hp2-testimonials__badge:hover .gpf-hp2-testimonials__rating-text {
	text-decoration: underline;
}
.gpf-hp2-testimonials__carousel {
	width: 100%;
}
@media (max-width: 768px) {
	.gpf-hp2-testimonials__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
		margin-bottom: 24px;
	}
	.gpf-hp2-testimonials__heading {
		font-size: 28px;
	}
	.gpf-hp2-testimonials__badge {
		position: static;
		transform: none;
	}
}

/* ============================================================
   Homepage v2 — GreenPower Content
   ============================================================ */
.gpf-hp2-content {
	font-family: Lato, sans-serif;
}
.gpf-hp2-content__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.gpf-hp2-content__heading {
	margin: 0 0 24px;
	font-weight: 700;
	color: #151515;
	font-size: 36px;
	line-height: 1.2;
}
.gpf-hp2-content__body {
	color: #151515;
	line-height: 1.6;
	font-size: 17px;
	/* Constrain to a readable line length on desktop/tablet; a no-op on phones
	 * (viewport < 760px) so mobile stays full-width with no side gaps. */
	max-width: 760px;
}
.gpf-hp2-content__body p {
	margin: 0 0 16px;
	font-size: 17px;
}
.gpf-hp2-content__body p em {
	font-style: italic;
	font-size: 19px;
}
.gpf-hp2-content__body p:first-child em {
	font-size: 19px;
}
.gpf-hp2-content__body h3 {
	margin: 24px 0 16px;
	font-weight: 700;
	color: #151515;
	font-size: 24px;
	line-height: 1.3;
}
.gpf-hp2-content__body ul {
	margin: 0 0 24px;
	padding-left: 1.5rem;
}
.gpf-hp2-content__body li {
	margin-bottom: 8px;
	line-height: 1.5;
	font-size: 17px;
}
/* The closing paragraph inside __body has a 16px bottom margin that
 * collapses against __cta's top margin. Zero out the last-child margin
 * so __cta's own top margin is the only contributor to the visible gap,
 * keeping the CTA close to the content above it. */
.gpf-hp2-content__body > *:last-child {
	margin-bottom: 0;
}
.gpf-hp2-content__cta {
	margin-top: 12px;
}
.gpf-hp2-content__cta-button {
	display: inline-block;
	background: #42b653;
	color: #ffffff;
	padding: 14px 56px;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-family: Lato, sans-serif;
	transition: background 0.15s ease-in-out;
}
.gpf-hp2-content__cta-button,
.gpf-hp2-content__cta-button:link,
.gpf-hp2-content__cta-button:visited,
.gpf-hp2-content__cta-button:hover,
.gpf-hp2-content__cta-button:focus,
.gpf-hp2-content__cta-button:active {
	text-decoration: none !important;
	color: #ffffff !important;
	border-bottom: none !important;
}
.gpf-hp2-content__cta-button:hover,
.gpf-hp2-content__cta-button:focus {
	background: #3aa348;
}
/* ------------------------------------------------------------------
   Two-column layout (text left ~60%, image right ~40%).
   Only engaged when an image is uploaded (--has-image modifier added in
   content.php). With no image the inner stays a normal block and the text
   flows full width, constrained by .gpf-hp2-content__body's max-width above
   exactly as before — graceful-empty, no placeholder.
   ------------------------------------------------------------------ */
.gpf-hp2-content__inner--has-image {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}
.gpf-hp2-content__inner--has-image .gpf-hp2-content__text {
	flex: 1 1 0;
	min-width: 0; /* let the text column shrink rather than overflow */
}
.gpf-hp2-content__inner--has-image .gpf-hp2-content__media {
	flex: 0 0 40%;
	max-width: 40%;
}
.gpf-hp2-content__media {
	margin: 0;
}
.gpf-hp2-content__image {
	display: block;
	width: 100%;
	height: auto;
	/* Show the whole product cut-out — never crop. */
	object-fit: contain;
	/* Soft fade-out "reflection" over the bottom ~18% of the image. The mask
	 * fades the image to transparent, revealing the white section behind it,
	 * so it works regardless of the source image's own background. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}
@media (max-width: 768px) {
	/* Stack: text on top, image below at full width. */
	.gpf-hp2-content__inner--has-image {
		display: block;
		gap: 0;
	}
	.gpf-hp2-content__inner--has-image .gpf-hp2-content__media {
		flex: none;
		max-width: 100%;
		margin-top: 28px;
	}
	.gpf-hp2-content__image {
		/* Keep the cut-out at a natural size on phones, not oversized. */
		width: auto;
		max-width: 100%;
		max-height: 320px;
		margin: 0 auto;
	}
	.gpf-hp2-content__heading {
		font-size: 28px;
	}
	.gpf-hp2-content__body,
	.gpf-hp2-content__body p,
	.gpf-hp2-content__body li {
		font-size: 16px;
	}
	.gpf-hp2-content__body p em,
	.gpf-hp2-content__body p:first-child em {
		font-size: 17px;
	}
	.gpf-hp2-content__body h3 {
		font-size: 20px;
	}
}

/* ============================================================
   Homepage v2 — FAQs
   ============================================================
   Matches the reference FAQ on the WooCommerce category page
   (e.g. /c/electric-pallet-trucks/). Reference uses the parent
   theme's #accordion ruleset; this block replicates the same
   visual treatment scoped to .gpf-hp2-faqs so the parent rules
   do NOT need to be modified.
   --------------------------------------------------------------
   Rem note: the parent theme sets `html { font-size: 62.5% }`,
   so 1rem = 10px site-wide. The reference uses font-size 1.8rem
   (= 18px) and line-height 2.4rem (= 24px) for the question bar
   — pixel values are used here for clarity.
   --------------------------------------------------------------
   accordionjs adds these classes at runtime (from
   great-white/js/accordion.min.js):
     - <ul> gets `.accordionjs`
     - each <li> gets `.acc_section`
     - first child div gets `.acc_head`
     - second child div gets `.acc_content`
     - <li> gains `.acc_active` when open (note the underscore)
   ============================================================ */
.gpf-hp2-faqs {
	font-family: Lato, sans-serif;
	background: #ffffff;
	/* Section background is white; the rows themselves keep the
	 * reference's light grey so they remain visible against the
	 * white section. Padding still mirrors the reference's 50px 0. */
	padding-top: 50px;
	padding-bottom: 50px;
}
.gpf-hp2-faqs__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* Heading kept as our own h2 treatment (the reference uses a freeform
 * WYSIWYG top_content there; no styled heading). */
.gpf-hp2-faqs__heading {
	margin: 0 0 32px;
	font-weight: 700;
	color: #151515;
	font-size: 36px;
	line-height: 1.2;
}
/* List container — mirrors parent's #accordion. */
.gpf-hp2-faqs .accordionjs {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	width: 100%;
}
/* Each row — mirrors parent's #accordion .acc_section. Rows blend into
 * the section background (same #f5f5f5) and are separated by 10px gaps. */
.gpf-hp2-faqs .accordionjs > li {
	position: relative;
	z-index: 10;
	overflow: hidden;
	margin: 0 0 10px 0;
	padding: 0;
	border: 0;
	list-style: none;
	background: #f5f5f5;
}
/* Question bar — mirrors .acc_head. The selectors target both
 * pre-init (`div:first-child`) and post-init (`.acc_head`) so styling
 * is stable through the accordionjs lifecycle. */
.gpf-hp2-faqs .accordionjs > li > div:first-child,
.gpf-hp2-faqs .accordionjs > li > .acc_head {
	display: block;
	position: relative;
	cursor: pointer;
	background: #f5f5f5;
	color: #151515;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	padding: 10px 50px 10px 10px;
}
/* No hover state — matches the reference (cursor pointer only). */

/* Plus / minus icon (SVG asset from the parent theme; referenced via
 * an absolute URL so the relative path doesn't try to resolve against
 * the child theme's css folder). */
.gpf-hp2-faqs .accordionjs > li > div:first-child::after,
.gpf-hp2-faqs .accordionjs > li > .acc_head::after {
	content: '';
	background: url('/wp-content/themes/great-white/images/plus-icon.svg') no-repeat 0 50%;
	background-size: contain;
	width: 16px;
	height: 24px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
/* Open-state icon swap (li.acc_active set by accordionjs). */
.gpf-hp2-faqs .accordionjs > li.acc_active > div:first-child::after,
.gpf-hp2-faqs .accordionjs > li.acc_active > .acc_head::after {
	background-image: url('/wp-content/themes/great-white/images/minus-icon.svg');
}
/* Answer panel — mirrors .acc_content. Transparent background so the
 * row stays visually continuous with the question bar when expanded. */
.gpf-hp2-faqs .accordionjs > li > div.section,
.gpf-hp2-faqs .accordionjs > li > .acc_content {
	padding: 20px;
	overflow: hidden;
	background: transparent;
	color: #151515;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	/* Constrain ONLY the answer text to a readable width — the grey accordion
	 * box (the <li>) stays full width. No-op on phones (< 760px) so mobile is
	 * full width. This `.gpf-hp2-faqs` rule is shared, so it covers BOTH the
	 * Homepage v2 FAQ and the Single Product v2 FAQ (and the Clients FAQ). */
	max-width: 760px;
}
.gpf-hp2-faqs .accordionjs > li > div.section p,
.gpf-hp2-faqs .accordionjs > li > .acc_content p {
	margin: 0 0 1rem;
}
/* Reference rule: last paragraph in the answer has no bottom margin and
 * uses the parent theme's $black colour. */
.gpf-hp2-faqs .accordionjs > li > div.section p:last-of-type,
.gpf-hp2-faqs .accordionjs > li > .acc_content p:last-of-type {
	margin: 0;
	color: #24333e;
}
/* xxlarge breakpoint (parent theme uses 1366px as its $xxlarge):
 * larger left padding on the question bar and the icon moves further
 * inward to match the reference at desktop widths. */
@media (min-width: 1366px) {
	.gpf-hp2-faqs .accordionjs > li > div:first-child,
	.gpf-hp2-faqs .accordionjs > li > .acc_head {
		padding: 20px 0 20px 20px;
	}
	.gpf-hp2-faqs .accordionjs > li > div:first-child::after,
	.gpf-hp2-faqs .accordionjs > li > .acc_head::after {
		width: 20px;
		height: 20px;
		right: 40px;
	}
}
/* Heading on mobile — keep our own h2 treatment tighter. */
@media (max-width: 768px) {
	.gpf-hp2-faqs {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.gpf-hp2-faqs__heading {
		font-size: 28px;
		margin-bottom: 24px;
	}
}

/* ============================================================
   Homepage v2 — Form
   ============================================================ */
.gpf-hp2-form {
	background: #F3F5F4;
	font-family: Lato, sans-serif;
}
.gpf-hp2-form__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.gpf-hp2-form__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
}
.gpf-hp2-form__col {
	min-width: 0;
}
/* Image column is a positioning context so the image inside can be
 * absolutely positioned. Absolute removes the image from the column's
 * natural-height calculation, so the row height is driven by the form
 * column's content alone — both columns then stretch to that height
 * (via the grid's default `align-items: stretch`) and the image fills
 * its column via object-fit. */
.gpf-hp2-form__col--image {
	position: relative;
	overflow: hidden;
}
/* Heading now sits above the two-column row (moved out of the form col
 * in the partial), so its margin-bottom controls the gap from the
 * heading to the columns. */
.gpf-hp2-form__heading {
	margin: 0 0 24px;
	font-weight: 700;
	color: #151515;
	font-size: 28px;
	line-height: 1.2;
	text-align: left;
}
.gpf-hp2-form__form-wrapper {
	width: 100%;
}
/* CF7 markup defenses — scoped to our wrapper only.
 *
 * The CF7 form template uses <p>, <label>, <span class="wpcf7-form-control-wrap">,
 * and often <br> between fields. The parent theme's global label rules
 * (display:block, padding: 8px 15px 8px 0, margin-bottom: 5px) plus default
 * <p> margins were stacking inside each field's wrapper and producing
 * 50–60px gaps between visible inputs. Zero every spacing source so the
 * input's own margin-bottom is the only contributor to the inter-field
 * gap.
 *
 * Inherits from outside (parent or child theme) include:
 *  - `p { line-height: 30px }`, default `p { margin: 1em 0 }`
 *  - several `label { display: block; padding: 8px 15px 8px 0; margin-bottom: 5px }`
 *  - `.wpcf7-form-control.has-spinner.wpcf7-submit { margin: 0 0 20px 0 }`
 */
.gpf-hp2-form__form-wrapper p,
.gpf-hp2-form__form-wrapper label,
.gpf-hp2-form__form-wrapper .wpcf7-form-control-wrap {
	margin: 0;
	padding: 0;
	line-height: normal;
	display: block;
	width: auto;
}
/* Hide any <br> tags CF7 / the form template inserts between fields. */
.gpf-hp2-form__form-wrapper br {
	display: none;
}
.gpf-hp2-form__form-wrapper input[type="text"],
.gpf-hp2-form__form-wrapper input[type="email"],
.gpf-hp2-form__form-wrapper input[type="tel"],
.gpf-hp2-form__form-wrapper input[type="url"],
.gpf-hp2-form__form-wrapper textarea {
	width: 100%;
	padding: 14px 16px;
	background: #ffffff;
	border: 0;
	color: #151515;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	margin-bottom: 10px;
	line-height: 1.4;
	box-sizing: border-box;
}
.gpf-hp2-form__form-wrapper textarea {
	min-height: 140px;
	resize: vertical;
}
.gpf-hp2-form__form-wrapper input::placeholder,
.gpf-hp2-form__form-wrapper textarea::placeholder {
	color: #999999;
	opacity: 1;
}
/* No border on the inputs — use a soft box-shadow focus ring for a11y
 * instead of a border-color change. */
.gpf-hp2-form__form-wrapper input:focus,
.gpf-hp2-form__form-wrapper textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(66, 182, 83, 0.35);
}
/* The child theme has a global submit rule:
 *   input.wpcf7-form-control.has-spinner.wpcf7-submit {
 *     background: #00C750 !important;
 *     padding: 15px 20px;
 *     font-size: 1.6rem;
 *     font-weight: 400;
 *     text-transform: capitalize;
 *     border: none !important;
 *     border-radius: 0px !important;
 *     width: auto;
 *   }
 * Specificity 0,3,1 + an !important on `background` was beating our
 * earlier lower-specificity selectors. Prefixing with `.gpf-hp2-form`
 * raises specificity to 0,3,1 (tie on tree weight; our file loads
 * later so wins), and !important on the brand-green colours defeats
 * the upstream !important. Padding / font-weight / font-size /
 * text-transform / letter-spacing now win on specificity alone. */
.gpf-hp2-form .gpf-hp2-form__form-wrapper input[type="submit"],
.gpf-hp2-form .gpf-hp2-form__form-wrapper button[type="submit"] {
	display: inline-block;
	width: auto;
	background: #42b653 !important;
	color: #ffffff !important;
	border: 0;
	padding: 14px 64px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 10px;
	font-family: 'Lato', sans-serif;
	transition: background 0.15s ease-in-out;
}
.gpf-hp2-form .gpf-hp2-form__form-wrapper input[type="submit"]:hover,
.gpf-hp2-form .gpf-hp2-form__form-wrapper input[type="submit"]:focus,
.gpf-hp2-form .gpf-hp2-form__form-wrapper button[type="submit"]:hover,
.gpf-hp2-form .gpf-hp2-form__form-wrapper button[type="submit"]:focus {
	background: #3aa348 !important;
}
/* The child theme's global `.wpcf7-form-control.has-spinner.wpcf7-submit
 * { margin: 0 0 20px 0 }` rule (specificity 0,3,0) was beating my
 * `.gpf-hp2-form__form-wrapper input[type="submit"]` (specificity 0,2,1)
 * and adding 20px below the submit button — inflating the form column.
 * This block re-specifies the margin with a higher-specificity selector
 * (0,4,0 via the doubled `.gpf-hp2-form` class + `.wpcf7-submit` chain). */
.gpf-hp2-form .wpcf7-form-control.has-spinner.wpcf7-submit,
.gpf-hp2-form .gpf-hp2-form__form-wrapper input[type="submit"],
.gpf-hp2-form .gpf-hp2-form__form-wrapper button[type="submit"] {
	margin: 10px 0 0 0;
}
/* Absolute-positioned inside __col--image (positioning context above)
 * so the image doesn't contribute to the column's intrinsic height.
 *
 * !important is defensive against the parent theme's generic
 * `img { height: auto; max-width: 100% }` rules that can override
 * width/height in some cascade orders, and against WordPress's
 * intrinsic-size width/height HTML attributes. */
.gpf-hp2-form__image,
.gpf-hp2-form__image-placeholder {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: block;
}
.gpf-hp2-form__image {
	object-fit: cover;
	object-position: center center;
}
.gpf-hp2-form__image-placeholder {
	background: #dddddd;
}
/* The CF7 form template wraps fields in <div class="internal-contact-form">,
 * which the child theme's style.css decorates globally with:
 *     background: #f5f5f5; padding: 40px; margin: 40px 0;
 *     border-top: 2px solid #42b653;
 * That decoration was inflating the form column's height by ~122px
 * (which the image column then stretched to match, making the image
 * look disproportionately tall) and was visually detaching the form
 * from our own __heading. Scope-zero these declarations to homepage v2
 * only — the rule remains unchanged everywhere else. */
.gpf-hp2-form .internal-contact-form {
	background: transparent;
	padding: 0;
	margin: 0;
	border-top: 0;
}
@media (max-width: 768px) {
	.gpf-hp2-form__columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	/* When columns stack, the image col can no longer borrow height
	 * from a grid sibling — give it an explicit height so it's still
	 * visible at the bottom of the section. */
	.gpf-hp2-form__col--image {
		height: 280px;
	}
	.gpf-hp2-form__heading {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.gpf-hp2-form__form-wrapper input[type="text"],
	.gpf-hp2-form__form-wrapper input[type="email"],
	.gpf-hp2-form__form-wrapper input[type="tel"],
	.gpf-hp2-form__form-wrapper input[type="url"],
	.gpf-hp2-form__form-wrapper textarea {
		padding: 12px 14px;
	}
}

/* ============================================================
   Homepage v2 — Map + Opening Hours
   ============================================================ */
.gpf-hp2-map {
	font-family: Lato, sans-serif;
}
.gpf-hp2-map__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.gpf-hp2-map__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
}
.gpf-hp2-map__col {
	min-width: 0;
}
.gpf-hp2-map__col--map {
	min-height: 420px;
}
.gpf-hp2-map__iframe {
	width: 100%;
	height: 420px;
	border: 0;
	display: block;
}
.gpf-hp2-map__location-heading {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: #151515;
	font-size: 18px;
	line-height: 1.2;
}
.gpf-hp2-map__address {
	margin: 0 0 24px;
	color: #777777;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
}
.gpf-hp2-map__hours-heading {
	margin: 0 0 12px;
	font-weight: 700;
	color: #42b653;
	font-size: 18px;
	line-height: 1.2;
}
.gpf-hp2-map__hours {
	margin-top: 0;
	color: #151515;
	font-size: 12px;
	line-height: 1.5;
}
/* Full-width table with a thin outer border + thin row separators.
 * No vertical column divider (matches the design reference). */
.gpf-hp2-map__hours table {
	width: 100%;
	border: 1px solid #e5e5e5;
	border-collapse: collapse;
	table-layout: fixed;
}
.gpf-hp2-map__hours table tr {
	border-bottom: 1px solid #e5e5e5;
}
.gpf-hp2-map__hours table tr:last-child {
	border-bottom: 0;
}
.gpf-hp2-map__hours table th,
.gpf-hp2-map__hours table td {
	padding: 12px;
	text-align: left;
	vertical-align: middle;
	font-size: 12px;
	font-weight: 400;
	color: #151515;
	border: 0;
	background: transparent;
}
/* Day column slightly narrower than time column — matches the design. */
.gpf-hp2-map__hours table th:first-child,
.gpf-hp2-map__hours table td:first-child {
	width: 38%;
}
/* If the field's source markup uses a <th> for the day, treat it like a
 * regular cell — design doesn't visually distinguish header from body. */
.gpf-hp2-map__hours table th {
	font-weight: 400;
}
/* Fallback rendering when opening_times is plain paragraphs rather than
 * a table. */
.gpf-hp2-map__hours p {
	margin: 0 0 6px 0;
	font-size: 15px;
	color: #151515;
}
/* Defensive: strip any stray leaked text or wrapping cruft inside the
 * hours area. The partial preg_extracts the <table> from the field
 * value when present, so wrappers like .section / .inner-container /
 * .column won't normally appear — but if they do, neutralise their
 * layout so they don't add visible padding/margins. */
.gpf-hp2-map__hours .section,
.gpf-hp2-map__hours .inner-container,
.gpf-hp2-map__hours .column {
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	width: auto;
	float: none;
	display: block;
}
@media (max-width: 768px) {
	.gpf-hp2-map__columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gpf-hp2-map__col--map {
		min-height: 320px;
	}
	.gpf-hp2-map__iframe {
		height: 320px;
	}
}

/* ==============================================================
 * Single Product v2
 * Preview-only single product design (page-product-preview-v2.php
 * + inc/single-product-v2/). Every selector is prefixed .gpf-sp2-.
 * ============================================================== */

.gpf-sp2 .inner-container {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Item 1 — hide the theme/header page breadcrumb ("HOME » Preview") for THIS
 * template only. Scoped to the stable body class the template adds
 * (`gpf-sp2-page`), plus WordPress's own munged page-template class as a
 * fallback. No other page is affected; header-v2.php is not edited. */
.gpf-sp2-page .breadcrumb-wrap,
.page-template-page-product-preview-v2-php .breadcrumb-wrap {
	display: none !important;
}

/* Hide the breadcrumb band on the Forklift Maintenance page ONLY
 * (/forklift-maintenance/, page-id-5068). The .breadcrumb-wrap / .inner-container
 * / #breadcrumbs classes are shared site-wide, so this is scoped to WordPress's
 * per-page body class `.page-id-5068` to leave every other page's breadcrumb
 * untouched. display:none removes the whole band so no empty gap remains. No
 * !important needed — `.page-id-5068 .breadcrumb-wrap` (0,2,0) beats the band's
 * own styling and there's no rule forcing it visible. */
.page-id-5068 .breadcrumb-wrap {
	display: none;
}

/* --- Breadcrumb (our product breadcrumb) --- */
.gpf-sp2-breadcrumb {
	background: #f4f5f5;
	padding: 14px 0;
}
/* Item 2 — uniform size/weight across all segments. */
.gpf-sp2-breadcrumb,
.gpf-sp2-breadcrumb a,
.gpf-sp2-breadcrumb span {
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
/* Links: neutral dark, no underline/border — defeats the parent global a/a:hover
 * (blue link + green underline) that was making "HOME" blue. */
.gpf-sp2-breadcrumb a.gpf-sp2-breadcrumb__link,
.gpf-sp2-breadcrumb a.gpf-sp2-breadcrumb__link:link,
.gpf-sp2-breadcrumb a.gpf-sp2-breadcrumb__link:visited {
	color: #151515 !important;
	text-decoration: none !important;
	border: 0 !important;
	font-weight: 600;
}
.gpf-sp2-breadcrumb a.gpf-sp2-breadcrumb__link:hover,
.gpf-sp2-breadcrumb a.gpf-sp2-breadcrumb__link:focus {
	color: #42b653 !important;
	text-decoration: none !important;
}
.gpf-sp2-breadcrumb__sep {
	color: #999898;
	margin: 0 8px;
}
.gpf-sp2-breadcrumb__current {
	color: #42b653 !important;
	font-weight: 600;
}

/* Dealer Day banner band on single products (sits under the trust factors).
 * Full-width band; inner matches the site container (max-width 1400 + 20px
 * gutter, centred) so the banner aligns with the other product-page sections.
 * 40px vertical padding mirrors the top section's rhythm. */
.gpf-sp2-banner {
	padding: 40px 0;
}
.gpf-sp2-banner__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* --- Top two-column section --- */
.gpf-sp2-top {
	padding: 40px 0;
}
/* Ensure no v2 wrapper clips the sticky left column (Item 3). */
.gpf-sp2-top,
.gpf-sp2-top__grid,
.gpf-sp2 .inner-container {
	overflow: visible;
}
.gpf-sp2-top__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
/* Item 3 — sticky left media column. It pins 50px from the top of the viewport
 * and travels within the grid row (its containing block), releasing at the end
 * of the two-column section, so it never overlaps the sections below. Disabled
 * on narrow screens (see responsive block). Tweak the offset in one place. */
.gpf-sp2-top__media {
	position: sticky;
	top: 20px;
	align-self: start;
}
.gpf-sp2-top__media img {
	max-width: 100%;
	height: auto;
}
/* Item 3 — remove the WooCommerce gallery zoom (magnifying-glass) trigger,
 * scoped to this template's gallery only. Gallery itself is untouched. */
.gpf-sp2-top__media .woocommerce-product-gallery__trigger {
	display: none !important;
}
/* Item 4 — video player container (HTML5 <video> or oEmbed iframe). */
.gpf-sp2-video {
	margin-top: 20px;
}
.gpf-sp2-video iframe,
.gpf-sp2-video video,
.gpf-sp2-video .wp-video,
.gpf-sp2-video .mejs-container {
	width: 100% !important;
	max-width: 100%;
	border: 0;
	display: block;
}
.gpf-sp2-video iframe {
	aspect-ratio: 16 / 9;
}

.gpf-sp2-top__title {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: #050505;
	margin: 0 0 20px;
}

/* Price row: price block (left) + finance boxes (right) */
.gpf-sp2-top__price-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}
.gpf-sp2-price__heading {
	display: block;
	font-weight: 700;
	color: #050505;
	margin-bottom: 4px;
	/* Item 1 — enlarge "Purchase from" to roughly match +VAT / After Tax Relief. */
	font-size: 16px;
}
.gpf-sp2-price__values {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
/* Each price + its VAT label stacked as one column, so "+VAT" sits directly
 * under the main price and "inc VAT" under the regular price. */
.gpf-sp2-price__col {
	display: flex;
	flex-direction: column;
}
.gpf-sp2-price__main {
	font-family: 'Lato', sans-serif; /* ensure the loaded Lato 900 (Black) face is used */
	font-size: 46px;
	font-weight: 900; /* client revision — make the ex-VAT hero price bolder */
	color: #f5841f;
	line-height: 1;
}
.gpf-sp2-price__regular {
	/* inc-VAT figure: nearly as large as the main ex-VAT figure (46px) but a
	 * lighter weight so it reads as secondary. Grey unchanged. (This class is
	 * used only in the v2 single-product price block; the ≤600px rule below
	 * keeps the mobile size.) Same Lato family as the main figure so the two
	 * numbers match (only the weight differs: 900 vs 600). */
	font-family: 'Lato', sans-serif;
	font-size: 40px;
	font-weight: 600;
	color: #999898;
	line-height: 1;
}
.gpf-sp2-price__vat-main {
	color: #050505;
	font-size: 15px;
	margin-top: 6px;
}
.gpf-sp2-price__vat-regular {
	color: #999898;
	font-size: 15px;
	margin-top: 6px;
}
/* Force the v2 price columns + labels VISIBLE, overriding the external POA /
 * dealer-pricing plugin's site-wide hiding of `.retail` / `.vat` /
 * `.dealer-price-box` children (it collapsed the inc-VAT column to 0 size and
 * hid the "+VAT"/"inc VAT" labels on the preview, where the POA reveal JS isn't
 * running). Scoped under `.gpf-sp2-page` so the LIVE site's real POA boxes are
 * untouched. Markup + POA classes are unchanged, so POA compatibility on live
 * is preserved. `!important` is required to beat the plugin's own hide rules
 * (which use `!important` / equal specificity). font-size is deliberately NOT
 * set here so the responsive price sizes still apply. */
.gpf-sp2-page .gpf-sp2-price__values,
.gpf-sp2-page .gpf-sp2-price__col,
.gpf-sp2-page .gpf-sp2-price__col--main,
.gpf-sp2-page .gpf-sp2-price__col--regular {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
}
.gpf-sp2-page .gpf-sp2-price__main,
.gpf-sp2-page .gpf-sp2-price__regular,
.gpf-sp2-page .gpf-sp2-price__vat-main,
.gpf-sp2-page .gpf-sp2-price__vat-regular {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	max-width: none !important;
}
/* The POA plugin hides the `.vat` label spans via `font-size: 0`, so "+VAT" /
 * "inc VAT" rendered at zero size. Re-assert the intended 15px label size. Only
 * the vat labels get this (NOT __main/__regular, whose sizes are responsive).
 * 15px is fine across breakpoints (small label, no mobile override exists).
 * `!important` to beat the plugin's font-size:0; scoped so live POA is untouched. */
.gpf-sp2-page .gpf-sp2-price__vat-main,
.gpf-sp2-page .gpf-sp2-price__vat-regular {
	font-size: 15px !important;
}
/* The external POA plugin colours `.vat` WHITE (the labels carry the restored
 * POA `vat` class), making them invisible on the white page. Re-assert the
 * design colours: dark "+VAT", grey "inc VAT" (matching the Eco16 reference).
 * `!important` beats the plugin's `.vat` colour; scoped to `.gpf-sp2-page` so
 * live POA boxes are untouched. Only the small labels — the orange £ figure and
 * grey inc figure keep their own colours. */
.gpf-sp2-page .gpf-sp2-price__vat-main {
	color: #050505 !important;
}
.gpf-sp2-page .gpf-sp2-price__vat-regular {
	color: #999898 !important;
}
/* LIVE product page (Issue 1): the same POA-plugin whitening of `.vat` happens
 * on live, so the "+VAT" / "inc VAT" labels render white (invisible) on the light
 * page. The preview fix above is scoped to `.gpf-sp2-page` and doesn't reach live
 * (`.gpf-sp2-live`), so re-assert the design colours — dark "+VAT", grey "inc VAT"
 * — and the 15px size here too, mirroring the preview. `!important` beats the
 * plugin's `.vat` colour/size; scoped to `.gpf-sp2-live` so only the live product
 * page is affected (POA boxes elsewhere untouched). */
.gpf-sp2-live .gpf-sp2-price__vat-main,
.gpf-sp2-live .gpf-sp2-price__vat-regular {
	font-size: 15px !important;
}
.gpf-sp2-live .gpf-sp2-price__vat-main {
	color: #050505 !important;
}
.gpf-sp2-live .gpf-sp2-price__vat-regular {
	color: #999898 !important;
}
/* Flex row so the icon, price number, and label are all vertically centred
 * (the number is larger, so baseline alignment left the label sitting low). */
.gpf-sp2-price__after-tax {
	margin: 14px 0 0;
	color: #050505;
	font-size: 20px; /* Task 6 — ~25% larger (was 16px) */
	display: flex;
	align-items: center;
	gap: 7px;
}
/* The After Tax Relief price number — ~25% larger, still secondary to the
 * 46px main price. */
.gpf-sp2-price__after-tax strong {
	font-size: 28px; /* Task 6 — was 22px */
	font-weight: 800;
	line-height: 1;
}
.gpf-sp2-price__info,
.gpf-sp2-finance__info {
	color: #151415;
	margin-right: 4px;
}
/* Scale the info icon to suit the larger price number (price block only).
 * margin-right:0 — spacing is handled by the flex `gap` above. */
.gpf-sp2-price__info {
	font-size: 25px; /* Task 6 — scaled with the larger After Tax Relief line */
	margin-right: 0;
	flex: 0 0 auto;
}

/* Finance boxes */
.gpf-sp2-finance {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Item 1 — the price-row top-aligns both columns 20px below the title (the
	 * title's margin-bottom = the reference title-to-"Purchase from" gap). The
	 * info icon overhangs the box by 12px (top:-12px), so the box group's visible
	 * top sat only 8px below the title. Offset by the 12px overhang so the group's
	 * visible top clears the title by the same 20px as "Purchase from". */
	margin-top: 12px;
}
.gpf-sp2-finance__box {
	position: relative;
	padding: 16px 22px;
	text-align: center;
	min-width: 170px;
}
.gpf-sp2-finance__box--hp {
	background: #f4f5f5;
}
.gpf-sp2-finance__box--contract {
	background: #daecd5;
}
.gpf-sp2-finance__info {
	position: absolute;
	top: -12px;
	left: -12px;
	font-size: 26px;
	background: #fff;
	border-radius: 50%;
}
.gpf-sp2-finance__label {
	display: block;
	font-size: 15px;
	color: #050505;
}
/* Item 1 — Hire Purchase & Contract Hire values at weight 800 (size unchanged). */
.gpf-sp2-finance__value {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: #050505;
}
/* Reinforce weight 800 on the HP/CH numbers with higher specificity
 * (.gpf-sp2-page scope) so no cascade can reset it. NOTE: no CSS override was
 * found resetting it; the real limiter is the typeface — the inherited Lato
 * family has NO native 800 face (Lato ships 100/300/400/700/900), so 800
 * resolves to the nearest LOADED weight. If the site's Lato subset tops out at
 * 700, 800 renders as 700; a true heavier "black" look requires enqueuing Lato
 * 900 (Black), which is font-loading and outside this CSS-only scope. */
.gpf-sp2-page .gpf-sp2-finance__box .gpf-sp2-finance__value {
	font-weight: 800;
}
.gpf-sp2-finance__from {
	font-size: 13px;
	font-weight: 400;
}
/* Item 1 — weekly figures: same size, heavier weight. */
.gpf-sp2-finance__per {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #050505;
}

/* Lift Height selector */
.gpf-sp2-lift {
	margin-bottom: 20px;
}
.gpf-sp2-lift__title {
	display: block;
	font-size: 16px;
	margin-bottom: 10px;
	color: #050505;
}
.gpf-sp2-lift__options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.gpf-sp2-lift__btn {
	min-width: 130px;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid #d8d8d8;
	background: #fff;
	color: #999898;
	cursor: pointer;
	transition: all 0.15s ease;
}
.gpf-sp2-lift__btn.is-active {
	background: #42b653;
	border-color: #42b653;
	color: #fff;
}

/* Subheading (product short description) + description.
 * Issue 2: this block was brand-green (#42b653), which made the short-description
 * heading/paragraph/"Key Features:" lead-in render green — not intended; it should
 * read as normal dark body text. Set to the site/v2 dark (#151515). This is the
 * single source rule (unscoped), so the correction applies on BOTH the live
 * product page and the gated preview, keeping them consistent. Weight/size kept
 * (only the colour was wrong). Genuine green accents elsewhere (related cards,
 * etc.) are untouched. */
.gpf-sp2-top__subheading {
	color: #151515;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 14px;
}
.gpf-sp2-top__desc {
	color: #555;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 28px;
}

/* CTAs */
.gpf-sp2-cta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 36px;
}
.gpf-sp2-cta__btn {
	display: block;
	text-align: center;
	padding: 18px 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}
/* Button text colours pinned with !important + :link/:visited so the parent
 * theme's global link colour (#1095c1 teal) can't bleed into them — this was
 * turning the EMAIL ENQUIRY label blue. */
.gpf-sp2-cta__btn--buy,
.gpf-sp2-cta__btn--buy:link,
.gpf-sp2-cta__btn--buy:visited {
	background: #f5841f;
	color: #ffffff !important;
}
.gpf-sp2-cta__btn--call,
.gpf-sp2-cta__btn--call:link,
.gpf-sp2-cta__btn--call:visited {
	background: #d3d3d3;
	color: #151415 !important;
}
.gpf-sp2-cta__btn--email,
.gpf-sp2-cta__btn--email:link,
.gpf-sp2-cta__btn--email:visited {
	background: #151415;
	color: #ffffff !important;
}
/* Item 6 — clean hover/focus/active for all three CTAs. Defeats the parent
 * global a:hover (green + underline + border). No green, no underline, no border. */
.gpf-sp2-cta__btn,
.gpf-sp2-cta__btn:link,
.gpf-sp2-cta__btn:visited,
.gpf-sp2-cta__btn:hover,
.gpf-sp2-cta__btn:focus,
.gpf-sp2-cta__btn:active {
	text-decoration: none !important;
	border: 0 !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.gpf-sp2-cta__btn--buy:hover,
.gpf-sp2-cta__btn--buy:focus,
.gpf-sp2-cta__btn--buy:active,
.gpf-sp2-cta__btn--call:hover,
.gpf-sp2-cta__btn--call:focus,
.gpf-sp2-cta__btn--call:active,
.gpf-sp2-cta__btn--email:hover,
.gpf-sp2-cta__btn--email:focus,
.gpf-sp2-cta__btn--email:active {
	background-color: #151415 !important;
	color: #ffffff !important;
}

/* Tabs */
.gpf-sp2-tabs {
	margin-bottom: 0;
}
.gpf-sp2-tabs__nav {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Zero the list-item bottom margin (a global `li` margin) that was pushing the
 * content panel away from the tab buttons, so the panel sits flush beneath. */
.gpf-sp2-tabs .gpf-sp2-tabs__nav li,
.gpf-sp2-tabs__tab {
	margin: 0;
}
.gpf-sp2-tabs__tab {
	padding: 14px 22px;
	background: #151415;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	border-top: 3px solid transparent; /* reserve space so active state doesn't shift */
}
/* Green top accent on the ACTIVE tab only (Item 1). */
.gpf-sp2-tabs__tab.is-active {
	background: #f6f6f7;
	color: #151415;
	border-top: 3px solid #42b653;
}
.gpf-sp2-tabs__panel {
	display: none;
	background: #f6f6f7;
	padding: 28px;
	margin-top: 0; /* flush under the tab buttons */
	/* Dark default for the tab WYSIWYG body text (uncoloured in the source). */
	color: #151515;
}
/* The tab WYSIWYG headings (e.g. Features <h3>) carry no colour in the source,
 * so they inherited the parent theme's muted `h1..h6 { color:#24333e }` default
 * and read faint on the light panel. Force the v2 near-black so they're crisp
 * and consistent with the other v2 headings. Applies to all three tab panels
 * (Features / Specifications / Data Sheet). `.gpf-sp2-tabs__panel h3` (0,1,1)
 * beats the element-level parent rule (0,0,1), so NO !important is needed; an
 * editor's intentional inline colour can still win. */
.gpf-sp2-tabs__panel h1,
.gpf-sp2-tabs__panel h2,
.gpf-sp2-tabs__panel h3,
.gpf-sp2-tabs__panel h4,
.gpf-sp2-tabs__panel h5,
.gpf-sp2-tabs__panel h6 {
	color: #151515;
}

/* Specifications table — two columns, zebra striping.
 * The Specifications panel drops its own inner padding so the table is
 * full-bleed and reads as one cohesive block (no "boxed-in" floating look).
 * The table provides its own rhythm via per-cell padding; stripes span the
 * full panel width edge-to-edge. The spec_tab WYSIWYG intro keeps padding.
 * Scoped to the specs panel via [data-panel] so Features / Data Sheet panels
 * keep their normal 28px padding. */
.gpf-sp2-tabs__panel[data-panel="specs"] {
	padding: 0;
}
.gpf-sp2-spec-intro {
	margin: 0;
	padding: 20px 28px;
}
.gpf-sp2-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.gpf-sp2-spec-table__row:nth-child(odd) {
	background: #f4f5f5;
}
.gpf-sp2-spec-table__row:nth-child(even) {
	background: transparent;
}
.gpf-sp2-spec-table__label,
.gpf-sp2-spec-table__value {
	padding: 14px 28px;
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.4;
}
.gpf-sp2-spec-table__label {
	width: 48%;
	font-weight: 700;
	color: #151415;
}
.gpf-sp2-spec-table__value {
	color: #444;
	font-weight: 400;
}
.gpf-sp2-tabs__panel.is-active {
	display: block;
}
.gpf-sp2-tabs__panel ul {
	margin: 0;
	padding-left: 18px;
}
.gpf-sp2-tabs__panel li {
	margin-bottom: 10px;
	color: #555;
}

/* --- Trust factors (Item 8) ---
 * Reuses the Homepage v2 `.gpf-hp2-trust*` markup + CSS verbatim, so no
 * Single Product v2 trust CSS is needed here. The section padding is provided
 * by the existing `.gpf-hp2-trust` rules. */

/* --- FAQ (Item 9) ---
 * Reuses the Homepage v2 `.gpf-hp2-faqs` + `.accordionjs` markup + CSS, so no
 * Single Product v2 FAQ CSS is needed here. */

/* --- Enquiry form + image (Item 9) ---
 * Reuses the Homepage v2 `.gpf-hp2-form*` markup + CSS (background #F3F5F4,
 * two-column grid, CF7 input styling, green #42b653 submit). Only two small
 * additions are needed for the product-page variant: */
.gpf-sp2-enquiry__subline {
	margin: -12px 0 24px;
	color: #555;
	font-size: 16px;
}
/* When there's no enquiry image, collapse the two-column grid to one. */
.gpf-sp2-enquiry--noimg .gpf-hp2-form__columns {
	grid-template-columns: 1fr;
}
/* Enquiry-section image: show the WHOLE image (contain), never cropped/stretched
 * — real per-product images (and the featured-image fallback) should display in
 * full. Scoped to .gpf-sp2-enquiry so the homepage form image keeps its own
 * cover behaviour. Higher specificity than the shared `.gpf-hp2-form__image`
 * rule, so no !important needed. Box size is unchanged (the shared
 * position/width/height rules still apply); only fit + background change. The
 * white panel gives `contain`'s letterboxing a clean, intentional backdrop
 * instead of gaps on the grey form background. */
.gpf-sp2-enquiry .gpf-hp2-form__col--image {
	background: #ffffff;
}
.gpf-sp2-enquiry .gpf-hp2-form__image {
	object-fit: contain;
	object-position: center center;
}

/* --- Related products (Item 10) ---
 * The cards are the standard WooCommerce loop wrapped in `.woocommerce`, so the
 * parent theme's live card CSS styles them. Only the heading is ours. */
.gpf-sp2-related {
	padding: 50px 0;
}
.gpf-sp2-related__heading {
	font-size: 28px;
	font-weight: 700;
	color: #050505;
	margin: 0 0 28px;
}
/* Force the NEW brand green (#42b653) on the reused related-product card
 * elements so no legacy green remains. Anchored to `.gpf-sp2-related` — a class
 * unique to the v2 single-product related section — so these rules match on BOTH
 * the gated preview AND the live product page (the v2 design is now live), and
 * nothing else on the site (which never carries `.gpf-sp2-related`) is affected.
 * `!important` is used because the parent theme's own card rules set these
 * colours with high specificity / their own !important and can't otherwise be
 * beaten. */

/* BUY NOW / add-to-cart button: background + hover + focus. */
.gpf-sp2-related .woocommerce ul.products li.product .button,
.gpf-sp2-related .woocommerce ul.products li.product .button:hover,
.gpf-sp2-related .woocommerce ul.products li.product .button:focus,
.gpf-sp2-related .woocommerce ul.products li.product .added_to_cart {
	background-color: #42b653 !important;
	border-color: #42b653 !important;
	color: #ffffff !important;
}
/* Sale badge background. */
.gpf-sp2-related .woocommerce ul.products li.product span.onsale {
	background-color: #42b653 !important;
	border-color: #42b653 !important;
	color: #ffffff !important;
}
/* Price text ("Now £X" / amounts) and any green links/accents in the card. */
.gpf-sp2-related .woocommerce ul.products li.product .price,
.gpf-sp2-related .woocommerce ul.products li.product .price ins,
.gpf-sp2-related .woocommerce ul.products li.product .price ins .amount,
.gpf-sp2-related .woocommerce ul.products li.product .price .amount {
	color: #42b653 !important;
}
.gpf-sp2-related .woocommerce ul.products li.product a:hover,
.gpf-sp2-related .woocommerce ul.products li.product a:focus,
.gpf-sp2-related .woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
	color: #42b653 !important;
}

/* --- Responsive --- */
@media (max-width: 992px) {
	.gpf-sp2-top__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Item 3 — disable sticky when columns stack. */
	.gpf-sp2-top__media {
		position: static;
		top: auto;
	}
	.gpf-sp2-top__price-row {
		grid-template-columns: 1fr;
	}
	.gpf-sp2-finance {
		flex-direction: row;
	}

	/* --- Mobile horizontal-overflow fix (top section) ---
	 * ROOT CAUSE: the grid tracks default to min-width:auto, so a track can't
	 * shrink below its widest descendant. The widest descendant is the
	 * WooCommerce gallery, which here is NOT wrapped in `.woocommerce div.product`
	 * (the v2 template renders the partials directly), so WC's responsive gallery
	 * width never applies and flexslider's inline widths push the stacked column
	 * wider than the viewport → sideways scroll. */
	.gpf-sp2-top__media,
	.gpf-sp2-top__summary {
		min-width: 0; /* allow the stacked tracks to shrink to the viewport */
	}
	/* Cap the gallery (and its flexslider wrappers) to the column width. */
	.gpf-sp2-top__media .woocommerce-product-gallery,
	.gpf-sp2-top__media .woocommerce-product-gallery__wrapper,
	.gpf-sp2-top__media .flex-viewport,
	.gpf-sp2-top__media .flex-control-thumbs {
		max-width: 100%;
	}
	/* Big ex/inc price figures wrap instead of forcing a wider row. */
	.gpf-sp2-price__values {
		flex-wrap: wrap;
	}
	/* Secondary safety net only (the rules above are the real fix): clip any
	 * residual overflow to the section box. Safe here because the sticky media
	 * column is disabled at this breakpoint, so nothing needs to escape. */
	.gpf-sp2-top {
		overflow-x: hidden;
	}
}
@media (max-width: 600px) {
	.gpf-sp2-cta {
		grid-template-columns: 1fr;
	}
	.gpf-sp2-price__main {
		font-size: 36px;
	}
	.gpf-sp2-price__regular {
		font-size: 26px;
	}
	/* Item 4 — Hire Purchase + Contract Hire side by side on mobile.
	 * flex:1 so each shares the row; if only one box renders it fills the
	 * width sensibly (no broken half-row). Backgrounds/content unchanged. */
	.gpf-sp2-finance {
		flex-direction: row;
		gap: 12px;
	}
	.gpf-sp2-finance__box {
		min-width: 0;
		flex: 1;
		padding: 14px 12px;
	}
	/* Mobile spec table — keep the two-column side-by-side layout (NOT stacked),
	 * just tighter: smaller horizontal padding, slightly narrower label column,
	 * a subtle grey row divider, and values allowed to wrap within their cell. */
	.gpf-sp2-spec-table__label,
	.gpf-sp2-spec-table__value {
		padding: 11px 12px;
	}
	.gpf-sp2-spec-table__label {
		width: 42%;
	}
	.gpf-sp2-spec-table__value {
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	.gpf-sp2-spec-table__row {
		border-bottom: 1px solid #ececec;
	}
}

/* ==============================================================
 * v2 section width alignment with the site container
 * --------------------------------------------------------------
 * The site-wide content wrapper is `.inner-container`
 * (max-width:1400px; margin:0 auto; padding:0 20px; and padding:0
 * at >=1441px). The header content uses it, so the v2 section
 * inner-wrappers are matched to it above (1400px / 0 20px). At
 * >=1441px the parent drops the container padding to 0, so we
 * mirror that here for the v2 inner-wrappers so their content
 * edges line up exactly with the header at large widths.
 * (.gpf-hp2-cases__inner is intentionally full-bleed for the
 * carousel and is deliberately excluded.)
 * ============================================================== */
@media (min-width: 1441px) {
	.gpf-hp2-hero__inner,
	.gpf-hp2-trust__inner,
	.gpf-hp2-products__inner,
	.gpf-hp2-testimonials__inner,
	.gpf-hp2-content__inner,
	.gpf-hp2-faqs__inner,
	.gpf-hp2-form__inner,
	.gpf-hp2-map__inner,
	.gpf-sp2 .inner-container {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==============================================================
 * Clients Page
 * Assignable page template (page-clients.php + inc/clients-page/).
 * Clients-specific sections are prefixed .gpf-clients-. The reused
 * sections (testimonials, FAQ, form, map) use the Homepage v2
 * .gpf-hp2-* classes and are styled by those existing blocks.
 * ============================================================== */

/* Item 1 — hide the theme/header page breadcrumb on this template only. */
.gpf-clients-page .breadcrumb-wrap {
	display: none !important;
}
/* Horizontal-overflow safety net (no mobile horizontal scroll). Applied to the
 * BODY (template-scoped), not the .gpf-clients main element — on the main,
 * `overflow-x:hidden` promotes overflow-y to `auto` (CSS spec), turning it into
 * a scroll container that can collapse the page on mobile. On <body> it is the
 * standard, side-effect-free guard. */
body.gpf-clients-page {
	overflow-x: hidden;
}

/* Inner wrappers match the site container (1400px / 0 20px). */
.gpf-clients-hero__inner,
.gpf-clients-logos__inner,
.gpf-clients-videos__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* --- Hero ---
 * The parent header (#masthead) is `float: left; width: 100%`, so an uncleared
 * block after it can ride up underneath it. `clear: both` makes the hero a
 * standalone block flush BELOW the header (matches the homepage-hero behaviour
 * of header-on-top / hero-beneath). position:relative + content z-index keep the
 * heading/subheading/badge above the background image on desktop. */
.gpf-clients-hero {
	clear: both;
	position: relative;
	z-index: 1;
	width: 100%;
	/* Default background = the Homepage v2 hero image file (referenced in the
	 * homepage ACF registration). Matches the homepage hero's bg-colour #1a1a1a,
	 * size:cover, position:center center. An admin-set gpf_clients_hero_bg still
	 * overrides this via the inline background-image in hero.php. */
	background: #1a1a1a url('https://greenpowerforklifts.com/wp-content/uploads/2026/06/GP_New_Web_Banner_Mobile-2.webp') center center / cover no-repeat;
	font-family: Lato, sans-serif;
	box-sizing: border-box;
}
.gpf-clients-hero__inner {
	min-height: 524px; /* desktop height (client spec) */
	display: flex;
	align-items: center;        /* vertically centred */
	justify-content: flex-start; /* horizontally left-aligned */
}
.gpf-clients-hero__content {
	position: relative;
	z-index: 2;
	padding: 40px 0;
	max-width: 640px;
	width: 100%;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); /* keep white legible on the image */
}
.gpf-clients-hero__heading {
	margin: 0;
	font-size: 44px;
	line-height: 1.1;
	font-weight: 800;
	color: #ffffff;
}
.gpf-clients-hero__subheading {
	margin: 6px 0 0;
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
}
.gpf-clients-hero__badge {
	display: inline-flex;
	align-items: center; /* G icon vertically centred against the stacked stars+text */
	gap: 8px;
	margin-top: 14px;
	text-decoration: none;
	color: #ffffff;
}
/* Stars (top) over "5 stars" (below), stacked to the right of the G icon. */
.gpf-clients-hero__rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.gpf-clients-hero__stars {
	color: #ffb400;
	font-size: 16px;
	display: inline-flex;
	gap: 2px;
}
.gpf-clients-hero__rating-text {
	font-weight: 600;
	color: #ffffff; /* white — sits under the stars on the dark hero */
}

/* --- Logos bar --- */
.gpf-clients-logos {
	background: #f4f5f5;
	padding: 30px 0;
}
.gpf-clients-logos__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gpf-clients-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
}
.gpf-clients-logos__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gpf-clients-logos__img {
	max-height: 72px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

/* --- Video gallery --- */
.gpf-clients-videos {
	padding: 50px 0;
	overflow: hidden; /* safety net: nothing in this section overflows the page width */
}
/* Big preview: clean native player, no green frame. Width matches the thumbnail
 * row's item area (both 900px, centred) so they line up. */
.gpf-clients-video__preview {
	max-width: 900px;
	margin: 0 auto;
	background: #000;
	line-height: 0;
}
.gpf-clients-video__player {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	background: #000;
}
/* Branded green play button (circle + white triangle) — thumbnails only. */
.gpf-clients-video__playicon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #42b653;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gpf-clients-video__playicon::before {
	content: '';
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #ffffff;
	margin-left: 3px;
}

/* Thumbnail carousel. Wrap = 900px items + 72px gutters each side (1044px), so
 * the item area (900px) lines up with the big preview, and the (doubled) arrows
 * sit in the gutters OUTSIDE the thumbnails. */
.gpf-clients-video__thumbs-wrap {
	position: relative;
	max-width: 1044px;
	margin: 28px auto 0;
	padding: 0 72px;
	box-sizing: border-box;
}
/* Defeat Owl's `.owl-carousel{position:relative}` so the absolutely-positioned
 * nav arrows anchor to the WRAP (gutters), not the carousel root (which spans
 * only the item area and was making the arrows land on the first/last thumb). */
.gpf-clients-video__thumbs.owl-carousel {
	position: static;
}
.gpf-clients-video__thumb-cell {
	text-align: center;
}
.gpf-clients-video__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 3px solid transparent;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.gpf-clients-video__thumb.is-active {
	border-color: #42b653; /* active highlight kept */
}
.gpf-clients-video__thumb-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: #dddddd;
	position: relative;
	overflow: hidden;
}
/* Poster image or auto-frame video both fill the thumbnail. */
.gpf-clients-video__thumb-img,
.gpf-clients-video__thumb-vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gpf-clients-video__thumb-media .gpf-clients-video__playicon {
	position: relative;
	z-index: 2; /* over the poster/frame */
}
.gpf-clients-video__thumb-title {
	display: block;
	text-align: center;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.3;
	color: #151415;
}
/* Owl nav arrows — in the wrap's gutters, OUTSIDE the thumbnails, doubled size. */
.gpf-clients-video__thumbs .owl-nav button.owl-prev,
.gpf-clients-video__thumbs .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
}
.gpf-clients-video__thumbs .owl-nav button.owl-prev {
	left: 0;
}
.gpf-clients-video__thumbs .owl-nav button.owl-next {
	right: 0;
}
.gpf-clients-video__nav-prev,
.gpf-clients-video__nav-next {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-top: 5px solid #151415;
	border-right: 5px solid #151415;
}
.gpf-clients-video__nav-prev {
	transform: rotate(-135deg);
}
.gpf-clients-video__nav-next {
	transform: rotate(45deg);
}
.gpf-clients-video__thumbs .owl-nav button.owl-prev:hover .gpf-clients-video__nav-prev,
.gpf-clients-video__thumbs .owl-nav button.owl-next:hover .gpf-clients-video__nav-next {
	border-color: #42b653;
}
.gpf-clients-video__thumbs .owl-nav .disabled {
	opacity: 0.3;
	cursor: default;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.gpf-clients-hero__inner {
		min-height: 492px; /* mobile height (client spec) */
	}
	/* Tighter gutters so 2 thumbnails + edge arrows fit with no horizontal scroll. */
	.gpf-clients-video__thumbs-wrap {
		max-width: 100%;
		padding: 0 40px;
	}
	.gpf-clients-video__thumbs .owl-nav button.owl-prev,
	.gpf-clients-video__thumbs .owl-nav button.owl-next {
		width: 40px;
		height: 40px;
	}
	.gpf-clients-video__nav-prev,
	.gpf-clients-video__nav-next {
		width: 18px;
		height: 18px;
		border-top-width: 3px;
		border-right-width: 3px;
	}
}
@media (max-width: 600px) {
	.gpf-clients-hero__inner {
		min-height: 492px; /* mobile height (client spec) — same as ≤768 */
	}
	.gpf-clients-hero__heading {
		font-size: 32px;
	}
	.gpf-clients-hero__subheading {
		font-size: 16px;
	}
}
@media (min-width: 1441px) {
	.gpf-clients-hero__inner,
	.gpf-clients-logos__inner,
	.gpf-clients-videos__inner {
		padding-left: 0;
		padding-right: 0;
	}
}