/* ==========================================================================
   search-bottom.css - the bottom of a /search/ results page
   (design F, agreed with Adam + Chris 26 Sep 2026, canvas
   https://claude.ai/artifact/65sTKj9RZxR1eK9XwTBGTr). The footer is on every page,
   so its rules are in lmm.less (.page-section.ghb-footer).

   Loaded ONLY by htdocs/search_files/results_list.html, after search-v2.css.
   Every section that was on the page is still here, in the same order - this
   is the look only. Class prefix ghb- ("GH bottom").

   Bands alternate by job: search again (cream) / look further (white) /
   before you book (cream) / reviews (white) / questions (cream) / venues /
   directory, then the white footer. A band that is not on the page (no
   reviews, no venues) must not leave two bands of one colour touching, so
   the questions, venues and directory bands take their colour from what is
   actually shown above them - see section 2.
   ========================================================================== */

/* SPACING: the site's grid-gutter steps only (the lmm.less margin- and padding- utilities):
   --gx 3.75 (xs)  --gs 7.5 (sm)  --gh 15 (default)  --g 30 (big)  --ghb-gap 60 (bigger)
   between bands, 30 on a phone. No other spacing numbers in this file. */
:root {
	--g: 30px;	/* @grid-gutter-width */
	--gh: 15px;
	--gs: 7.5px;
	--gx: 3.75px;
	--ghb-ink: #1F1A17;
	--ghb-muted: #5E554E;
	--ghb-line: #E3DFD8;
	--ghb-cream: #F6F3EE;
	--ghb-stone: #EAE5DC;
	--ghb-accent: #A8520F;		/* #C06014 is 4.3:1 on white - text and fills use this */
	--ghb-accent-deep: #A04C0E;	/* 4.5:1+ on cream as well */
	--ghb-brand: #C06014;		/* icons and stars only */
	--ghb-chip: #F8E6D6;
	--ghb-gap: calc(var(--g) * 2);	/* padding-top-bigger */
}


/* --------------------------------------------------------------------------
   1. TYPE AND SHARED PIECES
   -------------------------------------------------------------------------- */

.ghb-h2,
.page-section h2.ghb-h2 {	/* beats bootstrap-search's .page-section.lmm-secondary h2 (30px, 30/15 margins) */
	margin: 0;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ghb-ink);
}

.ghb-h3 {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--ghb-ink);
}

.ghb-kicker,
.ghb-kicker-h {
	margin: 0;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ghb-accent);
}

.ghb-sub {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ghb-muted);
}

.ghb-head {
	display: flex;
	flex-direction: column;
	gap: var(--gs);
}

.ghb-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gh);
}

.ghb-head-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gs);
	font-size: 17px;
	font-weight: 700;
	color: var(--ghb-accent);
	white-space: nowrap;
}

.ghb-head-link:hover,
.ghb-head-link:focus {
	color: #8A430C;
}

.ghb-note {
	display: flex;
	align-items: flex-start;
	gap: var(--gs);
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ghb-muted);
}

.ghb-note svg {
	flex-shrink: 0;
	margin-top: var(--gx);
}

.ghb-note b {
	color: var(--ghb-ink);
}

/* REAL CONTENT RUNS LONG (checked 26 Sep 2026 at 320-1920px): a Welsh or German place
   name, a reviewer who typed a web address or a whole review into the name box, a venue
   with its full postal name, a yen or dirham price. A word breaks only when it cannot
   fit a line of its own, so nothing ever pushes the page wider than the phone. */
.ghb-band,
.ghb-new-search,
.ghb-help-card,
.lmm-extra-content {
	overflow-wrap: anywhere;
}

/* no single word left alone on the last line of a heading or a title */
.ghb-h2,
.ghb-h3,
.ghb-kicker,
.ghb-kicker-h,
.ghb-guide > h2,
.ghb-guide > h3,
.ghb-faq-btn .question,
.ghb-link-card-title,
.ghb-review-name,
.ghb-review-bar-title,
.ghb-rel-name,
.ghb-rel-where {
	text-wrap: balance;
}

.ghb-sub,
.ghb-note,
.ghb-guide p,
.ghb-faq-a,
.ghb-help-text p,
.ghb-review-bar-sub,
.ghb-link-card-sub {
	text-wrap: pretty;
}

/* buttons */
.ghb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gs);
	box-sizing: border-box;
	min-height: 48px;
	padding: var(--gh) var(--g);
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.ghb-btn:hover,
.ghb-btn:focus {
	text-decoration: none;
}

.ghb-btn-primary,
.lmm-secondary .ghb-btn-primary {
	background: var(--ghb-accent);
	border: 2px solid var(--ghb-accent);
	color: #fff;
}

