/* =========================================================================
   Custom Classifieds UK — Front Page redesign
   Recreation of design_handoff_front_page (desktop + mobile).

   Design tokens
     gold #a59055 (hover #c9b47a) · ink #171610 · page #f6f4ef · card #fff
     hairline #e2ded4 · body gray #5c584e · muted #8a857a
     dark band #171610 · dark field #26241e · dark text #f0ede6
     dark muted #b5b1a8 / #8d8a83 · footer #000 · featured tint #faf7ef
   Type: Bebas Neue (display, uppercase) · Barlow (body). Square, no shadows.
   ========================================================================= */

/* Design tokens — defined on the front-page wrapper AND the site header/footer
   so the chrome resolves the variables on every page, not just the home page. */
.cc-fp,
.cc-site-header,
.cc-site-footer,
.cc-mobnav {
	--gold: #a59055;
	--gold-hover: #c9b47a;
	--ink: #171610;
	--page: #f6f4ef;
	--card: #fff;
	--hair: #e2ded4;
	--body: #5c584e;
	--muted: #8a857a;
	--dark: #171610;
	--dark-field: #26241e;
	--dark-text: #f0ede6;
	--dark-muted-a: #b5b1a8;
	--dark-muted-b: #8d8a83;
	--tint: #faf7ef;
}

.cc-fp {
	background: var(--page);
	color: var(--ink);
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	overflow-x: hidden;
	line-height: 1.5;
}

/* Chrome (header/footer) must be self-sufficient outside the .cc-fp wrapper. */
.cc-site-header,
.cc-site-footer {
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.5;
	box-sizing: border-box;
}
.cc-site-header *,
.cc-site-header *::before,
.cc-site-header *::after,
.cc-site-footer *,
.cc-site-footer *::before,
.cc-site-footer *::after {
	box-sizing: border-box;
}
.cc-site-header a,
.cc-site-footer a {
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.cc-site-header img,
.cc-site-footer img {
	max-width: 100%;
}

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

.cc-fp img {
	max-width: 100%;
}

.cc-fp a {
	text-decoration: none;
	color: var(--gold);
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.cc-fp ::selection {
	background: var(--gold);
	color: #000;
}

/* Display type helpers */
.cc-fp-h1,
.cc-fp-h2,
.cc-fp-stat-num,
.cc-fp-card-title,
.cc-fp-card-kicker,
.cc-fp-step-num,
.cc-fp-pkg-name,
.cc-fp-search-submit,
.cc-fp-chip,
.cc-fp-btn,
.cc-fp-logo + .cc-fp-partner,
.cc-fp-viewall {
	font-feature-settings: normal;
}

.cc-fp-h1,
.cc-fp-h2,
.cc-fp-stat-num,
.cc-fp-card-title,
.cc-fp-step-num,
.cc-fp-pkg-name,
.cc-fp-search-submit,
.cc-fp-chip {
	font-family: 'Bebas Neue', 'bebas-neue', 'Barlow', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
}

.cc-fp-gold { color: var(--gold); }

/* Shared buttons */
.cc-fp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Bebas Neue', 'bebas-neue', 'Barlow', sans-serif;
	letter-spacing: 1.5px;
	cursor: pointer;
	text-transform: uppercase;
}

/* ===================== HEADER ===================== */
.cc-fp-header {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 22px 56px;
	background: #fff;
	border-bottom: 1px solid var(--hair);
	position: sticky;
	top: 0;
	z-index: 50;
}
/* Sit below the WP admin bar when it's present. */
body.admin-bar .cc-fp-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .cc-fp-header { top: 46px; }
}

.cc-fp-logo img { height: 53px; display: block; }
.cc-fp-partner img { height: 38px; display: block; }

.cc-fp-nav {
	display: flex;
	gap: 28px;
	margin-left: auto;
	font-size: 15px;
	font-weight: 500;
}
.cc-fp-nav a { color: var(--body); }
.cc-fp-nav a:hover { color: var(--gold); }

