/* =========================================================================
   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,
.cloudflare-geo-redirect {
	--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;
}

/* Sticky footer: short pages (approve/login/404) should still push the footer
   to the bottom of the viewport instead of leaving blank space beneath it. The
   footer sits inside #wrapper-container (after #apus-main-content), so make the
   wrapper a full-height flex column and let the content region grow. */
#wrapper-container { display: flex; flex-direction: column; min-height: 100vh; }
#apus-main-content { flex: 1 0 auto; }
.cc-site-footer { flex-shrink: 0; }

/* 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); }
/* Cart link (shown only when the cart has items), sits after My Account. */
.cc-fp-cart { display: inline-flex; align-items: center; gap: 7px; color: var(--ink) !important; font-weight: 600; }
.cc-fp-cart:hover { color: var(--gold) !important; }
.cc-fp-cart-icon { flex-shrink: 0; }
.cc-fp-cart-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
	background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1;
}
/* Mobile-only cart icon in the top bar, sits next to the burger. Hidden on
   desktop (the nav cart above covers that); shown at the mobile breakpoint. */
.cc-fp-cart-mobile { display: none; position: relative; color: var(--ink); align-items: center; }
.cc-fp-cart-mobile .cc-fp-cart-count {
	position: absolute; top: -6px; right: -8px;
	min-width: 17px; height: 17px; padding: 0 4px; font-size: 11px;
}

/* Currency picker: a real custom dropdown (button + styled menu), so the whole
   control (chevron included) is clickable and the open list matches the theme. */
.cc-currency { position: relative; }
.cc-currency-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--hair);
	background: var(--dark-field);
	color: var(--dark-text);
	cursor: pointer;
	font-family: 'Barlow', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}
.cc-currency-toggle:hover { border-color: var(--gold); }
.cc-currency-sym { color: var(--gold); font-size: 15px; font-weight: 700; line-height: 1; }
.cc-currency-code { line-height: 1; }
.cc-currency-caret {
	width: 7px;
	height: 7px;
	margin-left: 1px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}
.cc-currency.is-open .cc-currency-caret { transform: translateY(1px) rotate(-135deg); }

.cc-currency-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 200;
	margin: 0;
	padding: 4px;
	list-style: none;
	min-width: 100%;
	background: var(--dark-field);
	border: 1px solid var(--hair);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	display: none;
}
.cc-currency.is-open .cc-currency-menu { display: block; }
.cc-currency-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	cursor: pointer;
	white-space: nowrap;
	color: var(--dark-text);
	font-family: 'Barlow', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cc-currency-opt:hover,
.cc-currency-opt.is-selected { background: var(--gold); color: var(--ink); }
.cc-currency-opt-sym { color: var(--gold); font-size: 15px; font-weight: 700; min-width: 12px; text-align: center; }
.cc-currency-opt:hover .cc-currency-opt-sym,
.cc-currency-opt.is-selected .cc-currency-opt-sym { color: var(--ink); }

/* Currency row inside the mobile menu */
.cc-mobnav-currency {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
}
.cc-mobnav-currency-label {
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-size: 18px;
}
/* In the slide-out menu the dropdown opens to the left so it stays on-screen. */
.cc-currency--mobile .cc-currency-menu { right: 0; left: auto; }

.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; }

/* ===================== REGION REDIRECT MODAL ===================== */
/* Restyle the cloudflare-geo-redirect plugin's Bootstrap modal ("Visit our
   local site?") to match the design: centered, square, ink/gold, Bebas. The
   plugin shows it with Bootstrap's .modal('show'); we only override the look.
   Loads site-wide since the modal can appear on any page. */