.ghb-btn-primary:hover,
.ghb-btn-primary:focus,
.lmm-secondary .ghb-btn-primary:hover,
.lmm-secondary .ghb-btn-primary:focus {
	background: #8A430C;
	border-color: #8A430C;
	color: #fff;
}

.ghb-btn-plain,
.lmm-secondary .ghb-btn-plain {
	background: #fff;
	border: 2px solid var(--ghb-line);
	color: var(--ghb-ink);
}

.ghb-btn-plain:hover,
.ghb-btn-plain:focus,
.lmm-secondary .ghb-btn-plain:hover,
.lmm-secondary .ghb-btn-plain:focus {
	border-color: #CFC8BC;
	color: var(--ghb-ink);
}

/* a round icon beside a title and a line (Still have a question, venues, directory) */
.ghb-link-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gh);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ghb-link-card {
	display: flex;
	align-items: center;
	gap: var(--gh);
	box-sizing: border-box;
	min-height: 76px;
	padding: var(--gh) var(--gh);
	background: var(--ghb-card, #fff);
	border: 1px solid var(--ghb-line);
	border-radius: 14px;
	color: var(--ghb-ink);
	text-decoration: none;
}

@media (hover: hover) {
	a.ghb-link-card:hover {
		border-color: #CFC8BC;
		color: var(--ghb-ink);
		text-decoration: none;
	}
}

a.ghb-link-card:focus-visible {
	border-color: #CFC8BC;
	color: var(--ghb-ink);
	text-decoration: none;
}

.ghb-link-card[hidden] {
	display: none;
}

.ghb-link-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--ghb-stone);
	color: var(--ghb-accent-deep);
}

.ghb-link-card-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ghb-link-card-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.ghb-link-card-sub {
	font-size: 15px;
	line-height: 1.4;
	color: var(--ghb-muted);
}

.ghb-link-card-go {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--ghb-accent-deep);
}

/* "Show all N" - phones only; every link is in the page either way */
.ghb-more-btn {
	display: none;
}


/* --------------------------------------------------------------------------
   2. BANDS
   -------------------------------------------------------------------------- */

.ghb-band,
.page-section.lmm-secondary,
.page-section.lmm-extra-content {
	--ghb-card: #fff;
	background: var(--ghb-cream);
	border: 0;
	padding: var(--ghb-gap) 0;
}

.ghb-band-white,
.page-section.lmm-extra-content {
	--ghb-card: var(--ghb-cream);
	background: #fff;
}

/* the guide and the prices are one band: the prices carry no top padding, and are divided
   off like each row of the guide - a hairline with 30 above and 30 below */
.ghb-guide-band + .ghb-cost-band {
	padding-top: 0;
}

.ghb-guide-band:has(+ .ghb-cost-band:not(.hidden)) {
	padding-bottom: var(--g);
}

.page-section.ghb-guide-band + .ghb-cost-band h2.ghb-h2 {
	padding-top: var(--g);
	border-top: 1px solid var(--ghb-line);
}

/* questions: cream after the white reviews band, white when there are no reviews */
.ghb-faq-band {
	--ghb-card: #fff;
	background: var(--ghb-cream);
}

.ghb-reviews-band.hidden ~ .ghb-faq-band {
	--ghb-card: var(--ghb-cream);
	background: #fff;
}

/* while infinite scroll is still loading results it hides the bands below them
   (infinite-scroll.js hideFooter), but the venues band sits in a plain div it does
   not touch - so on its own it showed straight under the loading placeholders */
.hidden-for-infinite-scroll.hidden ~ #search-page-venues {
	display: none;
}

/* venues (search_results.js) take the other colour to the questions band */
#search-page-venues .ghb-band {
	--ghb-card: var(--ghb-cream);
	background: #fff;
}

.ghb-reviews-band.hidden ~ #search-page-venues .ghb-band {
	--ghb-card: #fff;
	background: var(--ghb-cream);
}

/* directory: the last band before the white footer, so it is ALWAYS cream - a white band ran
   straight into the white footer (Adam, 27 Sep 2026). Where the band above it is cream too
   (reviews + no venues, or no reviews + venues), a hairline divides them instead of the colour. */
.ghb-dir-band {
	--ghb-card: #fff;
	background: var(--ghb-cream);
}

.ghb-reviews-band:not(.hidden) ~ .ghb-faq-band:not(.hidden) + #search-page-venues:empty + .ghb-dir-band,
.ghb-reviews-band.hidden ~ #search-page-venues:not(:empty) + .ghb-dir-band {
	border-top: 1px solid var(--ghb-line);
}