.cc-fp-flags {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cc-fp-flags a {
	display: block;
	border: 2px solid transparent;
	line-height: 0;
	opacity: 0.65;
}
.cc-fp-flags a.is-active {
	border-color: var(--gold);
	opacity: 1;
}
.cc-fp-flags img {
	width: 38px;
	height: 24px;
	object-fit: cover;
	display: block;
}

.cc-fp-btn--add {
	background: var(--ink);
	color: #fff;
	font-size: 19px;
	padding: 10px 22px;
}
.cc-fp-btn--add:hover { background: #000; color: #fff; }

/* Mobile-only burger */
.cc-fp-burger {
	display: none;
	background: none;
	border: 0;
	padding: 6px 2px;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}
.cc-fp-burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--ink);
}

/* ===================== MOBILE MENU (hamburger panel) ===================== */
.cc-mobnav { position: fixed; inset: 0; z-index: 1000; display: none; }
.cc-mobnav.is-open { display: block; }
.cc-mobnav-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.cc-mobnav-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(84%, 360px);
	background: var(--ink);
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 18px 26px 30px;
	overflow-y: auto;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}
.cc-mobnav-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cc-mobnav-brand {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gold);
}
.cc-mobnav-close {
	background: none;
	border: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.cc-mobnav-close:hover { color: var(--gold); }
.cc-mobnav-links { display: flex; flex-direction: column; }
.cc-mobnav-links a {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 25px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cc-mobnav-links a:hover { color: var(--gold); }
.cc-mobnav-add {
	margin-top: 24px;
	background: var(--gold);
	color: var(--ink);
	text-align: center;
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 22px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 15px;
}
.cc-mobnav-add:hover { background: var(--gold-hover); color: var(--ink); }
body.cc-mobnav-open { overflow: hidden; }

/* ===================== HERO ===================== */
.cc-fp-hero {
	display: grid;
	grid-template-columns: 560px 1fr;
	min-height: 560px;
}
.cc-fp-hero-copy {
	padding: 70px 0 70px 56px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	justify-content: center;
}
.cc-fp-kicker {
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--gold);
	font-weight: 700;
}
.cc-fp-h1 {
	font-size: 88px;
	line-height: 0.94;
	margin: 0;
	color: var(--ink);
}
.cc-fp-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--body);
	margin: 0;
	max-width: 460px;
}
.cc-fp-hero-cta {
	display: flex;
	gap: 14px;
	margin-top: 6px;
}
/* a.-qualified so the button colours beat the global ".cc-fp a { color: gold }"
   rule (otherwise both CTAs render gold-on-gold / gold-on-dark). */
.cc-fp a.cc-fp-btn--solid {
	background: var(--ink);
	color: #fff;
	font-size: 22px;
	padding: 14px 30px;
}
.cc-fp a.cc-fp-btn--solid:hover { background: #000; color: #fff; }
.cc-fp a.cc-fp-btn--outline {
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: 22px;
	padding: 14px 30px;
}
.cc-fp a.cc-fp-btn--outline:hover { background: var(--ink); color: #fff; }

.cc-fp-stats {
	display: flex;
	gap: 36px;
	margin-top: 20px;
	padding-top: 22px;
	border-top: 1px solid var(--hair);
}
.cc-fp-stat-num {
	font-size: 34px;
	color: var(--ink);
	line-height: 1;
}
.cc-fp-stat-label {
	font-size: 13px;
	color: var(--muted);
	letter-spacing: 1px;
	margin-top: 2px;
}

.cc-fp-hero-media {
	position: relative;
	margin: 40px 56px 40px 40px;
}
.cc-fp-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	background-color: #ddd7cc;
}
.cc-fp-hero-caption {
	position: absolute;
	left: 24px;
	bottom: 24px;
	background: rgba(255, 255, 255, 0.95);
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: calc(100% - 48px);
	/* Let clicks over the caption reach the image link beneath, so the whole
	   picture links to the listing. */
	pointer-events: none;
}
.cc-fp-hero-caption-title {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 22px;
	color: var(--ink);
	text-transform: uppercase;
}
.cc-fp-hero-caption-meta {
	font-size: 15px;
	font-weight: 700;
	color: var(--gold);
}
.cc-fp-hero-caption-meta .price { color: var(--gold); }
.cc-fp-hero-caption-spec {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--muted);
}
.cc-fp-hero-caption-seller {
	font-size: 13px;
	color: var(--body);
	margin-top: 1px;
}