.cloudflare-geo-redirect.modal { z-index: 1100; padding: 20px; }
.cloudflare-geo-redirect.modal.in { display: flex !important; align-items: center; justify-content: center; }
.cloudflare-geo-redirect .modal-dialog {
	margin: 0; width: 100%; max-width: 460px; transform: none !important;
}
.cloudflare-geo-redirect.fade .modal-dialog { transition: none; }
.cloudflare-geo-redirect .modal-content {
	background: #fff; border: 0; border-radius: 0;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
	max-height: 90vh; overflow: auto;
}
.cloudflare-geo-redirect .modal-header {
	border: 0; border-bottom: 1px solid var(--hair); padding: 22px 28px;
}
.cloudflare-geo-redirect .modal-title {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif; font-weight: 400;
	font-size: 27px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); line-height: 1;
}
.cloudflare-geo-redirect .modal-body {
	padding: 24px 28px; font-size: 16px; line-height: 1.6; color: var(--body);
}
.cloudflare-geo-redirect .modal-body strong { color: var(--ink); font-weight: 700; }
.cloudflare-geo-redirect .modal-footer {
	border: 0; border-top: 1px solid var(--hair); padding: 18px 28px;
	display: flex; gap: 12px; justify-content: flex-end; align-items: center;
}
.cloudflare-geo-redirect .modal-footer .btn {
	border: 0; border-radius: 0; margin: 0; cursor: pointer; box-shadow: none; text-shadow: none;
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif; font-weight: 400;
	font-size: 19px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 26px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.cloudflare-geo-redirect .btn-primary.do-redirect { background: var(--gold); color: var(--ink); }
.cloudflare-geo-redirect .btn-primary.do-redirect:hover,
.cloudflare-geo-redirect .btn-primary.do-redirect:focus { background: var(--gold-hover); color: var(--ink); }
.cloudflare-geo-redirect .btn-secondary.stay-here {
	background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.cloudflare-geo-redirect .btn-secondary.stay-here:hover,
.cloudflare-geo-redirect .btn-secondary.stay-here:focus { background: var(--ink); color: #fff; }
/* Darken the shared Bootstrap backdrop slightly. */
.modal-backdrop.in { opacity: 0.55; }

/* ===================== 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: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 15px; /* keep every label row the same height (Distance carries a link) */
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--dark-muted-b);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.cc-fp-field select,
.cc-fp-field input[type="text"] {
	width: 100%;
	height: 24px; /* uniform control height across every field */
	line-height: 24px;
	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;
}

/* SEARCH button: a normal-sized cell on the last grid row, next to Keyword. */
.cc-fp-search-submit {
	background: var(--gold);
	color: var(--ink);
	border: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}
.cc-fp-search-submit:hover { background: var(--gold-hover); }

/* Keyword is a normal one-column field; SEARCH sits in the next column. */
.cc-fp-field--keyword { grid-column: span 1; }

/* Proximity "Distance" field: radius select + use-my-location button + status. */
.cc-fp-geo-btn {
	margin: 0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--gold);
	font-family: 'Barlow', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: none;
	line-height: 1;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.cc-fp-geo-btn:hover { color: var(--gold-hover); }
.cc-fp-geo-pin { font-size: 12px; line-height: 1; }
.cc-fp-geo-status {
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--dark-muted-b);
}
.cc-fp-geo-status.is-ok { color: #7fce9a; }
.cc-fp-geo-status.is-error { color: #e79a8c; }

.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: 24px; /* match the native/24px control height so rows are uniform */
	display: flex;
	align-items: center;
	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: 24px;
	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;
}
/* Multi-select (Style): gold chips inside the dark field. Pinned to the same
   24px height as every other control so row 1 is not taller than row 2; extra
   chips scroll horizontally rather than growing the field. */
.cc-fp-search .select2-container--default .select2-selection--multiple {
	background: transparent; border: 0; border-radius: 0;
	height: 24px; min-height: 24px; outline: none; padding: 0;
	display: flex; align-items: center;
}
.cc-fp-search .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: 0; margin: 0;
	display: flex; align-items: center; flex-wrap: nowrap;
	height: 24px; line-height: 24px; overflow: hidden;
}
.cc-fp-search .select2-selection--multiple .select2-selection__choice {
	background: var(--gold); color: var(--ink); border: 0; border-radius: 0;
	padding: 0 8px; margin: 0 4px 0 0; font-size: 12px; font-weight: 600; line-height: 18px; flex: 0 0 auto;
}
.cc-fp-search .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--ink); font-weight: 700; margin-right: 5px;
}
.cc-fp-search .select2-selection--multiple .select2-selection__choice__remove:hover { color: #7a2417; }
.cc-fp-search .select2-search--inline .select2-search__field {
	color: var(--dark-text); font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 24px; margin: 0;
}
.cc-fp-search .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
	color: var(--dark-muted-b); font-size: 15px; line-height: 24px;
}
/* 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: 1.5fr 0.9fr 1fr 1.2fr;
	gap: 48px;
	align-items: center;
}
.cc-fp-seo {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--dark-muted-a);
}
/* Footer link column (Legal), with room to grow. */
.cc-fp-footer-legal {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: start;
}
.cc-fp-footer-col-h {
	font-family: 'Bebas Neue', 'bebas-neue', sans-serif;
	font-size: 18px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 2px;
}
.cc-fp-footer-legal a {
	font-size: 14px;
	color: var(--dark-text);
	line-height: 1.4;
}
.cc-fp-footer-legal a:hover { color: var(--gold); }
.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; }
	/* Currency lives in the slide-out menu on mobile to keep the top bar clean. */
	.cc-currency--header { display: none; }
	.cc-fp-burger { display: flex; flex: 0 0 auto; margin-left: auto; }
	/* Cart icon shown in the top bar next to the burger, on the right. When it is
	   present it takes the margin-left:auto and the burger just gets a small gap;
	   when the cart is empty (element absent) the burger keeps its own auto. */
	.cc-fp-cart-mobile { display: inline-flex; flex: 0 0 auto; margin-left: auto; }
	.cc-fp-cart-mobile + .cc-fp-burger { margin-left: 16px; }

	/* 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, Distance, Price, Keyword and Submit span full width; the
	   middle four (Build Type + the three ranges) 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(3),  /* Distance */
	.cc-fp-search-grid > .cc-fp-field:nth-child(8),  /* Price */
	.cc-fp-search-grid > .cc-fp-field--keyword,      /* Keyword */
	.cc-fp-search-submit {
		grid-column: 1 / -1;
	}
	.cc-fp-search-submit { font-size: 16px; padding: 14px 0; }
	.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-footer-legal { order: 3; align-items: center; gap: 10px; }
	.cc-fp-copy { order: 5; font-size: 13px; }
	.cc-fp-pay img { height: 32px; }
	.cc-fp-totop { width: 48px; height: 48px; font-size: 20px; }
}