.ghb-band .container > * + *,
.ghb-dir-band .container > * + * {
	margin-top: var(--g);
}


/* --------------------------------------------------------------------------
   3. SEARCH AGAIN: start a new search + need help (cream)
   -------------------------------------------------------------------------- */

.ghb-new-search {
	display: flex;
	flex-direction: column;
	gap: var(--g);
}

.ghb-new-search + .ghb-help-card {
	margin-top: var(--ghb-gap);
}

/* "Start a new search" is the HOMEPAGE search box, copied value for value (lmm.less
   .homeSearch, Adam 26 Sep 2026: "it should match the home page version") - so its numbers
   are the homepage's, not this sheet's gutter steps: the same pill, glyph, type size, button
   and floating results card */
.ghb-search-pill {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 999px;
}

.ghb-search-pill:focus-within {
	border-color: var(--ghb-brand);
}

.ghb-search-pill .ghb-search-pill-icon {
	flex: 0 0 auto;
	top: 1px;
	margin: 0 10px 0 12px;
	color: #ccc;
	font-size: 20px;
	pointer-events: none;	/* clicks fall through to the box */
}

.ghb-search-pill-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.ghb-search-pill .form-control,
.ghb-search-pill .form-control:focus {
	width: 100%;
	height: 36px;
	padding: 6px 44px 6px 12px;	/* the right 44px keeps typing clear of the clear-X */
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 18px;
	color: #191919;
}

.ghb-search-pill .auto-complete-entry-clear {
	right: 17px;
}

.ghb-search-pill-btn {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 1px solid var(--ghb-brand);
	border-radius: 999px;
	background: var(--ghb-brand);
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3333;
}

.ghb-search-pill-btn:hover,
.ghb-search-pill-btn:focus {
	background: #A8520F;
	border-color: #A8520F;
}

/* the results: a floating rounded card just below the pill, as on the homepage */
.ghb-search-pill .ai-autocomplete-dropdown {
	margin-top: var(--gs);
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.ghb-search-pill .ai-autocomplete-dropdown.ai-autocomplete-dropdown-flip-up {
	margin-top: 0;
	margin-bottom: var(--gs);
}

.lmm-secondary .ghb-search-faux.site-search-faux-input.mobile-search-inner-container {
	display: flex;
	align-items: center;
	gap: var(--gh);
	height: auto;
	padding: var(--gs) var(--gs) var(--gs) var(--gh);
	background: #fff;
	border: 1px solid var(--ghb-line);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(60, 40, 20, 0.05);
}

.ghb-search-faux .site-search-faux-input-text,
.lmm-secondary .ghb-search-faux .site-search-faux-input-text {
	position: static;
	flex-grow: 1;
	min-width: 0;
	transform: none;
	color: #8C8279;
}

.ghb-search-faux .site-search-faux-input-icon,
.lmm-secondary .ghb-search-faux .site-search-faux-input-icon {
	position: static;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--ghb-accent);
}

/* need help */
.ghb-help-card {
	display: flex;
	align-items: center;
	gap: var(--g);
	padding: var(--g) var(--g);
	background: #fff;
	border: 1px solid var(--ghb-line);
	border-radius: 20px;
}

.ghb-help-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--ghb-chip);
	color: var(--ghb-brand);
}

.ghb-help-text {
	display: flex;
	flex-direction: column;
	gap: var(--gs);
	flex-grow: 1;
	min-width: 0;
}

.page-section .ghb-help-text h2.ghb-h2 {
	font-size: 28px;
	line-height: 1.2;
}

.ghb-help-text p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ghb-muted);
}

.ghb-help-actions {
	display: flex;
	gap: var(--gh);
	flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   4. LOOK FURTHER: find local + customers also viewed (white)
   -------------------------------------------------------------------------- */

.lmm-extra-content a,
.lmm-extra-content a:hover {
	color: inherit;
}

#table-of-links:not(:empty) + #local-related-categories:not(:empty) {
	margin-top: var(--ghb-gap);
}

.ghb-find-local {
	display: flex;
	flex-direction: column;
	gap: var(--g);
}

.ghb-flag-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--gs);
}

.lmm-extra-content .ghb-flag-tile {
	display: flex;
	align-items: center;
	gap: var(--gs);
	box-sizing: border-box;
	min-height: 48px;
	padding: var(--gs) var(--gh);
	background: var(--ghb-cream);
	border: 1px solid var(--ghb-line);
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ghb-ink);
	text-decoration: none;
}

@media (hover: hover) {
	.lmm-extra-content .ghb-flag-tile:hover {
		border-color: #CFC8BC;
		color: var(--ghb-ink);
		text-decoration: none;
	}
}