/* ===================== SEARCH BAND ===================== */
.cc-fp-search {
	background: var(--dark);
	padding: 30px 56px 22px;
}
.cc-fp-search-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.cc-fp-field {
	background: var(--dark-field);
	padding: 12px 18px;
	display: block;
	min-width: 0; /* let the field shrink inside its grid column instead of overflowing */
}
.cc-fp-field-label {
	display: block;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--dark-muted-b);
	text-transform: uppercase;
	margin-bottom: 3px;
}
.cc-fp-field select,
.cc-fp-field input[type="text"] {
	width: 100%;
	background: transparent;
	border: 0;
	color: var(--dark-text);
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	padding: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' stroke='%238d8a83' stroke-width='1.5' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 16px;
}
.cc-fp-field input[type="text"] {
	background-image: none;
	padding-right: 0;
	cursor: text;
}
/* Kill the browser's default focus ring / border on the keyword input so it
   blends into the dark field like the other search controls. */
.cc-fp-search .cc-fp-field input[type="text"],
.cc-fp-search .cc-fp-field input[type="text"]:focus,
.cc-fp-search .cc-fp-field input[type="text"]:focus-visible {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
/* Native fallback (before select2 loads / if JS is off): dark option list. */
.cc-fp-field select option {
	color: var(--dark-text);
	background: var(--dark-field);
}
.cc-fp-field input::placeholder { color: var(--dark-muted-b); }

/* From/To range pair inside a dark field */
.cc-fp-range {
	display: flex;
	align-items: center;
	gap: 6px;
}
.cc-fp-range select {
	background-position: right center;
	flex: 1 1 0;
	min-width: 0; /* allow the min/max selects to shrink within the field */
}
.cc-fp-range-sep {
	color: var(--dark-muted-b);
	font-size: 13px;
	flex: 0 0 auto;
}

.cc-fp-search-submit {
	background: var(--gold);
	color: var(--ink);
	border: 0;
	font-size: 24px;
	letter-spacing: 2px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cc-fp-search-submit:hover { background: var(--gold-hover); }

.cc-fp-advanced {
	margin-top: 14px;
}
.cc-fp-advanced .cc-fp-field {
	max-width: 420px;
}
.cc-fp-field--wide { max-width: none; }

.cc-fp-search-links {
	display: flex;
	gap: 24px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
}
.cc-fp-adv-toggle { color: var(--gold); }
.cc-fp-adv-toggle:hover { color: var(--gold-hover); }
.cc-fp-reset { color: var(--dark-muted-b); }
.cc-fp-reset:hover { color: var(--dark-text); }

/* ---- select2-enhanced dropdowns (search band) ----
   The native <select> is replaced by a select2 box; style both the box (so it
   looks like the dark field) and the dropdown popup (dark, gold hover). */
.cc-fp-search .select2-container { width: 100% !important; }
.cc-fp-search .select2-container--default .select2-selection--single {
	background: transparent;
	border: 0;
	border-radius: 0;
	height: auto;
	outline: none;
}
.cc-fp-search .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--dark-text);
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	padding: 0 18px 0 0;
}
.cc-fp-search .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--dark-text);
}
.cc-fp-search .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 0;
	top: 0;
}
.cc-fp-search .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--dark-muted-b) transparent transparent transparent;
}
.cc-fp-search .select2-container--default.select2-container--open .select2-selection__arrow b {
	border-color: transparent transparent var(--dark-muted-b) transparent;
}
/* Range from/to boxes share the cell width. */
.cc-fp-range .select2-container { flex: 1 1 0; min-width: 0; }