.lmm-extra-content .ghb-flag-tile:focus-visible {
	border-color: #CFC8BC;
	color: var(--ghb-ink);
	text-decoration: none;
}

.ghb-flag-tile span:last-child {
	min-width: 0;	/* "United Arab Emirates" takes two lines rather than an ellipsis */
}

#table-of-links .ghb-flag-tile .flag-icon {
	flex-shrink: 0;
	width: 24px;
	height: 18px;
	line-height: 18px;
	border-radius: 3px;
	background-size: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

.ghb-places {
	padding: var(--g) var(--g);
	background: var(--ghb-cream);
	border: 1px solid var(--ghb-line);
	border-radius: 20px;
}

.ghb-places ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 5;
	column-gap: var(--g);
}

.ghb-places li {
	break-inside: avoid;
	padding: var(--gs) 0;
}

.lmm-extra-content .ghb-places a {
	font-size: 16px;
	line-height: 1.4;
	color: var(--ghb-ink);
	text-decoration: none;
}

@media (hover: hover) {
	.lmm-extra-content .ghb-places a:hover .ghb-place-name {
		color: var(--ghb-accent);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.lmm-extra-content .ghb-places a:focus-visible .ghb-place-name {
	color: var(--ghb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ghb-place-name {
	font-weight: 700;
}

.ghb-place-region {
	color: var(--ghb-muted);
}

/* customers also viewed: a photo carousel - the arrows only scroll, every
   link is in the page */
.ghb-rel {
	display: flex;
	flex-direction: column;
	gap: var(--gh);
}

.ghb-rel-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gh);
	min-height: 40px;
}

.ghb-kicker-h {
	font-size: 14px;
	color: var(--ghb-brand);
}

.ghb-rel-arrows {
	display: flex;
	gap: var(--gs);
	flex-shrink: 0;
}

/* the same arrows as every carousel on a profile (listing-v2.css .gallery-arrows):
   white circle, heavy chevron, orange on hover, faded when there is nothing that way */
.ghb-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #ECECEA;
	border-radius: 999px;
	background: #fff;
	color: #4A443F;
	transition: color 150ms, border-color 150ms;
	touch-action: manipulation;	/* two quick taps are two taps - not iOS's double-tap zoom */
}

.ghb-arrow .glyphicon {
	top: 0;
	font-size: 14px;
}

.ghb-arrow:hover,
.ghb-arrow:focus {
	border-color: var(--ghb-brand);
	color: var(--ghb-brand);
	outline: none;
}

.ghb-arrow[disabled],
.ghb-arrow[disabled]:hover {
	border-color: #ECECEA;
	color: #4A443F;
	opacity: 0.4;
	cursor: default;
}

.ghb-rel-track {
	display: flex;
	gap: var(--gh);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ghb-rel-track::-webkit-scrollbar {
	display: none;
}

/* a mouse can drag the row (search_results.js) */
@media (hover: hover) and (pointer: fine) {
	.ghb-rel-track {
		cursor: grab;
	}
}

.ghb-rel-track a,
.ghb-rel-track img {
	-webkit-user-drag: none;	/* or the browser drags the link away instead of the row */
}

.ghb-rel-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* whole cards only, never a slice of the next one - as the profile's Similar suppliers
   row: 5 across a desktop, 4 at 992-1199, 3 on a tablet, 2 on a phone */
.lmm-extra-content .ghb-rel-card {
	--ghb-rel-n: 5;
	position: relative;
	display: block;
	flex: 0 0 calc((100% - (var(--ghb-rel-n) - 1) * var(--gh)) / var(--ghb-rel-n));
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 16px;
	background: var(--ghb-stone);
	scroll-snap-align: start;
	color: #fff;
	text-decoration: none;
}

.ghb-rel-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	.ghb-rel-card:hover img {
		transform: scale(1.04);
	}
}

.ghb-rel-card:focus-visible img {
	transform: scale(1.04);
}

.ghb-rel-label {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 var(--gh) var(--gh);
	background: linear-gradient(180deg, transparent 35%, rgba(10, 8, 6, 0.85));
}

/* a long category ("Wedding Officiants / Wedding Celebrants") in a long place would
   climb up over the light part of the photo - three lines of name, two of place */
.ghb-rel-name,
.ghb-rel-where {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ghb-rel-where {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ghb-rel-name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
}

.ghb-rel-where {
	margin-top: var(--gx);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.9);
}


/* --------------------------------------------------------------------------
   5. BEFORE YOU BOOK: the booking guide + prices (cream)
   The guide is SearchPageContent.AboutContent: an h2, a lead paragraph, then
   h3 + p pairs. The pairs become rows - heading left, text right.
   -------------------------------------------------------------------------- */

.ghb-guide-band .ghb-kicker + .ghb-guide {
	margin-top: var(--gs);
}

.ghb-guide {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	column-gap: var(--g);
	color: var(--ghb-muted);
}

.ghb-guide > * {
	grid-column: 1 / -1;
	margin: 0;
}

.ghb-guide > h2 {
	font-size: 40px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ghb-ink);
}