/* Dropdown popup (appended to <body>, scoped by our dropdownCssClass).
   NOTE: it lives outside .cc-fp, so the CSS custom properties are NOT in scope
   here. Use literal colours, not var(), or the background comes out transparent. */
.select2-dropdown.cc-s2-drop {
	background: #26241e; /* dark field */
	border: 1px solid #3a372f;
	border-radius: 0;
	color: #f0ede6;
}
.cc-s2-drop .select2-results__options { background: #26241e; }
.cc-s2-drop .select2-results__option {
	background: #26241e;
	color: #f0ede6;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	padding: 9px 14px;
}
.cc-s2-drop .select2-results__option--highlighted[aria-selected] {
	background: #a59055; /* gold */
	color: #171610;
}
.cc-s2-drop .select2-results__option[aria-selected="true"] {
	background: #171610; /* ink */
	color: #a59055;
}
/* Search box disabled (minimumResultsForSearch: Infinity); hidden as a
   guarantee so no empty bar shows at the top of the dropdown. */
.cc-s2-drop .select2-search--dropdown { display: none; }

/* ===================== FEATURED BUILDS ===================== */
.cc-fp-featured {
	padding: 60px 56px;
}
.cc-fp-section-head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 28px;
}
.cc-fp-h2 {
	font-size: 44px;
	margin: 0;
	color: var(--ink);
	line-height: 1;
}
.cc-fp-h2--light { color: #fff; }
.cc-fp-viewall {
	margin-left: auto;
	font-size: 15px;
	font-weight: 600;
}
.cc-fp-viewall:hover { color: var(--gold-hover); }

.cc-fp-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
.cc-fp-card {
	background: #fff;
	border: 1px solid var(--hair);
	display: flex;
	flex-direction: column;
	color: var(--ink);
}
.cc-fp-card-img {
	display: block;
	aspect-ratio: 3 / 2;
	/* Fill the frame uniformly so every card matches (crops to the 3:2 box). */
	background-size: cover;
	background-position: center;
	background-color: #efece5;
}
.cc-fp-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cc-fp-card-kicker {
	font-family: 'Barlow', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--gold);
	font-weight: 700;
	text-transform: uppercase;
}
.cc-fp-card-title {
	font-size: 25px;
	color: var(--ink);
	line-height: 1.05;
}
.cc-fp-card:hover .cc-fp-card-title { color: var(--gold); }
.cc-fp-card-foot {
	display: flex;
	align-items: baseline;
}
.cc-fp-card-price {
	font-size: 21px;
	font-weight: 700;
	color: var(--ink);
}
.cc-fp-card-price .price { color: var(--ink); }
.cc-fp-card-loc {
	margin-left: auto;
	font-size: 13px;
	color: var(--muted);
}

/* Browse-by-style chips — horizontal carousel */
.cc-fp-chips-carousel {
	position: relative;
	margin-top: 34px;
}
.cc-fp-chips {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	padding-bottom: 2px;
}
.cc-fp-chips::-webkit-scrollbar { display: none; } /* WebKit */
.cc-fp-chip {
	flex: 0 0 auto;
	min-width: 190px;
	scroll-snap-align: start;
	border: 1px solid var(--hair);
	background: #fff;
	text-align: center;
	padding: 16px 20px;
	font-size: 19px;
	letter-spacing: 1.5px;
	color: var(--ink);
	white-space: nowrap;
}
.cc-fp-chip:hover {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
/* "Browse all" reads as the show-everything entry. a.-qualified so the ink text
   beats the global ".cc-fp a { color: gold }" rule (otherwise gold-on-gold). */
.cc-fp a.cc-fp-chip--all {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}
.cc-fp a.cc-fp-chip--all:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* Prev / next arrows */
.cc-fp-chips-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gold);
	color: #000;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.cc-fp-chips-arrow:hover { background: var(--gold-hover); }