.ghb-guide > h2 + p {
	margin-top: var(--g);
	padding-right: 240px;
	font-size: 23px;
	line-height: 1.55;
	color: var(--ghb-ink);
}

.ghb-guide > h3 {
	grid-column: 1;
	margin-right: calc(var(--g) * -1);	/* the row's hairline runs on across the column gap */
	padding-right: var(--g);
	margin-top: var(--g);
	padding-top: var(--g);
	border-top: 1px solid var(--ghb-line);
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--ghb-ink);
}

.ghb-guide > h3 ~ p {
	grid-column: 2;
	margin-top: var(--gh);
	font-size: 17px;
	line-height: 1.7;
}

.ghb-guide > h3 + p {
	margin-top: var(--g);
	padding-top: var(--g);
	border-top: 1px solid var(--ghb-line);
}

.ghb-guide a {
	color: var(--ghb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	.ghb-guide a:hover {
		color: #8A430C;
	}
}

.ghb-guide a:focus-visible {
	color: #8A430C;
}

/* prices */
.ghb-cost-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gh);
}

.ghb-cost {
	display: flex;
	flex-direction: column;
	gap: var(--gh);
	padding: var(--g) var(--g);
	background: #fff;
	border: 1px solid var(--ghb-line);
	border-radius: 20px;
}

.ghb-cost.ghb-cost-avg {
	padding: calc(var(--g) - 1px);	/* the 2px edge, same outer size */
	background: var(--ghb-chip);	/* the stronger light orange - #FBF3EA vanished on the cream band */
	border: 2px solid var(--ghb-accent);
}

/* on the orange ground the average's own chip turns white, or it would disappear */
.ghb-cost-avg .ghb-cost-chip {
	background: #fff;
}

.ghb-cost-label {
	display: flex;
	align-items: center;
	gap: var(--gh);
	font-size: 18px;
	font-weight: 700;
	color: var(--ghb-ink);
}

.ghb-cost-chip {
	box-sizing: border-box;
	min-width: 44px;
	padding: var(--gx) var(--gs);
	border-radius: 999px;
	background: var(--ghb-chip);
	color: var(--ghb-accent-deep);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.ghb-cost-chip:empty {
	display: none;	/* a currency written in letters (kr) has no symbol chip, as live */
}

.ghb-cost-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--gx) var(--gs);
}

.ghb-cost-price b {
	overflow-wrap: normal;
	white-space: nowrap;
	font-size: 44px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ghb-ink);
}

.ghb-cost-from,
.ghb-cost-cur {
	font-size: 16px;
	color: var(--ghb-muted);
}


/* --------------------------------------------------------------------------
   6. REVIEWS (white) - html from Search.pm + LMM::Listing::Rating
   -------------------------------------------------------------------------- */

.ghb-reviews-block {
	display: flex;
	flex-direction: column;
	gap: var(--g);
}

.ghb-rating-sum {
	display: flex;
	align-items: center;
	gap: var(--gs);
	flex-shrink: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ghb-ink);
}

.ghb-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--ghb-brand);
}

#reviews-container.ghb-review-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gh);
}

#reviews-container .ghb-review {
	display: flex;
	flex-direction: column;
	gap: var(--gh);
	box-sizing: border-box;
	padding: var(--g);
	background: var(--ghb-card, var(--ghb-cream));
	border: 1px solid var(--ghb-line);
	border-radius: 20px;
	color: var(--ghb-ink);
	text-decoration: none;
}

@media (hover: hover) {
	#reviews-container .ghb-review:hover {
		border-color: #CFC8BC;
		color: var(--ghb-ink);
		text-decoration: none;
	}
}

#reviews-container .ghb-review:focus-visible {
	border-color: #CFC8BC;
	color: var(--ghb-ink);
	text-decoration: none;
}

.ghb-review-top {
	display: flex;
	align-items: center;
	gap: var(--gh);
}

.ghb-review-photo {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--ghb-stone);
}

.ghb-review-who {
	display: flex;
	flex-direction: column;
	gap: var(--gs);
	min-width: 0;
}

.ghb-review-name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.ghb-review-who .ghb-stars svg {
	width: 16px;
	height: 16px;
}

.ghb-review-text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.6;
}

.ghb-review-meta {
	display: flex;
	flex-direction: column;
	gap: var(--gx);
	margin-top: auto;
	padding-top: var(--gh);
	border-top: 1px solid var(--ghb-line);
	font-size: 15px;
	line-height: 1.4;
	color: var(--ghb-muted);
}

.ghb-review-meta-row {
	display: flex;
	align-items: flex-start;
	gap: var(--gs);
}

.ghb-review-meta-row svg {
	flex-shrink: 0;
	height: 1.4em;	/* one line box, so the 16px icon centres on the first line */
}

/* some reviewers typed their whole review into the name box (255 characters) */
.ghb-review-by {
	flex: 1 1 auto;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ghb-review-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g);
	padding: var(--g) var(--g);
	background: var(--ghb-card, var(--ghb-cream));
	border: 1px solid var(--ghb-line);
	border-radius: 20px;
}

.ghb-review-bar-text {
	display: flex;
	align-items: center;
	gap: var(--gh);
}

.ghb-review-bar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ghb-line);
	color: var(--ghb-accent-deep);
}

.ghb-review-bar-title {
	margin: 0 0 var(--gx);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ghb-ink);
}

.ghb-review-bar-sub {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ghb-muted);
}

.ghb-review-bar-sub b {
	color: var(--ghb-ink);
}

.ghb-review-bar-sub a {
	color: var(--ghb-accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ghb-pill-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gs);
	flex-shrink: 0;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 var(--gh);
	background: #fff;
	border: 1px solid #D9D3C9;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ghb-accent-deep);
	text-decoration: none;
}

.ghb-pill-link:hover,
.ghb-pill-link:focus {
	border-color: var(--ghb-accent-deep);
	color: var(--ghb-accent-deep);
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   7. QUESTIONS: FAQs + still have a question
   -------------------------------------------------------------------------- */

.ghb-faq-list {
	overflow: hidden;
	background: var(--ghb-card);
	border: 1px solid var(--ghb-line);
	border-radius: 20px;
}

.ghb-faq + .ghb-faq {
	border-top: 1px solid var(--ghb-line);
}

.ghb-faq-q {
	margin: 0;
	font-size: inherit;
}

.ghb-faq-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh);
	width: 100%;
	min-height: 68px;
	padding: var(--gh) var(--g);
	border: 0;
	background: transparent;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ghb-ink);
}

.ghb-faq-btn .question {
	min-width: 0;
}

.ghb-faq-btn:hover .question,
.ghb-faq-btn:focus .question {
	color: var(--ghb-accent);
}

.ghb-faq-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--ghb-stone);
}

/* open = minus: the vertical stroke goes */
.ghb-faq-btn[aria-expanded="true"] .ghb-faq-v {
	display: none;
}

.ghb-faq-a {
	padding: 0 var(--g) var(--g);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ghb-muted);
}

.ghb-faq-a > :last-child {
	margin-bottom: 0;
}

.ghb-faq-a a {
	color: var(--ghb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ghb-still {
	display: flex;
	flex-direction: column;
	gap: var(--gh);
}

.ghb-faq-band .ghb-head-row + .ghb-faq-list,
.ghb-faq-band .ghb-head-row + .ghb-still {
	margin-top: var(--g);
}


/* --------------------------------------------------------------------------
   8. VENUES (search_results.js makeHtmlForSearchPageVenues)
   -------------------------------------------------------------------------- */

.ghb-venues .ghb-link-card {
	min-height: 76px;
}

.ghb-venues .ghb-link-card[hidden] {
	display: none;
}


/* --------------------------------------------------------------------------
   9. DIRECTORY: event suppliers worldwide, tabbed
   -------------------------------------------------------------------------- */

.page-section.ghb-dir-band h2.ghb-h2 {
	font-size: 34px;
}

.ghb-tabs {
	display: flex;
	gap: var(--gs);
}

.ghb-tab {
	display: flex;
	align-items: center;
	gap: var(--gs);
	flex-shrink: 0;
	min-height: 48px;
	padding: 0 var(--g);
	background: var(--ghb-card);
	border: 2px solid var(--ghb-line);
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ghb-ink);
}

.ghb-tab svg {
	color: var(--ghb-brand);
}

.ghb-tab:hover,
.ghb-tab:focus {
	border-color: #CFC8BC;
	outline: none;
}

/* the open tab: an orange edge on the price chips' light orange (#FBF3EA, the Average
   price card's, all but vanished on the cream band) - rather than a solid black block */
.ghb-tab[aria-selected="true"],
.ghb-tab[aria-selected="true"]:hover,
.ghb-tab[aria-selected="true"]:focus {
	background: var(--ghb-chip);
	border-color: var(--ghb-accent);
	color: var(--ghb-accent-deep);
}

.ghb-dir-panel[hidden] {
	display: none;
}

.ghb-dir-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--g);
}