.cc-fp-chips-arrow--prev { left: -10px; }
.cc-fp-chips-arrow--next { right: -10px; }
.cc-fp-chips-arrow[hidden] { display: none; }
/* Fade hint that there's more to scroll, under the next arrow. */
.cc-fp-chips-carousel::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56px;
	background: linear-gradient(90deg, rgba(246,244,239,0) 0%, var(--page) 80%);
	pointer-events: none;
	z-index: 1;
}
.cc-fp-chips-carousel.is-end::after { opacity: 0; }

/* ===================== FOUNDER VIDEO ===================== */
.cc-fp-video {
	background: var(--dark);
	padding: 70px 56px;
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: 60px;
	align-items: center;
}
.cc-fp-video-copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cc-fp-video .cc-fp-h2 { font-size: 52px; line-height: 0.95; }
.cc-fp-video-text {
	font-size: 17px;
	line-height: 1.6;
	color: var(--dark-muted-a);
	margin: 0 0 15px;
}
.cc-fp-video-text:last-child { margin-bottom: 0; }
.cc-fp-video-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--dark-field);
	overflow: hidden;
}
.cc-fp-video-player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--dark-field);
}
.cc-fp-video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--dark-muted-b);
}
.cc-fp-video-placeholder small { font-size: 11px; letter-spacing: 1px; }

/* ===================== SELL + PRICING ===================== */
.cc-fp-sell {
	background: #fff;
	border-top: 1px solid var(--hair);
	padding: 70px 56px;
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 70px;
}
.cc-fp-sell-copy {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.cc-fp-sell .cc-fp-h2 { font-size: 46px; }
.cc-fp-lead--dark { color: var(--body); }
.cc-fp-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cc-fp-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.cc-fp-step-num {
	font-size: 30px;
	color: var(--gold);
	width: 36px;
	flex: 0 0 auto;
	line-height: 1;
}
.cc-fp-step-title {
	display: block;
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}
.cc-fp-step-desc {
	display: block;
	font-size: 15px;
	color: var(--muted);
	line-height: 1.5;
}

.cc-fp-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-content: start;
}
.cc-fp-pkg {
	border: 1px solid var(--hair);
	background: var(--page);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}