.ghb-dir-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gh);
	min-height: 52px;
	padding-right: var(--g);
	border-bottom: 1px solid var(--ghb-line);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8520F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right center;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ghb-ink);
	text-decoration: none;
}

@media (hover: hover) {
	.ghb-dir-links a:hover {
		color: var(--ghb-accent);
		text-decoration: none;
	}
}

.ghb-dir-links a:focus-visible {
	color: var(--ghb-accent);
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   10. TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.ghb-guide > h2 + p {
		padding-right: 0;
	}
	.ghb-flag-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.ghb-places ul {
		columns: 4;
	}
	.lmm-extra-content .ghb-rel-card {
		--ghb-rel-n: 4;
	}
}

@media (max-width: 991px) {
	.ghb-help-card {
		flex-wrap: wrap;
	}
	.ghb-help-text {
		flex: 1 1 0;	/* stays beside the icon; the buttons wrap underneath */
	}
	.ghb-help-actions {
		width: 100%;
		padding-left: calc(64px + var(--g));	/* under the text, past the icon */
	}
	.ghb-flag-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.ghb-places ul {
		columns: 3;
	}
	.lmm-extra-content .ghb-rel-card {
		--ghb-rel-n: 3;
	}
	.ghb-guide {
		grid-template-columns: 220px minmax(0, 1fr);
	}
	.ghb-cost-price b {
		font-size: 34px;
	}
	.ghb-cost-from {
		width: 100%;	/* three narrow cards: "from" on its own line in every one, so a long
					   yen or dirham price does not wrap one card differently to the others */
	}
	.ghb-cost-cur {
		display: none;	/* as on a phone - the note under the prices names the currency */
	}
	#reviews-container.ghb-review-grid,
	.ghb-link-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ghb-dir-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* --------------------------------------------------------------------------
   11. PHONE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	:root {
		--ghb-gap: var(--g);
	}

	.ghb-h2,
	.page-section h2.ghb-h2 {
		font-size: 26px;
	}

	.ghb-h3 {
		font-size: 20px;
	}

	.ghb-band .container > * + *,
	.ghb-dir-band .container > * + * {
		margin-top: var(--gh);
	}

	.ghb-head-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gs);
	}

	.ghb-link-cards,
	#reviews-container.ghb-review-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ghb-note {
		font-size: 16px;
	}

	/* "Show all N": the first rows, then the button */
	.ghb-more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--gs);
		width: 100%;
		min-height: 48px;
		margin-top: var(--gh);
		border: 2px solid var(--ghb-line);
		border-radius: 12px;
		background: transparent;
		font-size: 17px;
		font-weight: 700;
		color: var(--ghb-ink);
	}
	.ghb-more.is-open .ghb-more-btn {
		display: none;
	}
	.ghb-more:not(.is-open) .ghb-flag-grid > :nth-child(n+13),
	.ghb-more:not(.is-open) .ghb-places li:nth-child(n+21),
	.ghb-more:not(.is-open) .ghb-venue-list > :nth-child(n+9) {
		display: none;
	}
	.ghb-more[data-more-count="0"] .ghb-more-btn,
	.ghb-more.ghb-more-short .ghb-more-btn {
		display: none;
	}

	/* search again */
	.ghb-new-search {
		gap: var(--gh);
	}
	.lmm-secondary .ghb-search-faux.visible-xs {
		display: flex !important;	/* bootstrap's .visible-xs is display:block !important */
	}
	.ghb-help-card {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gh);
		padding: var(--g);
	}
	.ghb-help-text {
		flex: none;
	}
	.ghb-help-icon {
		width: 48px;
		height: 48px;
	}
	.ghb-help-icon svg {
		width: 24px;
		height: 24px;
	}
	.page-section .ghb-help-text h2.ghb-h2 {
		font-size: 24px;
	}
	.ghb-help-text p {
		font-size: 17px;
	}
	.ghb-help-actions {
		flex-direction: column;
		gap: var(--gh);
		padding-left: 0;
	}
	.ghb-help-actions .ghb-btn {
		width: 100%;
	}

	/* look further */
	.ghb-find-local {
		gap: var(--gh);
	}
	.ghb-flag-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ghb-places {
		padding: var(--gh) var(--gh);
	}
	.ghb-places ul {
		columns: 2;
		column-gap: var(--gh);
	}
	.lmm-extra-content .ghb-rel-card {
		--ghb-rel-n: 2;
	}

	/* before you book */
	.ghb-guide {
		grid-template-columns: minmax(0, 1fr);
	}
	.ghb-guide > h2 {
		font-size: 28px;
	}
	.ghb-guide > h2 + p {
		font-size: 19px;
	}
	.ghb-guide > h3,
	.ghb-guide > h3 ~ p {
		grid-column: 1;
	}
	.ghb-guide > h3 {
		margin-right: 0;
		padding-right: 0;
	}
	.ghb-guide > h3 + p {
		margin-top: var(--gs);
		padding-top: 0;
		border-top: 0;
	}
	.ghb-guide > h3 ~ p {
		font-size: 16px;
	}
	.ghb-cost-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		overflow: hidden;
		background: #fff;
		border: 1px solid var(--ghb-line);
		border-radius: 20px;
	}
	.ghb-cost,
	.ghb-cost.ghb-cost-avg {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--gh);
		padding: var(--gh) var(--gh);
		border: 0;
		border-radius: 0;
	}
	.ghb-cost + .ghb-cost {
		border-top: 1px solid var(--ghb-line);
	}
	.ghb-cost,
	.ghb-cost.ghb-cost-avg {
		flex-wrap: wrap;	/* a long price (yen, dirhams) drops under its label, never over it */
		row-gap: var(--gs);
	}
	.ghb-cost-label {
		gap: var(--gs);
		font-size: 17px;
		white-space: nowrap;
	}
	.ghb-cost-price {
		flex-wrap: nowrap;
		gap: var(--gs);
		margin-left: auto;
	}
	.ghb-cost-price b {
		font-size: 28px;
	}
	.ghb-cost-from {
		width: auto;
		font-size: 15px;
	}


	/* reviews */
	.ghb-reviews-block {
		gap: var(--gh);
	}
	.ghb-rating-sum {
		font-size: 16px;
	}
	#reviews-container .ghb-review {
		padding: var(--gh);
	}
	.ghb-review-photo {
		width: 56px;
		height: 56px;
	}
	.ghb-review-bar {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gh);
		padding: var(--gh);
	}
	.ghb-review-bar-text {
		align-items: flex-start;
		gap: var(--gh);
	}
	.ghb-review-bar-icon {
		width: 44px;
		height: 44px;
	}
	.ghb-review-bar-icon svg {
		width: 22px;
		height: 22px;
	}
	.ghb-review-bar-title {
		font-size: 18px;
	}
	.ghb-review-bar-sub {
		font-size: 16px;
	}
	.ghb-pill-link {
		align-self: flex-start;
	}

	/* questions */
	.ghb-faq-btn {
		min-height: 64px;
		padding: var(--gh) var(--gh);
		font-size: 17px;
	}
	.ghb-faq-a {
		padding: 0 var(--gh) var(--g);
	}
	.ghb-faq-band .container > .ghb-still {
		margin-top: var(--g);
	}

	/* venues: one card of divided rows */
	.ghb-venues .ghb-venue-list {
		display: flex;
		flex-direction: column;
		gap: 0;
		overflow: hidden;
		background: var(--ghb-card);
		border: 1px solid var(--ghb-line);
		border-radius: 16px;
	}
	.ghb-venues .ghb-link-card {
		min-height: 68px;
		padding: var(--gh) var(--gh);
		background: transparent;
		border: 0;
		border-radius: 0;
	}
	.ghb-venues .ghb-link-card + .ghb-link-card {
		border-top: 1px solid var(--ghb-line);
	}
	.ghb-venues .ghb-link-card-icon {
		width: 36px;
		height: 36px;
	}

	/* directory */
	.page-section.ghb-dir-band h2.ghb-h2 {
		font-size: 26px;
	}
	.ghb-tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gs);
	}
	.ghb-tab {
		flex-direction: column;
		justify-content: center;
		gap: var(--gs);
		min-height: 72px;
		padding: var(--gs) var(--gs);
		border-radius: 14px;
		font-size: 15px;
		line-height: 1.2;
		text-align: center;
	}
	.ghb-dir-links {
		grid-template-columns: minmax(0, 1fr);
	}
	.ghb-dir-links a {
		min-height: 50px;
	}
	.ghb-dir-cards {
		margin-top: var(--gh) !important;
	}
}

/* the smallest phones (320-374): "Average price" and "from £2,000" no longer fit side
   by side, so every price row stacks the same way rather than some wrapping */
@media (max-width: 374px) {
	.ghb-cost,
	.ghb-cost.ghb-cost-avg {
		flex-direction: column;
		align-items: flex-start;
	}
	.ghb-cost-price {
		margin-left: 0;
	}
	.ghb-kicker-h {
		letter-spacing: 0.08em;	/* "Customers also viewed" stays on one line beside the arrows */
	}
}