.cc-fp-pkg--featured {
	border: 2px solid var(--gold);
	background: var(--tint);
}
.cc-fp-pkg-badge {
	position: absolute;
	top: -12px;
	left: 24px;
	background: var(--gold);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 4px 10px;
}
.cc-fp-pkg-name {
	font-size: 24px;
	letter-spacing: 1px;
	color: var(--ink);
}
.cc-fp-pkg--featured .cc-fp-pkg-name { color: var(--gold); }
.cc-fp-pkg-price {
	font-size: 40px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1;
}
.cc-fp-pkg-price .amount { font-weight: 700; }
.cc-fp-pkg-features {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}
.cc-fp-pkg--featured .cc-fp-pkg-features { color: var(--body); }
.cc-fp-pkg-features p { margin: 0; }
/* `a.` qualifier keeps these winning over the global `.cc-fp a` gold rule. */
.cc-fp a.cc-fp-pkg-btn {
	margin-top: auto;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: 19px;
	padding: 11px 0;
	width: 100%;
}
.cc-fp a.cc-fp-pkg-btn:hover { background: var(--ink); color: #fff; }
.cc-fp a.cc-fp-pkg-btn--solid {
	background: var(--gold);
	border-color: var(--gold);
	color: #000; /* black so it's legible on the gold fill */
}
.cc-fp a.cc-fp-pkg-btn--solid:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #000; }
.cc-fp-pkg-empty { grid-column: 1 / -1; color: var(--muted); }

/* ===================== FOOTER ===================== */
.cc-fp-footer {
	background: #000;
	padding: 56px 56px 48px;
	position: relative;
}
.cc-fp-footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 70px;
	align-items: center;
}
.cc-fp-seo {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--dark-muted-a);
}
.cc-fp-footer-mid {
	display: flex;
	justify-content: center;
}
.cc-fp-footer-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 22px;
}
.cc-fp-contact {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	padding: 14px 34px;
}
.cc-fp-contact:hover { background: var(--gold); color: #fff; }
.cc-fp-pay {
	display: flex;
	gap: 10px;
}
.cc-fp-pay img { height: 38px; display: block; }
.cc-fp-copy {
	font-size: 15px;
	color: var(--dark-text);
}
.cc-fp-totop {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gold);
	color: #000;
	font-size: 22px;
}
.cc-fp-totop:hover { background: var(--gold-hover); color: #000; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet: relax the fixed hero / sell / video columns. */
@media (max-width: 1200px) {
	.cc-fp-hero { grid-template-columns: 1fr 1fr; }
	.cc-fp-hero-copy { padding: 48px 0 48px 40px; }
	.cc-fp-h1 { font-size: 68px; }
	.cc-fp-video { grid-template-columns: 1fr 1fr; gap: 40px; }
	.cc-fp-sell { grid-template-columns: 1fr; gap: 40px; }
	.cc-fp-chips-arrow--prev { left: -6px; }
	.cc-fp-chips-arrow--next { right: -6px; }
	.cc-fp-header { gap: 24px; padding: 20px 32px; }
	.cc-fp-nav { gap: 20px; }
	.cc-fp-search,
	.cc-fp-featured,
	.cc-fp-video,
	.cc-fp-sell,
	.cc-fp-footer { padding-left: 32px; padding-right: 32px; }
}

/* Tablet: 4 featured cards get too narrow — drop to 2 across. */
@media (max-width: 991px) {
	.cc-fp-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: single-column, stacked, per the mobile design. */
@media (max-width: 767px) {

	/* Header becomes sticky with just logo, flags, burger. */
	.cc-fp-header {
		position: sticky;
		top: 0;
		z-index: 20;
		gap: 12px;
		padding: 12px 16px;
	}
	.cc-fp-header { gap: 8px; }
	.cc-fp-logo { flex: 0 1 auto; min-width: 0; }
	.cc-fp-logo img { height: 34.5px; }
	/* Keep the James Cargo banner in the header on mobile too, sized down so the
	   logo, banner, flags and hamburger all fit a phone width. */
	.cc-fp-partner { display: block; flex: 0 1 auto; min-width: 0; }
	.cc-fp-partner img { height: 20px; }
	.cc-fp-nav { display: none; }
	.cc-fp-btn--add { display: none; }
	.cc-fp-flags { margin-left: auto; gap: 8px; flex: 0 0 auto; }
	.cc-fp-flags img { width: 24px; height: auto; }
	.cc-fp-burger { display: flex; flex: 0 0 auto; }

	/* Hero: full-bleed photo with gradient + caption, then copy. */
	.cc-fp-hero { display: block; }
	.cc-fp-hero-media {
		margin: 0;
		height: 340px;
	}
	.cc-fp-hero-img { min-height: 340px; height: 340px; }
	.cc-fp-hero-media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(23,22,16,0.15) 0%, rgba(23,22,16,0.75) 100%);
		pointer-events: none;
	}
	.cc-fp-hero-caption {
		left: 20px;
		right: 20px;
		bottom: 18px;
		background: none;
		padding: 0;
		max-width: none;
		z-index: 1;
	}
	.cc-fp-hero-caption-title { color: #fff; font-size: 19px; }
	.cc-fp-hero-caption-meta { color: var(--gold); font-size: 14px; }

	.cc-fp-hero-copy {
		padding: 26px 20px 8px;
		gap: 14px;
	}
	.cc-fp-h1 { font-size: 52px; }
	.cc-fp-lead { font-size: 16px; line-height: 1.55; max-width: none; }
	.cc-fp-hero-cta { flex-direction: column; gap: 10px; }
	.cc-fp-btn--solid,
	.cc-fp-btn--outline { font-size: 21px; padding: 15px 0; width: 100%; }
	.cc-fp-stats {
		gap: 0;
		justify-content: space-between;
		margin-top: 10px;
		padding: 16px 4px;
	}
	.cc-fp-stat-num { font-size: 28px; }
	.cc-fp-stats > div { text-align: center; }

	/* Search: everything stacked; pairs where the design pairs them. */
	.cc-fp-search { padding: 24px 20px; }
	.cc-fp-search-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px;
	}
	/* Style, Make, Price and Submit span full width; the middle four pair up. */
	.cc-fp-search-grid > .cc-fp-field:nth-child(1),  /* Style */
	.cc-fp-search-grid > .cc-fp-field:nth-child(2),  /* Make */
	.cc-fp-search-grid > .cc-fp-field:nth-child(7),  /* Price */
	.cc-fp-search-submit {
		grid-column: 1 / -1;
	}
	.cc-fp-search-submit { font-size: 23px; padding: 15px 0; }
	.cc-fp-advanced .cc-fp-field { max-width: none; }
	.cc-fp-search-links { justify-content: center; }

	/* Featured: full-width cards, 2-col chips. */
	.cc-fp-featured { padding: 36px 20px; }
	.cc-fp-h2 { font-size: 34px; }
	.cc-fp-cards { grid-template-columns: 1fr; gap: 18px; }
	.cc-fp-card-img { aspect-ratio: 3 / 2; }
	.cc-fp-card-title { font-size: 23px; }
	.cc-fp-chips-carousel { margin-top: 22px; }
	.cc-fp-chips { gap: 10px; }
	.cc-fp-chip { min-width: 150px; font-size: 18px; padding: 14px 16px; }
	/* Keep the arrows on phones so it is obvious the row scrolls. Smaller and
	   tucked to the very edges, sitting over the fade. The JS still toggles them
	   by scroll position (next shows at the start, prev appears once scrolled),
	   and the [hidden] rule (higher specificity) still wins when JS hides one. */
	.cc-fp-chips-arrow { width: 36px; height: 36px; font-size: 22px; }
	.cc-fp-chips-arrow--prev { left: 0; }
	.cc-fp-chips-arrow--next { right: 0; }
	.cc-fp-chip { font-size: 18px; padding: 14px 0; }

	/* Video: heading, player, then text. */
	.cc-fp-video {
		display: flex;
		flex-direction: column;
		padding: 40px 20px;
		gap: 14px;
	}
	.cc-fp-video .cc-fp-h2 { font-size: 38px; }
	.cc-fp-video-player { order: 2; width: 100%; }
	.cc-fp-video-text { order: 3; font-size: 15px; }
	.cc-fp-video-copy { gap: 14px; }

	/* Pricing: FEATURED first (source order handles Recommended-first). */
	.cc-fp-sell { padding: 40px 20px; gap: 22px; }
	.cc-fp-sell .cc-fp-h2 { font-size: 38px; }
	.cc-fp-packages { grid-template-columns: 1fr; gap: 18px; }
	.cc-fp-pkg--featured { order: -1; }
	.cc-fp-pkg-price { font-size: 34px; }

	/* Footer stacked + centered. */
	.cc-fp-footer { padding: 36px 20px 30px; }
	.cc-fp-footer-grid {
		display: flex;
		flex-direction: column;
		gap: 26px;
		align-items: center;
		text-align: center;
	}
	.cc-fp-seo { order: 4; font-size: 12px; line-height: 1.8; color: var(--dark-muted-b); }
	.cc-fp-footer-mid { order: 1; }
	.cc-fp-footer-right { order: 2; align-items: center; }
	.cc-fp-copy { order: 5; font-size: 13px; }
	.cc-fp-pay img { height: 32px; }
	.cc-fp-totop { width: 48px; height: 48px; font-size: 20px; }
}