/*
 * Plan Heavy single listing page.
 * Matches the sample site design: gallery header, fluid circular logo (no white
 * ring), sticky icon tabs that switch panels, two-column body with sidebar.
 * Mobile-first; widens at 1024px.
 * All colours and sizes come from design tokens (rule 2.1).
 */

.ph-listing {
	background: var(--ph-color-bg);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	padding-bottom: env(safe-area-inset-bottom, 0);
	overscroll-behavior-y: none;
}

/* Strip tap highlight from all interactive elements in the listing. */
.ph-listing a,
.ph-listing button {
	-webkit-tap-highlight-color: transparent;
}

/* Prevent Safari's elastic overscroll from revealing the grey gap behind
   the fixed bottom tab bar when scrolling down. */
body:has(.ph-listing) {
	overscroll-behavior-y: none;
	background-color: var(--ph-color-bg, #f5f4f0);
}

html:has(.ph-listing) {
	background-color: var(--ph-color-bg, #f5f4f0);
}

/* Panels and image blocks are square in this design (no rounded corners). */
.ph-listing .ph-panel,
.ph-listing .ph-menu-card,
.ph-listing {
	overflow-x: clip;
	max-width: 100vw;
}

/* Prevent Safari double-tap zoom on all interactive elements. */
button, a, .ph-lh__slide, .ph-photos__item, .ph-videos__item, .ph-lightbox__nav, .ph-voverlay__nav, .ph-voverlay__close {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 1023px) {
	.ph-lh__body,
	.ph-lh__main,
	.ph-lh__sidebar,
	.ph-lh__panel-content,
	.ph-panel {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* CSS Grid items have implicit min-width: auto which lets long words,
	   iframes, or pre-formatted content blow the column wider than the
	   viewport. min-width: 0 lets the column actually shrink to its
	   container, which is what stops the Home tab elements bleeding off
	   the right edge of the screen. */
	.ph-lh__body > .ph-lh__main,
	.ph-lh__body > .ph-lh__sidebar {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Anything that could push wide on mobile: iframes, images, videos.
	   Set max-width on all of them but only set height:auto on images
	   and videos. Iframes (Google Maps, video embeds) carry their own
	   height attribute and would collapse if we forced height:auto. */
	.ph-lh__main img,
	.ph-lh__sidebar img,
	.ph-lh__main video,
	.ph-lh__sidebar video {
		max-width: 100%;
		height: auto;
	}

	.ph-lh__main iframe,
	.ph-lh__sidebar iframe {
		max-width: 100%;
	}

	.ph-lh__main .ph-map__embed,
	.ph-lh__sidebar .ph-map__embed {
		max-width: 100%;
		width: 100%;
	}

	/* Long URLs, emails, hashtags in panels need to wrap rather than
	   force the panel wider than the viewport. */
	.ph-biz li,
	.ph-biz a,
	.ph-twocol__item,
	.ph-review__text,
	.ph-tip-card__text {
		overflow-wrap: anywhere;
		word-break: break-word;
		min-width: 0;
	}

	/* Two-column tag/term grids can squash to one column on very narrow
	   screens to keep their items readable instead of overflowing. */
	.ph-twocol {
		min-width: 0;
	}
}


.ph-listing .ph-map,
.ph-listing .ph-photos__item,
.ph-listing .ph-videos__item {
	border-radius: 0;
}

/* The slide and photo triggers are buttons; strip the default button look. */
.ph-lh__slide,
.ph-photos__item {
	appearance: none;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

/* ---- Gallery header ---- */
.ph-lh__gallery {
	position: relative;
	background: var(--ph-color-ink);
	overflow: hidden;
}

.ph-lh__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.ph-lh__track::-webkit-scrollbar {
	display: none;
}

.ph-lh__slide {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	aspect-ratio: 16 / 9;
	max-height: 440px;
}

.ph-lh__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ph-lh__credit {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: var(--ph-space-2) var(--ph-space-4);
	font-size: var(--ph-text-label);
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
	text-align: left;
}

.ph-lh__credit-source {
	opacity: 0.85;
	font-style: italic;
}

.ph-lh__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ph-lh__arrow:hover {
	background: rgba(0, 0, 0, 0.75);
}

.ph-lh__arrow--prev { left: var(--ph-space-4); }
.ph-lh__arrow--next { right: var(--ph-space-4); }

/*
 * Edge gradients: give depth to the gallery so the centre slide reads as the
 * focal point and the side-peeking images fade out. Two pseudo-elements on the
 * gallery container, one per side.
 */
.ph-lh__gallery::before,
.ph-lh__gallery::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	z-index: 2;
	pointer-events: none;
}

.ph-lh__gallery::before {
	left: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.35), transparent);
}

.ph-lh__gallery::after {
	right: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.35), transparent);
}

.ph-lh__tour {
	position: absolute;
	right: var(--ph-space-4);
	bottom: var(--ph-space-3);
	z-index: 2;
	color: #fff;
	font-size: var(--ph-text-label);
	background: rgba(0, 0, 0, 0.45);
	padding: var(--ph-space-1) var(--ph-space-3);
	border-radius: var(--ph-radius-pill);
	text-decoration: none;
}

/* ---- Header bar: logo, title, actions ---- */
.ph-lh__barwrap {
	background: var(--ph-color-surface);
	position: relative;
}

.ph-lh__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
	flex-wrap: wrap;
	padding-top: var(--ph-space-4);
	padding-bottom: var(--ph-space-4);
}

/*
 * Logo: 110px circle with a surface-coloured border that blends into the white
 * bar below, creating the smooth "creeping up" overlap from the reference site.
 */
.ph-lh__logo {
	display: inline-block;
	margin-top: -60px;
	z-index: 2;
	position: relative;
}

.ph-lh__logo img {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	border: 4px solid var(--ph-color-surface);
	object-fit: cover;
	background: var(--ph-color-surface);
	box-shadow: 0 2px 12px rgba(33, 37, 58, 0.1);
}

.ph-lh__heading {
	flex: 1 1 200px;
	max-width: 480px;
}

.ph-lh__title {
	margin: 0;
	font-size: var(--ph-text-h2);
}

.ph-lh__tagline {
	margin: 2px 0 0;
	color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-small);
}

/* Push the action pills to the far right of the bar on desktop.
   On mobile, centre them in stacked rows. */
.ph-lh__actions {
	display: flex;
	gap: var(--ph-space-2);
	flex-wrap: wrap;
	margin-left: auto;
	justify-content: center;
}

@media (max-width: 767px) {
	.ph-lh__actions {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
	/* Force a line break before the visited+CTA row. */
	.ph-pill--visited {
		order: 10;
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		text-align: center;
	}
	.ph-lh__cta-mobile {
		order: 11;
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		text-align: center;
	}
	/* Invisible spacer forces the row break. */
	.ph-lh__actions::before {
		content: '';
		order: 9;
		flex-basis: 100%;
		height: 0;
	}
}

.ph-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	padding: 0 var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-surface);
	color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-label);
	font-weight: 500;
	cursor: pointer;
}

.ph-pill .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.ph-pill:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-pill[data-ph-action="favourite"].is-active {
	background: var(--ph-color-primary);
	border-color: var(--ph-color-primary);
	color: #fff;
}
.ph-pill[data-ph-action="favourite"].is-active:hover { opacity: .85; }
.ph-pill--visited { color: var(--ph-color-accent-green); }

@media (max-width: 767px) {
	.ph-pill--visited {
		background: var(--ph-color-accent-green);
		color: #fff;
		border-color: var(--ph-color-accent-green);
	}
	/* Override the generic .ph-pill:hover (which flips text to brand
	   pink). On mobile that read as harsh against the green pill;
	   slightly-darker white reads as a hover state without losing
	   contrast. Covers :hover/:focus/:active so touch (which fires
	   active on tap) gets the same treatment as a desktop hover. */
	.ph-pill--visited:hover,
	.ph-pill--visited:focus,
	.ph-pill--visited:active {
		background: var(--ph-color-accent-green);
		color: rgba(255, 255, 255, 0.78);
		border-color: var(--ph-color-accent-green);
	}
}

/* ---- Tab nav: sticky top on all devices ---- */
.ph-lh__tabs {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--ph-color-surface);
	border-top: 1px solid var(--ph-color-line);
	border-bottom: 2px solid var(--ph-color-line);
	transition: background 0.25s ease, border-color 0.25s ease;
}

@media (max-width: 1023px) {
/* Panels need enough height so the page is always scrollable past the
   tab bar sentinel, keeping the bar in sticky mode on every tab. */
.ph-lh__panel {
	min-height: 100dvh;
}

/* When the WordPress admin bar is present (logged in), offset the sticky
   tab bar so it sits below the admin bar, not behind it. */
body.admin-bar .ph-lh__tabs {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ph-lh__tabs {
		top: 46px;
	}
}
}

/* Listing name: hidden by default. Shown only when the tab bar is in
   themed (sticky) mode. Dark text so it reads on the teal sticky bar. */
.ph-lh__tabs-title {
	display: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--ph-color-ink);
	text-align: center;
	flex: 1;
	min-width: 0;
	position: relative;
}

/* The title text itself. Wrapped in a span so we can absolutely position
   and centre it on the bar, independent of whether the CTA is present. */
.ph-lh__tabs-title-text {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

@media (max-width: 1023px) {
	.ph-lh__tabs--themed .ph-lh__tabs-title {
		display: block;
		max-height: 28px;
		min-height: 28px;
		opacity: 1;
		padding: 6px var(--ph-space-4) 4px;
		border-bottom-color: rgba(0, 0, 0, 0.08);
	}
}

@media (min-width: 1024px) {
	.ph-lh__tabs-title { display: none; }
}

/* CTA button in the title row on mobile sticky mode. Absolutely positioned
   on the right so the listing name (centred via absolute positioning of
   .ph-lh__tabs-title-text below) stays in the visual centre of the bar
   regardless of whether the CTA is rendered. */
.ph-lh__tabs-cta {
	display: none;
}

@media (max-width: 1023px) {
	.ph-lh__tabs--themed .ph-lh__tabs-cta {
		display: inline-block;
		position: absolute;
		right: var(--ph-space-3);
		top: 50%;
		transform: translateY(-50%);
		font-size: 11px;
		font-weight: 600;
		padding: 4px 12px;
		border-radius: var(--ph-radius-pill);
		background: var(--ph-color-primary);
		color: #fff;
		text-decoration: none;
		white-space: nowrap;
		max-width: 38%;
		overflow: hidden;
		text-overflow: ellipsis;
		z-index: 2;
	}

	/* Centre the title text on the bar. Absolute positioning means the
	   CTA on the right does not push the title off-centre. max-width
	   reserves enough room either side so a long title truncates with
	   an ellipsis before it can overlap the CTA. */
	.ph-lh__tabs--themed .ph-lh__tabs-title-text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-width: calc(100% - 130px);
	}
}

/* Themed colours for sticky mode. */
.ph-lh__tabs--themed {
	border-color: transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.ph-lh__tabs--themed .ph-lh__tablist a {
	color: rgba(0, 0, 0, 0.5);
	border-bottom-color: transparent;
}

.ph-lh__tabs--themed .ph-lh__tablist a.is-active,
.ph-lh__tabs--themed .ph-lh__tablist a:hover {
	color: rgba(0, 0, 0, 0.85);
	border-bottom-color: rgba(0, 0, 0, 0.85);
}

.ph-lh__tabs--themed .ph-lh__reserve {
	background: rgba(0, 0, 0, 0.15);
	color: rgba(0, 0, 0, 0.85);
}

.ph-lh__tabs-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ph-space-3);
}

@media (max-width: 1023px) {
	.ph-lh__tabs-inner {
		justify-content: center;
	}
}

.ph-lh__tablist {
	display: flex;
	gap: var(--ph-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

@media (max-width: 1023px) {
	.ph-lh__tablist {
		justify-content: center;
		flex-shrink: 1;
		min-width: 0;
	}
}

.ph-lh__tablist::-webkit-scrollbar {
	display: none;
}

.ph-lh__tablist a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--ph-space-3) 0;
	color: var(--ph-color-ink-soft);
	font-size: 10.5px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	margin-bottom: -2px;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	box-shadow: none;
	background: none;
}

.ph-lh__tablist a .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.ph-lh__tablist a.is-active,
.ph-lh__tablist a:hover {
	color: var(--ph-color-primary);
	border-bottom-color: var(--ph-color-primary);
}

.ph-lh__reserve {
	flex: 0 0 auto;
	font-size: var(--ph-text-small);
	min-height: 34px;
	padding: var(--ph-space-1) var(--ph-space-3);
	margin: 6px 0 8px;
}

/* Mobile CTA: full-width button in the header actions, hidden on desktop. */
.ph-lh__cta-mobile {
	width: 100%;
	text-align: center;
	font-size: var(--ph-text-small);
}

@media (max-width: 1023px) {
	/* Hide the tab-bar reserve button on mobile (CTA is in header + sticky title). */
	.ph-lh__reserve { display: none; }
}

@media (min-width: 1024px) {
	/* Hide the header CTA on desktop (tab-bar has its own). */
	.ph-lh__cta-mobile { display: none; }
}

/* ---- Tab panels: show/hide ---- */
.ph-lh__panel {
	display: none;
}

.ph-lh__panel.is-active {
	display: block !important;
	min-height: 100dvh;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
}
/* Defensive: guarantee the content wrapper inside an active panel is visible.
   Some inherited rules (display:contents on .ph-lh__main for mobile section
   ordering, or order/flex rules) could otherwise leave a panel showing as a
   block with zero visible content. These rules ensure the content always
   renders for whichever panel is active. */
.ph-lh__panel.is-active > .ph-lh__panel-content,
.ph-lh__panel.is-active > .ph-lh__body {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	min-height: 0;
}
.ph-lh__panel.is-active > .ph-lh__body {
	display: grid !important;
}
.ph-lh__panel.is-active .ph-panel {
	display: block !important;
	visibility: visible !important;
}

.ph-lh__panel-content {
	padding-block: var(--ph-space-6);
}

/* ---- Body layout (Home tab) ---- */
.ph-lh__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ph-space-5);
	padding-block: var(--ph-space-6);
}

.ph-lh__content-title {
	text-align: center;
	margin-bottom: var(--ph-space-4);
	font-size: var(--ph-text-h2);
}

.ph-panel--content {
	padding: var(--ph-space-5);
}

/* ---- Menu: clean light rows ---- */
.ph-menu-card {
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
	padding: var(--ph-space-3) 0;
	border-top: 1px solid var(--ph-color-line);
	color: var(--ph-color-ink);
	font-weight: var(--ph-weight-heading);
	text-decoration: none;
}

.ph-menu-card:hover { color: var(--ph-color-primary); text-decoration: none; }
.ph-menu-card .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--ph-color-ink-soft); }
.ph-menu-card__label { font-weight: var(--ph-weight-heading); font-size: var(--ph-text-small); }
.ph-menu-card__hint { margin-left: auto; font-size: var(--ph-text-label); color: var(--ph-color-ink-soft); font-weight: var(--ph-weight-body); }

/* ---- Photos ---- */
.ph-photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ph-space-2);
}

.ph-photos__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.ph-photos__item img { width: 100%; height: 100%; object-fit: cover; }

.ph-photos__more {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(33, 37, 58, 0.55);
	color: #fff;
	font-weight: 600;
	font-size: var(--ph-text-body);
}

.ph-photos__all {
	text-align: center;
	margin-top: var(--ph-space-3);
	font-size: var(--ph-text-small);
}

/* Full photo grid (Photos tab) */
.ph-photos--full {
	grid-template-columns: repeat(2, 1fr);
}

/* ---- Videos ----
   Home tab videos and Gallery tab videos both render as a grid: 2
   columns on mobile, 4 columns on desktop. This replaces the old
   horizontal-scroll layout on the Home tab and matches the photos
   grid for visual consistency. */
.ph-videos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ph-space-2);
}
.ph-videos--full {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ph-space-3);
}
.ph-videos__item {
	position: relative; cursor: pointer; border-radius: var(--ph-radius-sm);
	overflow: hidden; background: #000;
	flex: 0 0 auto;
}
/* Item widths per container (2 per row on mobile, 6 on desktop below). */
.ph-videos > .ph-videos__item { width: calc((100% - var(--ph-space-2)) / 2); }
.ph-videos--full > .ph-videos__item { width: calc((100% - var(--ph-space-3)) / 2); }
/* In a grid, vertical and horizontal cards both stretch to the
   column width; aspect ratio determines their height. */
.ph-videos__item--horizontal { aspect-ratio: 16 / 9; }
.ph-videos__item--vertical { aspect-ratio: 9 / 16; }
.ph-videos__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-videos__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 24px; pointer-events: none;
	transition: background 0.15s;
}
.ph-videos__item:hover .ph-videos__play { background: var(--ph-color-primary); }
.ph-videos__credit {
	position: absolute; bottom: 6px; left: 8px; font-size: 11px;
	color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.ph-videos__item iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* "See All" link below the Home-tab videos. Matches the photos
   See All styling so the two sections feel paired. */
.ph-videos__all {
	text-align: center;
	margin-top: var(--ph-space-3);
	font-size: var(--ph-text-small);
}

/* ---- Video overlay (TikTok-style full-screen player) ----
   Layout uses a centred .ph-voverlay__stage so that on desktop the
   buttons sit right next to the video instead of at the screen edges.
   The stage holds three vertical regions:
     [TOP BAR]    Up (prev), counter, close -- above the video.
     [VIEWPORT]   The video iframe with two thin swipe zones (top and
                  bottom) that capture swipe gestures while leaving the
                  centre of the iframe clickable for things like the
                  Vimeo / TikTok "tap to unmute" prompt.
     [BOTTOM BAR] Hint (just under the video), next (down) button, then
                  the creator credit. Stacked so the credit is never
                  covered by the down button. */
.ph-voverlay {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
	background: #000; z-index: 999999;
	display: flex;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
}

.ph-voverlay__stage {
	display: flex; flex-direction: column;
	width: 100%;
	max-width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

/* Top bar: counter (left), up button (centred), close (right).
   Grid columns are 1fr 44px 1fr so the up arrow in the middle column
   sits at the horizontal centre of the bar, lining up with the down
   arrow in the bottom bar. The counter is in the first 1fr column
   text-aligned left; close is in the third 1fr column justified end. */
.ph-voverlay__top {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr 44px 1fr;
	align-items: center;
	gap: var(--ph-space-3);
	padding: 12px 12px;
	padding-top: max(12px, env(safe-area-inset-top, 12px));
	min-height: 56px;
	box-sizing: border-box;
}

/* Bottom bar: hint above next button above credit. Stacked column
   so the down arrow never covers the creator handle. */
.ph-voverlay__bottom {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 10px;
	padding: 10px 12px;
	padding-bottom: max(16px, env(safe-area-inset-bottom, 12px));
	min-height: 110px;
	box-sizing: border-box;
}

/* Viewport: the rectangle the iframe sits inside. Fills the space
   between the top and bottom bars. */
.ph-voverlay__viewport {
	position: relative; display: flex; align-items: center; justify-content: center;
	flex: 1 1 auto; min-height: 0;
	width: 100%;
	overflow: hidden;
}

.ph-voverlay__frame {
	border: 0; background: #000;
	display: block;
}

/* Thin swipe zones around the edges of the viewport. They capture
   swipe gestures (browsers don't let touch events bubble out of a
   cross-origin iframe, so we need a layer over the iframe to do this).
   By only covering the top strip and the two side strips, the centre
   and the bottom of the iframe stay fully tappable, so Vimeo/TikTok
   unmute prompts, play/pause taps, and the player's bottom control
   bar all still work. */
.ph-voverlay__swipe-zone {
	position: absolute;
	z-index: 1;
	cursor: ns-resize;
}
.ph-voverlay__swipe-zone--top {
	top: 0; left: 0; right: 0;
	height: 14%;
}
.ph-voverlay__swipe-zone--left {
	top: 0; bottom: 0; left: 0;
	width: 60px;
}
.ph-voverlay__swipe-zone--right {
	top: 0; bottom: 0; right: 0;
	width: 60px;
}

/* Mobile: wider side strips because the iframe occupies almost the
   whole screen and the user needs realistic room to start a swipe
   without landing on the player. */
@media (max-width: 767px) {
	.ph-voverlay__swipe-zone--left,
	.ph-voverlay__swipe-zone--right {
		width: 100px;
	}
	.ph-voverlay__swipe-zone--top {
		height: 18%;
	}
}

/* Vertical (9:16) video. Aspect-ratio with auto width and full height
   lets the iframe scale down on small screens while preserving
   proportions. */
.ph-voverlay__frame--vertical {
	height: 100%;
	width: auto;
	aspect-ratio: 9 / 16;
	max-width: 100%;
	max-height: 100%;
}
.ph-voverlay__frame--horizontal {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	max-height: 100%;
}

.ph-voverlay__close {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.2);
	border: 0; color: #fff; font-size: 26px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent;
	justify-self: end;
}
.ph-voverlay__close:hover { background: rgba(255,255,255,0.3); }

/* Nav buttons (up/down). Live in the top and bottom bars, not absolutely
   positioned, so they never overlay the video or the creator handle.
   The up button sits in the centre grid column of the top bar; the down
   button sits centred in the column-flex bottom bar. Both are horizontally
   centred on the stage. */
.ph-voverlay__nav {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
	border: 0; color: #fff; font-size: 22px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.ph-voverlay__nav--prev { justify-self: center; }
.ph-voverlay__nav:hover { background: rgba(255,255,255,0.3); }

.ph-voverlay__counter {
	color: rgba(255,255,255,0.8); font-size: 13px;
	text-align: left;
}

.ph-voverlay__credit-bar {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	max-width: 100%;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* Platform icon (TikTok, Vimeo, YouTube, Instagram) shown next to the
   creator handle. Sized to match the @handle text, inherits its colour. */
.ph-voverlay__credit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #fff;
	opacity: 0.95;
}
.ph-voverlay__credit-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ph-voverlay__credit-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Desktop sizing. The stage clamps to roughly the width of a vertical
   video plus comfortable padding so the buttons sit right beside the
   video instead of in the screen corners. Buttons grow on desktop. */
@media (min-width: 768px) {
	.ph-voverlay {
		padding: 16px;
	}
	.ph-voverlay__stage {
		max-width: 460px;
	}
	.ph-voverlay__top {
		grid-template-columns: 1fr 56px 1fr;
		padding: 8px 4px;
		min-height: 64px;
	}
	.ph-voverlay__bottom {
		padding: 12px 4px;
		min-height: 120px;
		gap: 12px;
	}
	.ph-voverlay__nav {
		width: 56px; height: 56px; font-size: 28px;
	}
	.ph-voverlay__close {
		width: 56px; height: 56px; font-size: 32px;
	}
	.ph-voverlay__frame--vertical {
		max-width: 100%;
		border-radius: 12px;
	}
	.ph-voverlay__frame--horizontal {
		max-width: 100%;
		border-radius: 12px;
	}
}

/* On mobile the stage fills the full screen. */
@media (max-width: 767px) {
	/* Extra clearance at the bottom so the down arrow sits above
	   Safari's address/toolbar without us having to coax the bar
	   into hiding. env(safe-area-inset-bottom) covers the home
	   indicator on notch phones; the +40px on top of that pushes
	   the arrow clear of Safari's chrome on iPhones. */
	.ph-voverlay__bottom {
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
		min-height: 150px;
	}

	/* Iframe is locked to the video's aspect ratio and centred in the
	   viewport. Locking the iframe to 9:16 means Vimeo (and any other
	   player) has nothing to letterbox: the iframe edge matches the
	   video edge, so the cover image fills the iframe rather than
	   being shown half-height inside an over-tall box. There may be
	   a thin black strip on either side of the iframe when the phone
	   viewport is slightly wider than 9:16; the side swipe zones sit
	   over those strips, which is fine -- they capture swipes anyway. */
	.ph-voverlay__frame--vertical {
		position: relative;
		inset: auto;
		width: auto;
		height: 100%;
		aspect-ratio: 9 / 16;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
	}
	.ph-voverlay__frame--horizontal {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
	}
}

.ph-reviews__count { color: var(--ph-color-primary); font-weight: 600; font-size: var(--ph-text-small); }

.ph-empty { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }

/* ---- Sidebar panels ---- */
.ph-panel__title .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	vertical-align: text-bottom;
	color: var(--ph-color-ink-soft);
}

.ph-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ph-space-2);
}

.ph-twocol__item { color: var(--ph-color-ink); font-size: var(--ph-text-small); display: inline-flex; align-items: center; gap: 4px; }
.ph-tube-icon { flex-shrink: 0; vertical-align: middle; }

/* ---- Opening hours ---- */
.ph-hours-panel { padding: 0; overflow: hidden; }

.ph-hours-panel__head {
	display: flex;
	align-items: center;
	gap: var(--ph-space-2);
	flex-wrap: wrap;
	padding: 0 var(--ph-space-4);
	color: #fff;
	font-size: var(--ph-text-label);
	min-height: var(--ph-control-height);
}

.ph-hours-panel__head.is-open { background: var(--ph-color-accent-green); }
.ph-hours-panel__head.is-closed { background: var(--ph-color-ink-soft); }
.ph-hours-panel__today { font-weight: 600; text-transform: uppercase; }
.ph-hours-panel__state { background: rgba(255,255,255,0.2); border-radius: var(--ph-radius-pill); padding: 1px 8px; }
.ph-hours-panel__tz { opacity: 0.9; }
.ph-hours-panel__range { margin-left: auto; }

.ph-hours-list { list-style: none; margin: 0; padding: var(--ph-space-2) var(--ph-space-4) var(--ph-space-3); }
.ph-hours-list li { display: flex; justify-content: space-between; gap: var(--ph-space-3); padding: var(--ph-space-1) 0; color: var(--ph-color-ink); font-size: var(--ph-text-small); }
.ph-hours-list li.is-today { color: var(--ph-color-accent-green); font-weight: 600; }
.ph-hours-list__times { display: flex; gap: var(--ph-space-3); color: var(--ph-color-ink-soft); }
.ph-hours-list li.is-today .ph-hours-list__times { color: var(--ph-color-accent-green); }
.ph-hours-list__closed { color: var(--ph-color-ink-soft); }

/* ---- Price range (reference-matched) ---- */
.ph-price-panel { overflow: hidden; }
.ph-price-panel .ph-panel__title { border-bottom: 1px solid var(--ph-color-line); padding-bottom: var(--ph-space-2); }
.ph-price-range-block { position: relative; padding: var(--ph-space-4) var(--ph-space-4) var(--ph-space-3) 4.5rem; }
.ph-price-range__band {
	position: absolute;
	left: var(--ph-space-3);
	top: 35%;
	transform: translateY(-50%);
	font-size: 2.8rem;
	font-weight: 200;
	color: var(--ph-color-line);
	line-height: 1;
	pointer-events: none;
	user-select: none;
	opacity: 0.4;
	z-index: 0;
	letter-spacing: -0.05em;
}
.ph-price-range__label { color: var(--ph-color-ink-soft); margin: 0 0 var(--ph-space-2); font-size: var(--ph-text-small); position: relative; z-index: 1; }
.ph-price-range { display: flex; align-items: center; gap: var(--ph-space-3); margin: 0; position: relative; z-index: 1; }
.ph-price-range__val { font-size: 1.5rem; font-weight: 300; color: var(--ph-color-primary); }
.ph-price-range__arrow { color: var(--ph-color-ink-soft); font-weight: 300; }
.ph-price-range__service { font-size: var(--ph-text-label); color: var(--ph-color-ink-soft); margin: var(--ph-space-2) 0 0; position: relative; z-index: 1; }

/* ---- Business info ---- */
.ph-biz { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ph-space-2); }
.ph-biz li { display: flex; gap: var(--ph-space-2); align-items: flex-start; color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-biz .dashicons { color: var(--ph-color-ink-soft); flex: 0 0 auto; font-size: 16px; width: 16px; height: 16px; }
.ph-social { display: flex; gap: var(--ph-space-2); margin-top: var(--ph-space-3); }
.ph-social__link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: var(--ph-radius-sm);
	background: var(--ph-color-bg); color: var(--ph-color-ink-soft);
}
.ph-social__link:hover { background: var(--ph-color-primary); color: #fff; }

/* ---- Map ---- */
.ph-map { position: relative; overflow: hidden; min-height: 200px; }
.ph-map__placeholder { width: 100%; height: 200px; object-fit: cover; display: block; }
.ph-map__canvas { width: 100%; height: 200px; }
.ph-map__directions {
	position: absolute; top: var(--ph-space-2); left: var(--ph-space-2); z-index: 2;
	display: inline-flex; align-items: center; gap: 3px;
	background: var(--ph-color-surface); color: var(--ph-color-ink);
	padding: var(--ph-space-1) var(--ph-space-3); border-radius: var(--ph-radius-sm);
	font-size: var(--ph-text-label); font-weight: 600; box-shadow: var(--ph-shadow-card);
	text-decoration: none;
}
.ph-map__fallback { padding: var(--ph-space-3); color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-map__embed { display: block; width: 100%; border-radius: var(--ph-radius-sm); }
.ph-map--large .ph-map__embed { height: 350px; }
.ph-map--large .ph-map__placeholder { height: 350px; }
.ph-map--large .ph-map__canvas { height: 350px; }
.ph-map__address { display: flex; align-items: center; gap: var(--ph-space-2); color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); margin-top: var(--ph-space-3); }

/* ---- Directions: Google Maps + Apple Maps buttons ---- */
.ph-directions { display: flex; gap: var(--ph-space-2); margin-top: var(--ph-space-2); }
.ph-directions__btn {
	display: inline-flex; align-items: center; gap: 4px;
	padding: var(--ph-space-2) var(--ph-space-3);
	border-radius: var(--ph-radius-sm);
	font-size: var(--ph-text-label); font-weight: 600;
	text-decoration: none; flex: 1; justify-content: center;
}
.ph-directions__btn--google { background: #4285f4; color: #fff; }
.ph-directions__btn--google:hover { background: #3367d6; color: #fff; }
.ph-directions__btn--apple { background: #333; color: #fff; }
.ph-directions__btn--apple:hover { background: #555; color: #fff; }

/* ---- Dietary icons (inline emoji before each term) ---- */
/* Dietary chips in the standard tag list. SVG icon + label, both inherit
   currentColor so the chip's text color carries through to the icon. */
.ph-dietary-item { display: inline-flex; align-items: center; gap: 6px; }
.ph-dietary-item__icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ph-dietary-item__icon svg { width: 14px; height: 14px; }

/* Diet bars: the prominent "100% Vegan / Vegetarian / Halal Restaurant"
   pills that lead the dietary section. Sized to match the opening hours
   header block on the same page so the two greens read as a system:
   same padding, same font size, same weight. White text on the diet
   coloured background; colours come from tokens so a single token edit
   re-skins every bar. */
.ph-diet-bars-wrap { margin-bottom: var(--ph-space-4); width: 100%; }

.ph-diet-bars {
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-2);
	width: 100%;
}

.ph-diet-bar {
	display: flex;
	align-items: center;
	gap: var(--ph-space-2);
	padding: 0 var(--ph-space-4);
	border-radius: var(--ph-radius-md);
	color: #fff;
	font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-label);
	line-height: 1.2;
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ph-control-height);
}
.ph-diet-bar__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
.ph-diet-bar__icon svg {
	width: 20px;
	height: 20px;
}
.ph-diet-bar__label {
	flex: 1;
	text-align: center;
	padding-right: 20px; /* visually balance the left icon so the label sits truly centred */
}

.ph-diet-bar--vegan      { background: var(--ph-color-diet-vegan); }
.ph-diet-bar--vegetarian { background: var(--ph-color-diet-vegetarian); }
.ph-diet-bar--halal      { background: var(--ph-color-diet-halal); }

/* Visibility: the bars render in three places (main col, sidebar, info
   tab) so each instance has a wrapper class that hides it outside its
   intended breakpoint. The info-tab instance is always visible because
   the info tab itself is mobile-only. */
@media (max-width: 1023px) {
	.ph-diet-bars-wrap--desktop { display: none; }
}
@media (min-width: 1024px) {
	.ph-diet-bars-wrap--mobile { display: none; }
}

/* ---- Reviews ---- */
.ph-reviews__summary {
	display: flex; align-items: center; gap: var(--ph-space-3);
	padding-bottom: var(--ph-space-3); margin-bottom: var(--ph-space-3);
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-reviews__avg { font-size: 2rem; font-weight: 300; color: var(--ph-color-primary); }
.ph-reviews__stars { color: #f5a623; font-size: 1.1rem; }
.ph-reviews__count { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-reviews__empty { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-reviews__list { display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-review { padding-bottom: var(--ph-space-3); border-bottom: 1px solid var(--ph-color-line); }
.ph-review:last-child { border-bottom: 0; padding-bottom: 0; }
.ph-review__header { display: flex; align-items: center; gap: var(--ph-space-2); margin-bottom: var(--ph-space-2); }
.ph-review__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ph-review__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--ph-color-line); color: var(--ph-color-ink-soft); }
.ph-review__meta { flex: 1; min-width: 0; }
.ph-review__author { display: block; font-weight: 500; font-size: var(--ph-text-small); color: var(--ph-color-ink); text-decoration: none; }
a.ph-review__author:hover { color: var(--ph-color-primary); }
.ph-review__date { display: block; font-size: 11px; color: var(--ph-color-ink-soft); }
.ph-review__rating { color: #f5a623; font-size: var(--ph-text-small); white-space: nowrap; flex-shrink: 0; }
.ph-review__text { margin: 0; font-size: var(--ph-text-small); line-height: 1.6; color: var(--ph-color-ink); }
.ph-review__source {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: var(--ph-space-2); font-size: 11px; color: var(--ph-color-ink-soft);
}

/* ---- Tips (horizontal scroll cards, TripAdvisor style) ---- */
.ph-tips__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ph-space-3); }
.ph-tips__scroll {
	display: flex; gap: var(--ph-space-3); overflow-x: auto;
	scrollbar-width: none; -ms-overflow-style: none;
	padding-bottom: var(--ph-space-2);
}
.ph-tips__scroll::-webkit-scrollbar { display: none; }
.ph-tip-card {
	flex: 0 0 280px; display: flex; flex-direction: column; justify-content: space-between;
	padding: var(--ph-space-4); border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm); background: var(--ph-color-surface);
}
.ph-tip-card__text { font-size: var(--ph-text-body); font-weight: 500; line-height: 1.5; margin: 0 0 auto; }
.ph-tip-card__footer { display: flex; align-items: center; gap: var(--ph-space-2); margin-top: var(--ph-space-3); }
.ph-tip-card__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ph-color-line); display: flex; align-items: center; justify-content: center; color: var(--ph-color-ink-soft); flex-shrink: 0; }
.ph-tip-card__meta { min-width: 0; }
.ph-tip-card__author { display: block; font-weight: 500; font-size: var(--ph-text-small); }
.ph-tip-card__visited { display: block; font-size: 11px; color: var(--ph-color-ink-soft); }

/* ---- Ad slots ---- */
.ph-ad-slot { margin: var(--ph-space-4) 0; text-align: center; min-height: 90px; }
.ph-ad-slot--sidebar { margin-top: var(--ph-space-4); }

/* ---- Related / featured listings ---- */
.ph-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ph-space-3); }
.ph-related__card {
	border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm);
	overflow: hidden; text-decoration: none; color: var(--ph-color-ink);
	transition: box-shadow 0.15s ease;
}
.ph-related__card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ph-related__img { display: block; width: 100%; height: 120px; object-fit: cover; }
.ph-related__img--empty { display: flex; align-items: center; justify-content: center; background: var(--ph-color-line); color: var(--ph-color-ink-soft); height: 120px; }
.ph-related__info { padding: var(--ph-space-2) var(--ph-space-3); }
.ph-related__name { display: block; font-weight: 500; font-size: var(--ph-text-small); }
.ph-related__area { display: block; font-size: 11px; color: var(--ph-color-ink-soft); }
.ph-related__band { display: block; font-size: 11px; color: var(--ph-color-primary); }

/* ---- Claim ---- */
.ph-claim__lead { font-weight: 600; margin: 0 0 var(--ph-space-1); font-size: var(--ph-text-small); }
.ph-claim__text { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-claim__form { margin-top: var(--ph-space-3); display: flex; flex-direction: column; gap: var(--ph-space-3); }
/* An author rule with display on it beats the browser's [hidden] default, so
   the form stayed open however the toggle was set. Stated explicitly, as with
   any element this stylesheet gives a display value and also hides. */
.ph-claim__form[hidden] { display: none; }
.ph-claim__label { display: flex; flex-direction: column; gap: var(--ph-space-1); font-size: var(--ph-text-small); font-weight: 500; }
.ph-claim__form select,
.ph-claim__form input,
.ph-claim__form textarea {
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	padding: var(--ph-space-2);
	font: inherit;
	font-size: var(--ph-text-small);
	background: var(--ph-color-surface);
}
.ph-claim__form textarea { resize: vertical; }
.ph-claim__status { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin: 0; }
.ph-claim__status:empty { display: none; }
.ph-btn--dark { background: var(--ph-color-ink); color: #fff; }
.ph-btn--dark:hover { filter: brightness(1.15); color: #fff; }

/* ---- Edit floating button ---- */
.ph-edit-fab {
	position: fixed;
	right: var(--ph-space-4);
	bottom: var(--ph-space-4);
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ph-color-accent-green);
	color: #fff;
	padding: var(--ph-space-2) var(--ph-space-4);
	border-radius: var(--ph-radius-pill);
	box-shadow: var(--ph-shadow-card);
	font-weight: 600;
	font-size: var(--ph-text-small);
	text-decoration: none;
}
.ph-edit-fab:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }

/* On desktop the tab bar is ALWAYS white, never themed. This overrides any
   JS-set inline style. The teal colour is mobile-only. */
@media (min-width: 1024px) {
	.ph-lh__tabs {
		background: var(--ph-color-surface) !important;
		border-top-color: var(--ph-color-line) !important;
		border-bottom-color: var(--ph-color-line) !important;
	}
	.ph-lh__tabs--themed .ph-lh__tablist a {
		color: var(--ph-color-ink-soft);
		border-bottom-color: transparent;
	}
	.ph-lh__tabs--themed .ph-lh__tablist a.is-active,
	.ph-lh__tabs--themed .ph-lh__tablist a:hover {
		color: var(--ph-color-primary);
		border-bottom-color: var(--ph-color-primary);
	}
	.ph-lh__tabs-title { display: none !important; }
	.ph-lh__tabs-cta { display: none !important; }
}

/* ---- Desktop two-column ---- */
@media (min-width: 1024px) {
	.ph-lh__slide { flex-basis: 38%; }
	.ph-lh__body { grid-template-columns: 1fr 320px; align-items: start; }
	.ph-photos { grid-template-columns: repeat(4, 1fr); }
	.ph-photos--full { grid-template-columns: repeat(4, 1fr); }
	/* Videos: 6 per line on desktop so each card is narrower. Flexbox with
	   justify-content:center means a partial row (fewer than 6 videos) is
	   centred in the element rather than left-aligned. */
	.ph-videos > .ph-videos__item { width: calc((100% - 5 * var(--ph-space-2)) / 6); }
	.ph-videos--full > .ph-videos__item { width: calc((100% - 5 * var(--ph-space-3)) / 6); }
	.ph-mobile-only { display: none !important; }
}

/* ---- Address link (clickable, opens maps) ---- */
.ph-map__address-link {
	display: flex; align-items: center; gap: var(--ph-space-2);
	padding: var(--ph-space-2) 0; margin-top: var(--ph-space-2);
	color: var(--ph-color-ink); font-size: var(--ph-text-small);
	text-decoration: none;
}
.ph-map__address-link:hover { color: var(--ph-color-primary); }
.ph-map__address-link .dashicons { color: var(--ph-color-ink-soft); font-size: 16px; width: 16px; height: 16px; }

/* ---- Lightbox overlay with prev/next navigation ---- */
.ph-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ph-space-3);
	padding: var(--ph-space-4);
	background: rgba(20, 22, 34, 0.92);
}

.ph-lightbox[hidden] { display: none; }

.ph-lightbox__close {
	position: absolute;
	top: var(--ph-space-3);
	right: var(--ph-space-4);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 28px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	z-index: 2;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ph-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.35);
}

.ph-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ph-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.3);
}

.ph-lightbox__nav--prev { left: var(--ph-space-4); }
.ph-lightbox__nav--next { right: var(--ph-space-4); }

.ph-lightbox__figure {
	margin: 0;
	max-width: min(1000px, 88vw);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ph-space-2);
}

.ph-lightbox__img {
	max-width: 100%;
	max-height: 72vh;
	object-fit: contain;
}

.ph-lightbox__cap {
	color: #fff;
	text-align: center;
	font-size: var(--ph-text-small);
}

.ph-lightbox__credit {
	display: block;
	opacity: 0.8;
	font-style: italic;
	margin-top: 2px;
}

body.ph-lightbox-open { overflow: hidden; }

/* Swipe hint: visible for 7 seconds. Default layout is inside the
   bottom bar of the overlay (just below the video and above the down
   button) which is what we want on desktop. On mobile we lift it to
   the top of the screen instead. */
.ph-voverlay__hint {
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12px;
	padding: 8px 14px;
	border-radius: 20px;
	animation: ph-hint-fade 7s ease-in forwards;
	pointer-events: none;
	white-space: nowrap;
	text-align: center;
	z-index: 20;
}

@media (max-width: 767px) {
	.ph-voverlay__hint {
		position: absolute;
		top: 70px;
		left: 50%;
		transform: translateX(-50%);
		max-width: calc(100% - 32px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@keyframes ph-hint-fade {
	0%, 85% { opacity: 1; }
	100% { opacity: 0; }
}

/* ---- Tips horizontal scroll ---- */

.ph-tips__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ph-tips__scroll {
	display: flex;
	gap: var(--ph-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--ph-space-2);
	scrollbar-width: none;
}

.ph-tips__scroll::-webkit-scrollbar { display: none; }

.ph-tip-card {
	flex: 0 0 calc(50% - var(--ph-space-2));
	min-width: 280px;
	scroll-snap-align: start;
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md);
	padding: var(--ph-space-4);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
}

@media (max-width: 600px) {
	.ph-tip-card { flex: 0 0 85%; }
}

.ph-tip-card__text {
	font-size: var(--ph-text-body);
	font-weight: var(--ph-weight-heading);
	color: var(--ph-color-ink);
	line-height: 1.5;
	margin: 0 0 var(--ph-space-4);
}

.ph-tip-card__footer {
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
}

.ph-tip-card__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ph-color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ph-color-ink-soft);
}

.ph-tip-card__meta {
	display: flex;
	flex-direction: column;
}

.ph-tip-card__author {
	font-size: var(--ph-text-small);
	font-weight: var(--ph-weight-heading);
	color: var(--ph-color-ink);
}

.ph-tip-card__visited {
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
}

/* Tips submission form */

.ph-tip-form__text {
	width: 100%;
	padding: var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-body);
	resize: vertical;
	min-height: 80px;
	margin-bottom: var(--ph-space-3);
}

.ph-tip-form__row {
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
	flex-wrap: wrap;
}

.ph-tip-form__label {
	font-size: var(--ph-text-small);
	font-weight: var(--ph-weight-heading);
	color: var(--ph-color-ink-soft);
}

.ph-tip-form__date {
	padding: var(--ph-space-2) var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-small);
	min-height: 36px;
}

.ph-tip-form__submit {
	padding: var(--ph-space-2) var(--ph-space-4);
	background: var(--ph-color-primary);
	color: #fff;
	border: none;
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-small);
	font-weight: var(--ph-weight-heading);
	cursor: pointer;
	min-height: 36px;
}

.ph-tip-form__msg {
	font-size: var(--ph-text-small);
	margin-top: var(--ph-space-2);
}

/* ════════════════════════════════════════════════════════════════
   Info tab two-column layout (desktop only).

   When the Info tab is the active tab on a desktop viewport, lay the
   panels out as two columns rather than a single stacked list, which
   reads as too spread out on a wide screen. The grid is ordered so
   that opening hours, price, and business info sit in the left column,
   and the dietary cluster (diet bars, dietary requirements, features,
   cuisine) sits in the right column.

   The :not() selector list and the explicit grid-column declarations
   override source order; the user can drag the order in Edit Sidebar
   however they like and the column assignment still holds, because we
   target panel classes rather than DOM position.

   On mobile (< 1024px) we revert to single column so the layout
   matches what you see on phones. Mobile already orders this content
   correctly via plan_heavy_render_sidebar_sections.
   ════════════════════════════════════════════════════════════════ */

/* Remove the gap between the dietary pill bars and the dietary
   requirements panel on the Info tab. The bars wrap had its own
   bottom margin from the wrapper rules earlier in this file, and the
   following panel had a top margin; together they produced a visible
   gap the user flagged. Zero both for the --info variant so the two
   blocks read as one connected cluster. */
.ph-diet-bars-wrap--info {
	margin-bottom: 0;
}
.ph-diet-bars-wrap--info + .ph-dietary-panel,
.ph-diet-bars-wrap--info + .ph-panel.ph-dietary-panel {
	margin-top: 0;
}

/* Info tab: two independent columns so items stack without
   the tall hours panel on the left stretching the right. */
.ph-info-grid {
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-3);
}

/* On mobile, dietary pills and dietary box appear first. */
.ph-info-grid__right { order: -1; }

@media (min-width: 1024px) {
	.ph-info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--ph-space-3);
		align-items: start;
	}
	.ph-info-grid__left {
		grid-column: 1; grid-row: 1 / span 10;
		display: flex; flex-direction: column; gap: var(--ph-space-3);
	}
	.ph-info-grid__right {
		grid-column: 2; order: 0;
		display: flex; flex-direction: column; gap: var(--ph-space-3);
	}
	.ph-info-grid__bottom {
		grid-column: 2;
		display: flex; flex-direction: column; gap: var(--ph-space-3);
	}
}

/* ════════════════════════════════════════════════════════════════
   Reviews tab.

   Two sections share the panel: imported reviews (sourced from the
   listing's Google Place when configured) and tips (short suggestions
   left by signed-in users). Both render as simple unstyled lists with
   per-row card treatment so the eye can scan down the column.

   Reviews carry an attribution row for Google-sourced entries with a
   link back to the reviewer's profile, which is how Google's terms
   require their reviews to be displayed.

   The tip submission form is a stacked layout on mobile (textarea
   full width, then a row with the visit date and submit) and the
   same on desktop because longer copy is the norm here and we want
   the textarea to breathe.
   ════════════════════════════════════════════════════════════════ */

.ph-reviews { }
.ph-reviews__summary {
	font-size: var(--ph-text-small);
	font-weight: var(--ph-weight-body);
	color: var(--ph-color-ink-soft);
	margin-left: var(--ph-space-2);
}
.ph-reviews__empty,
.ph-tips__empty {
	color: var(--ph-color-ink-soft);
	font-style: italic;
	margin: var(--ph-space-3) 0 0;
}
.ph-reviews__list {
	list-style: none;
	padding: 0;
	margin: var(--ph-space-4) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-4);
}
.ph-review {
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md);
	padding: var(--ph-space-4);
	background: var(--ph-color-surface);
}
.ph-review__head {
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--ph-space-2);
}
.ph-review__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 40px;
}
.ph-review__author {
	font-weight: var(--ph-weight-heading);
	color: var(--ph-color-ink);
}
.ph-review__rating {
	display: inline-flex;
	color: #f5b400;
}
.ph-review__rating .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}
.ph-review__rating .dashicons-star-empty { color: var(--ph-color-line); }
.ph-review__source {
	margin-left: auto;
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
	background: var(--ph-color-bg);
	border-radius: var(--ph-radius-pill);
	padding: 2px 10px;
}
.ph-review__source a { color: inherit; text-decoration: underline; }
.ph-review__body {
	margin: 0;
	color: var(--ph-color-ink);
	line-height: 1.5;
}

.ph-tips { margin-top: var(--ph-space-6); }
.ph-tips__signin {
	color: var(--ph-color-ink-soft);
}
.ph-tips__signin a {
	color: var(--ph-color-primary);
	font-weight: var(--ph-weight-heading);
	text-decoration: none;
}
.ph-tips__signin a:hover { text-decoration: underline; }

.ph-tip-form {
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-3);
	margin: var(--ph-space-3) 0 var(--ph-space-5);
	padding: var(--ph-space-4);
	background: var(--ph-color-bg);
	border-radius: var(--ph-radius-md);
}
.ph-tip-form__label {
	font-weight: var(--ph-weight-heading);
	color: var(--ph-color-ink);
}
.ph-tip-form__text {
	width: 100%;
	padding: var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-body);
	resize: vertical;
	min-height: 80px;
}
.ph-tip-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ph-space-3);
}
.ph-tip-form__visit-label {
	color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-small);
}
.ph-tip-form__visit {
	padding: var(--ph-space-2) var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-family: var(--ph-font-body);
}
.ph-tip-form__submit { margin-left: auto; }
.ph-tip-form__status {
	margin: 0;
	min-height: 1.2em;
	font-size: var(--ph-text-small);
}
.ph-tip-form__status--success { color: var(--ph-color-open); }
.ph-tip-form__status--error   { color: var(--ph-color-closed); }
.ph-tip-form__status--pending { color: var(--ph-color-ink-soft); }

.ph-tips__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-3);
}
.ph-tip {
	padding: var(--ph-space-3) var(--ph-space-4);
	border-left: 3px solid var(--ph-color-primary);
	background: var(--ph-color-surface);
	border-radius: 0 var(--ph-radius-md) var(--ph-radius-md) 0;
}
.ph-tip__head {
	display: flex;
	gap: var(--ph-space-3);
	justify-content: space-between;
	margin-bottom: var(--ph-space-2);
	font-size: var(--ph-text-small);
}
.ph-tip__author { font-weight: var(--ph-weight-heading); color: var(--ph-color-ink); }
.ph-tip__visited { color: var(--ph-color-ink-soft); }
.ph-tip__body { margin: 0; line-height: 1.5; color: var(--ph-color-ink); }

/* ---- Structured menu (accordion + search) ---- */
.ph-smenu__search {
	display: flex;
	gap: var(--ph-space-2);
	margin-bottom: var(--ph-space-4);
}
.ph-smenu__search-input {
	flex: 1;
	padding: var(--ph-space-3) var(--ph-space-4);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-body);
	color: var(--ph-color-ink);
	background: var(--ph-color-surface);
	outline: none;
}
.ph-smenu__search-input:focus { border-color: var(--ph-color-primary); }
.ph-smenu__search-input::placeholder { color: var(--ph-color-ink-soft); }
.ph-smenu__section { margin-bottom: var(--ph-space-2); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); overflow: hidden; }
.ph-smenu__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--ph-space-3) var(--ph-space-4);
	background: var(--ph-color-bg);
	cursor: pointer; border: none; width: 100%;
	font-family: var(--ph-font-display); font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-h3); color: var(--ph-color-ink); text-align: left;
	transition: background 0.15s;
}
.ph-smenu__header:hover { background: var(--ph-color-line); }
.ph-smenu__header .dashicons { transition: transform 0.2s; font-size: 16px; color: var(--ph-color-ink-soft); }
.ph-smenu__header.is-open { background: var(--ph-color-primary); color: #fff; }
.ph-smenu__header.is-open .dashicons { transform: rotate(180deg); color: #fff; }
.ph-smenu__header.is-open .ph-smenu__count { color: rgba(255,255,255,0.7); }
.ph-smenu__body { display: none; padding: 0 var(--ph-space-4) var(--ph-space-3); }
.ph-smenu__section.is-open .ph-smenu__body { display: block; }
.ph-smenu__item {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: var(--ph-space-3); padding: var(--ph-space-3) 0;
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-smenu__item:last-child { border-bottom: none; }
.ph-smenu__item.is-hidden { display: none; }
.ph-smenu__item-info { flex: 1; }
.ph-smenu__item-name { font-weight: 600; color: var(--ph-color-ink); font-size: var(--ph-text-body); }
.ph-smenu__item-desc { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); margin-top: 2px; }
.ph-smenu__item-price { font-weight: 600; color: var(--ph-color-primary); white-space: nowrap; font-size: var(--ph-text-body); }
.ph-smenu__addon { display: flex; justify-content: space-between; padding: 2px 0 2px var(--ph-space-4); font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); }
.ph-smenu__addon-price { color: var(--ph-color-ink); }
.ph-smenu__count { font-size: var(--ph-text-label); color: var(--ph-color-ink-soft); font-weight: 400; margin-left: var(--ph-space-2); }
.ph-smenu__menu-heading { font-size: var(--ph-text-h2); font-weight: var(--ph-weight-heading); color: var(--ph-color-ink); margin: var(--ph-space-4) 0 var(--ph-space-3); padding-bottom: var(--ph-space-2); border-bottom: 2px solid var(--ph-color-primary); }
.ph-smenu__menu-heading:first-child { margin-top: 0; }

/* ---- Tip form: Month + Year visit picker ---- */
.ph-tip-form__date-group {
	display: inline-flex;
	gap: var(--ph-space-2);
}
.ph-tip-form__month,
.ph-tip-form__year {
	padding: var(--ph-space-2) var(--ph-space-3);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-small);
	min-height: 36px;
	background: var(--ph-color-surface, #fff);
	color: var(--ph-color-ink);
}

/* ---- FAQ accordion (listing page) ---- */
.ph-faq__list {
	display: flex;
	flex-direction: column;
}
.ph-faq__item {
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-faq__item:first-child {
	border-top: 1px solid var(--ph-color-line);
}
.ph-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ph-space-3);
	cursor: pointer;
	padding: var(--ph-space-3) var(--ph-space-1);
	font-weight: var(--ph-weight-heading);
	color: var(--ph-color-ink);
	list-style: none;
}
.ph-faq__q::-webkit-details-marker { display: none; }
.ph-faq__chevron {
	flex: none;
	transition: transform 0.2s ease;
	color: var(--ph-color-ink-soft);
}
.ph-faq__item[open] .ph-faq__chevron { transform: rotate(180deg); }
.ph-faq__a {
	padding: 0 var(--ph-space-1) var(--ph-space-4);
	color: var(--ph-color-ink-soft);
	line-height: 1.6;
}
.ph-faq__a > *:first-child { margin-top: 0; }
.ph-faq__a > *:last-child { margin-bottom: 0; }
.ph-faq__empty {
	color: var(--ph-color-ink-soft);
	font-style: italic;
}

/* ── Venue children ("Inside this venue") ── */
.ph-venue-children__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--ph-space-4, 16px);
}
.ph-venue-child__link {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ph-color-line, #e5e7eb);
	border-radius: var(--ph-radius-md, 12px);
	overflow: hidden;
	background: var(--ph-color-surface, #fff);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ph-venue-child__link:hover {
	box-shadow: var(--ph-shadow-md, 0 6px 20px rgba(0,0,0,0.08));
	transform: translateY(-2px);
}
.ph-venue-child__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--ph-color-bg, #f3f4f6);
}
.ph-venue-child__body { padding: var(--ph-space-3, 12px); }
.ph-venue-child__name { display: block; font-weight: var(--ph-weight-heading, 700); margin-bottom: 2px; }
.ph-venue-child__type { display: block; font-size: var(--ph-text-small, 13px); color: var(--ph-color-muted, #6b7280); }

/* ── Menu dietary filter bar ── */
.ph-smenu__filters {
	display: flex;
	gap: var(--ph-space-2, 8px);
	flex-wrap: wrap;
	margin-bottom: var(--ph-space-4, 16px);
	padding-bottom: var(--ph-space-4, 16px);
	border-bottom: 1px solid var(--ph-color-line, #e5e7eb);
}
.ph-smenu__filter {
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid var(--ph-color-line, #e5e7eb);
	background: var(--ph-color-surface, #fff);
	color: var(--ph-color-ink, #21253a);
	font-size: var(--ph-text-small, 13px);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ph-smenu__filter.is-active,
.ph-smenu__filter:hover { background: var(--ph-color-primary, #e8568a); color: #fff; border-color: var(--ph-color-primary, #e8568a); }
.ph-smenu__filter--vegan.is-active,
.ph-smenu__filter--vegan:hover { background: #16a34a; border-color: #16a34a; }
.ph-smenu__filter--vegetarian.is-active,
.ph-smenu__filter--vegetarian:hover { background: #65a30d; border-color: #65a30d; }
.ph-smenu__filter--halal.is-active,
.ph-smenu__filter--halal:hover { background: #0891b2; border-color: #0891b2; }
.ph-smenu__filter--gf.is-active,
.ph-smenu__filter--gf:hover { background: #d97706; border-color: #d97706; }

/* Dietary badge pills inline with item name */
.ph-smenu__dtag {
	display: inline-flex;
	align-items: center;
	margin-left: 5px;
	padding: 0 5px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	vertical-align: middle;
	line-height: 1.6;
}

/* Dietary filter: greyed-out when no items are tagged yet */
.ph-smenu__filter.is-empty {
	opacity: 0.4;
	cursor: default;
}
.ph-smenu__filter.is-empty:hover {
	background: var(--ph-color-surface, #fff);
	color: var(--ph-color-ink, #21253a);
	border-color: var(--ph-color-line, #e5e7eb);
}
.ph-smenu__filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	font-size: 10px;
	background: rgba(255,255,255,0.3);
	margin-left: 3px;
}
.ph-smenu__filter.is-active .ph-smenu__filter-count { background: rgba(255,255,255,0.4); }

/* ---- Packages & pricing (activity listings) ---- */
.ph-pkg { display: flex; flex-direction: column; gap: var(--ph-space-3); }
.ph-setmenus__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ph-space-3); margin-top: var(--ph-space-3); }
.ph-setmenu-card { border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); padding: var(--ph-space-3) var(--ph-space-4); display: flex; flex-direction: column; gap: var(--ph-space-1); }
.ph-setmenu-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ph-space-2); }
.ph-setmenu-card__name { font-weight: 600; }
.ph-setmenu-card__price { font-weight: 600; color: var(--ph-color-primary); white-space: nowrap; }
.ph-setmenu-card__dur { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.ph-setmenu-card__dur .dashicons { font-size: 14px; width: 14px; height: 14px; }
.ph-setmenu-card__desc { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin: var(--ph-space-1) 0 0; }
.ph-pkg__card {
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	padding: var(--ph-space-3) var(--ph-space-4);
}
.ph-pkg__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--ph-space-3);
}
.ph-pkg__name {
	font-family: var(--ph-font-display);
	font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-h3);
	color: var(--ph-color-ink);
	margin: 0;
}
.ph-pkg__price {
	font-weight: 600;
	color: var(--ph-color-primary);
	font-size: var(--ph-text-body);
	white-space: nowrap;
}
.ph-pkg__duration {
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink-soft);
	margin: var(--ph-space-1) 0 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.ph-pkg__duration .dashicons { font-size: 14px; width: 14px; height: 14px; }
.ph-pkg__desc {
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink-soft);
	margin: var(--ph-space-2) 0 0;
	line-height: 1.5;
}

/* ---- Activity details grid ---- */
.ph-act-info__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--ph-space-3);
}
.ph-act-info__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ph-space-3);
	background: var(--ph-color-bg);
	border-radius: var(--ph-radius-sm);
	text-align: center;
}
.ph-act-info__icon { font-size: 20px; color: var(--ph-color-primary); margin-bottom: 2px; }
.ph-act-info__label {
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ph-act-info__value {
	font-weight: 600;
	font-size: var(--ph-text-body);
	color: var(--ph-color-ink);
}
.ph-act-info--tab { margin-top: var(--ph-space-4); padding-top: var(--ph-space-4); border-top: 1px solid var(--ph-color-line); }
.ph-panel__subtitle {
	font-family: var(--ph-font-display);
	font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-body);
	color: var(--ph-color-ink);
	margin: 0 0 var(--ph-space-3);
	display: flex;
	align-items: center;
	gap: var(--ph-space-2);
}

/* ── Offers ─────────────────────────────────────────────────────────────── */
.ph-offer-card {
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-1);
	padding: var(--ph-space-2) 0;
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-offer-card:last-of-type { border-bottom: none; }
.ph-offer-card__title {
	font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink);
}
.ph-offer-card__desc {
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
	line-height: 1.4;
}
.ph-offer-card__expiry {
	font-size: var(--ph-text-label);
	color: var(--ph-color-primary);
	font-weight: 600;
}
.ph-offers-sidebar__more {
	display: inline-block;
	margin-top: var(--ph-space-2);
	font-size: var(--ph-text-label);
	color: var(--ph-color-primary);
	text-decoration: none;
}
.ph-offers-sidebar__more:hover { text-decoration: underline; }

/* Offers tab panel */
.ph-offer-full {
	padding: var(--ph-space-3) 0;
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-offer-full:last-child { border-bottom: none; }
.ph-offer-full__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ph-space-2);
	margin-bottom: var(--ph-space-1);
	flex-wrap: wrap;
}
.ph-offer-full__title {
	font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-body);
	color: var(--ph-color-ink);
}
.ph-offer-full__badge {
	font-size: var(--ph-text-label);
	color: var(--ph-color-primary);
	font-weight: 600;
	white-space: nowrap;
	background: var(--ph-color-primary-light, #fce8ef);
	padding: 2px 10px;
	border-radius: 999px;
}
.ph-offer-full__desc {
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink);
	margin: 0 0 var(--ph-space-1);
	line-height: 1.5;
}
.ph-offer-full__terms {
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
	margin: 0;
}

/* ── Service hours (kitchen, bar schedules in sidebar hours panel) ───────── */
.ph-svc-hours {
	margin-top: var(--ph-space-3);
	background: rgba(0,0,0,0.025);
	border-radius: var(--ph-radius-sm, 6px);
	padding: var(--ph-space-2) var(--ph-space-2);
}
.ph-svc-hours__head {
	display: flex;
	align-items: center;
	gap: var(--ph-space-1);
	margin-bottom: var(--ph-space-1);
}
.ph-svc-hours__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ph-svc-hours__dot.is-open  { background: var(--ph-color-open, #3baa6b); }
.ph-svc-hours__dot.is-closed { background: #ea8c00; }
.ph-svc-hours__label {
	font-weight: var(--ph-weight-heading);
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink);
}
.ph-svc-hours__status {
	margin-left: auto;
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
}
.ph-svc-hours__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ph-svc-hours__row {
	display: flex;
	justify-content: space-between;
	padding: 2px 0;
	font-size: var(--ph-text-label);
}
.ph-svc-hours__row.is-closed { color: var(--ph-color-ink-soft); opacity: 0.55; }
.ph-svc-hours__day  { color: var(--ph-color-ink-soft); }
.ph-svc-hours__time { color: var(--ph-color-ink); font-weight: 500; }

/* ── Settings tab: buttons and version display ───────────────────────────── */
.ph-settings-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ph-space-2);
	margin-bottom: var(--ph-space-2);
}
.ph-settings-versions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ph-space-2);
	font-size: 11px;
	color: var(--ph-color-ink-soft);
	opacity: 0.6;
}

/* ── Other locations (chain siblings) ─────────────────────────────────────── */

.ph-other-locations__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ph-other-locations__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--ph-radius-sm);
  background: var(--ph-surface-raised, #f9fafb);
  text-decoration: none;
  transition: background 0.15s;
}

.ph-other-locations__link:hover {
  background: var(--ph-primary-light, #eef2ff);
}

.ph-other-locations__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ph-ink);
}

.ph-other-locations__area {
  font-size: 0.75rem;
  color: var(--ph-ink-soft);
  white-space: nowrap;
  background: var(--ph-line, #e5e7eb);
  padding: 2px 8px;
  border-radius: 999px;
}

/* --- Per-tab two-column layout --- */
.ph-tab-twocol { display: grid; gap: var(--ph-space-5); align-items: start; }
.ph-tab-split-50-50 { grid-template-columns: 50fr 50fr; }
.ph-tab-split-60-40 { grid-template-columns: 60fr 40fr; }
.ph-tab-split-70-30 { grid-template-columns: 70fr 30fr; }
.ph-tab-split-40-60 { grid-template-columns: 40fr 60fr; }
.ph-tab-split-30-70 { grid-template-columns: 30fr 70fr; }
.ph-tab-col { min-width: 0; }
@media (max-width: 781px) {
	.ph-tab-twocol { display: block; }
	.ph-tab-col--side { margin-top: var(--ph-space-5); }
}

/* --- Go-to Orders (menu highlights) --- */
.ph-highlights__list { display: flex; flex-direction: column; gap: var(--ph-space-2); }
.ph-highlight { border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); padding: 12px 14px; background: #fff; }
.ph-highlight__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ph-highlight__name { font-size: var(--ph-text-body); color: var(--ph-color-ink); }
.ph-highlight__price { color: var(--ph-color-primary); font-weight: 700; white-space: nowrap; }
.ph-highlight__note { margin: 4px 0 0; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); }
.ph-highlights--row .ph-highlights__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* --- Trail listing type --- */
.ph-trail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 4px; }
.ph-trail-stat { background: #fff; border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); padding: 12px 10px; text-align: center; }
.ph-trail-stat__n { display: block; font-size: 18px; font-weight: 800; color: var(--ph-color-ink); }
.ph-trail-stat__l { display: block; font-size: 10px; color: var(--ph-color-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
@media (max-width: 600px) { .ph-trail-stats { grid-template-columns: repeat(2, 1fr); } }

.ph-trail-cards { display: flex; flex-direction: column; gap: var(--ph-space-4); margin-bottom: var(--ph-space-4); }
.ph-trail-rows { display: flex; flex-direction: column; }
.ph-trail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ph-color-line); font-size: var(--ph-text-small); gap: 12px; }
.ph-trail-row:last-child { border-bottom: none; }
.ph-trail-row__k { color: var(--ph-color-ink-soft); }
.ph-trail-row__v { font-weight: 600; text-align: right; color: var(--ph-color-ink); }
.ph-trail-note { margin: 10px 0 0; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); font-style: italic; }

.ph-trail-routes { display: flex; flex-direction: column; gap: 10px; }
.ph-trail-route { border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); padding: 12px 14px; background: #fff; }
.ph-trail-route__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ph-trail-route__name { font-weight: 700; color: var(--ph-color-ink); }
.ph-trail-route__link { font-size: var(--ph-text-small); color: var(--ph-color-primary); text-decoration: none; white-space: nowrap; font-weight: 600; }
.ph-trail-route__meta { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); margin-top: 4px; }
.ph-trail-route__notes { font-size: var(--ph-text-small); color: var(--ph-color-ink); margin-top: 4px; }

.ph-trail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-trail-tag { font-size: 12px; background: var(--ph-color-bg); border: 1px solid var(--ph-color-line); padding: 4px 10px; border-radius: 12px; color: var(--ph-color-ink-soft); }

.ph-trail-card--route { padding: 0; }
.ph-trail-routelink { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--ph-color-primary-light, #fdeaf1); border-radius: var(--ph-radius-sm); text-decoration: none; }
.ph-trail-routelink__t { font-size: var(--ph-text-body); font-weight: 700; color: var(--ph-color-primary); }
.ph-trail-routelink__s { font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); }

/* --- Review flag button --- */
.ph-review__flag { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--ph-color-ink-soft); display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; margin-top: 4px; }
.ph-review__flag .dashicons { font-size: 14px; width: 14px; height: 14px; }
.ph-review__flag:hover { color: var(--ph-color-primary); }
.ph-review__flag.is-flagged { color: var(--ph-color-ink-soft); cursor: default; }

/* --- Listing offers banner --- */
.ph-lh-offers { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.ph-lh-offers__item {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: var(--ph-color-primary-light, #fdeef4); border: 1px solid var(--ph-color-primary, #e8568a);
	border-radius: var(--ph-radius-sm, 8px); padding: 10px 14px;
}
.ph-lh-offers__tag {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: #fff; background: var(--ph-color-primary, #e8568a); padding: 2px 8px; border-radius: 999px;
}
.ph-lh-offers__text { font-size: 14px; font-weight: 600; color: var(--ph-color-ink, #1f2430); }
.ph-lh-offers__code { font-family: monospace; font-size: 13px; background: #fff; border: 1px dashed var(--ph-color-primary, #e8568a); padding: 2px 8px; border-radius: 4px; }
.ph-lh-offers__expiry { font-size: 12px; color: var(--ph-color-ink-soft, #6b7280); margin-left: auto; }

/* --- Offers page --- */
.ph-offers { padding: 24px 0 64px; }
.ph-offers__head { margin-bottom: 24px; }
.ph-offers__title { font-size: 28px; font-weight: 800; margin: 0 0 6px; color: var(--ph-color-ink, #1f2430); }
.ph-offers__sub { font-size: 15px; color: var(--ph-color-ink-soft, #6b7280); margin: 0; }
.ph-offers__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ph-offers__card {
	display: flex; flex-direction: column; justify-content: space-between;
	background: #fff; border: 1px solid var(--ph-color-line, #e6e7eb); border-radius: var(--ph-radius, 12px);
	padding: 18px; box-shadow: var(--ph-shadow, 0 1px 3px rgba(0,0,0,0.06));
}
.ph-offers__offer { font-size: 17px; font-weight: 700; color: var(--ph-color-ink, #1f2430); margin: 0 0 8px; }
.ph-offers__venue { font-size: 14px; font-weight: 600; color: var(--ph-color-primary, #e8568a); text-decoration: none; }
.ph-offers__venue:hover { text-decoration: underline; }
.ph-offers__code { font-size: 13px; color: var(--ph-color-ink-soft, #6b7280); margin: 10px 0 0; }
.ph-offers__code code { font-family: monospace; background: var(--ph-color-bg, #f7f7f9); padding: 2px 8px; border-radius: 4px; }
.ph-offers__terms { font-size: 12px; color: var(--ph-color-ink-soft, #6b7280); margin: 8px 0 0; }
.ph-offers__expiry { font-size: 12px; color: var(--ph-color-ink-soft, #6b7280); margin: 14px 0 0; font-weight: 600; }
.ph-offers__empty { text-align: center; padding: 48px 16px; color: var(--ph-color-ink-soft, #6b7280); }
.ph-offers__empty p { margin: 0 0 16px; }

/* "Prices are accurate as of..." note on Menu, Offers, and Set Menus and
   Experiences sections. Small and muted, does not compete with the prices
   themselves. */
.ph-priced-note { font-size: 12px; color: var(--ph-color-ink-soft, #5a5f73); margin: -6px 0 14px; }

/* ── Trail stats and Trail Info layout ────────────────────────
   Scraped route data arrives as prose, so a tile shows the headline figure
   large with the qualifiers underneath in small type rather than wrapping one
   sentence across five lines. */
.ph-trail-stat { display: flex; flex-direction: column; justify-content: flex-start; min-height: 78px; }
.ph-trail-stat__n { line-height: 1.2; }
.ph-trail-stat__note {
	display: block; margin-top: 6px; font-size: 11px; line-height: 1.4;
	color: var(--ph-color-ink-soft);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Two columns on Trail Info, matching the approved mockup. The cards flow in
   source order down the two tracks, so the panel reads as a field document
   rather than one long stack. */
.ph-trail-cols {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--ph-space-4); align-items: start;
}
.ph-trail-cols > .ph-trail-card { margin: 0; }
/* The routes card carries the most content, so it spans both tracks. */
.ph-trail-cols > .ph-trail-card--routes { grid-column: 1 / -1; }
@media (max-width: 860px) { .ph-trail-cols { grid-template-columns: 1fr; } }

/* Full route: the detail lives on our page, the link is the extra. */
.ph-trail-route__steps { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ph-color-ink); }
.ph-trail-route__steps li { margin-bottom: 6px; }
.ph-trail-route__meta { font-size: 12px; color: var(--ph-color-ink-soft); margin-top: 2px; }

/* Trail facts on a listing card. */
.ph-scard__trailfacts {
	display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.ph-scard__trailfact {
	font-size: 11.5px; font-weight: 700; color: var(--ph-color-ink-soft);
	background: var(--ph-color-surface); border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill); padding: 3px 10px;
}

/* Difficulty reads at a glance: green for easy, amber for moderate, red for
   hard. Distance and duration keep the neutral pill. */
.ph-scard__trailfact--easy { background: #eaf7ef; border-color: #b8e2c8; color: #1f7a4d; }
.ph-scard__trailfact--moderate { background: #fef5e6; border-color: #f3d9a4; color: #a86a10; }
.ph-scard__trailfact--hard { background: #fdeaea; border-color: #f2c0c2; color: #b02a30; }

/* Why go: the bullets that lead a walk's page. */
.ph-trail-why__list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.75; color: var(--ph-color-ink); }
.ph-trail-why__list li { margin-bottom: 8px; }

/* Trail cards in the sidebar, matching the mockup. */
.ph-trail-side .ph-trail-rows { display: flex; flex-direction: column; }
.ph-trail-side .ph-trail-row {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 9px 0; border-bottom: 1px solid var(--ph-color-line); font-size: 13px;
}
.ph-trail-side .ph-trail-row:last-child { border-bottom: 0; }
.ph-trail-side .ph-trail-row__k { color: var(--ph-color-ink-soft); flex-shrink: 0; }
.ph-trail-side .ph-trail-row__v { font-weight: 700; text-align: right; }
.ph-trail-tags--who { margin-top: 12px; }

/* The route link box: pink, so it reads as the one outbound action. */
.ph-trail-routelink {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--ph-color-primary-soft, #fce8ef); border-radius: var(--ph-radius-md);
	padding: 14px 16px; text-decoration: none;
}
.ph-trail-routelink:hover { background: #fbdbe7; }
.ph-trail-routelink__t { display: block; font-weight: 800; font-size: 13.5px; color: var(--ph-color-primary); }
.ph-trail-routelink__s { display: block; font-size: 12px; color: var(--ph-color-ink-soft); margin-top: 2px; }
.ph-trail-routelink__arrow { color: var(--ph-color-primary); font-size: 16px; flex-shrink: 0; }

/* Breathing room around the trail stat strip. The gap below it was half the
   gap above, so the bio card looked stuck to the tiles. Matched top and
   bottom so the strip sits evenly between the tabs and the bio. */
.ph-trail-stats { margin: var(--ph-space-5) 0 var(--ph-space-5); }
.ph-trail-stats + .ph-panel { margin-top: 0; }

/* Menu and package prices always carry their symbol. */
.ph-setmenu-card__price,
.ph-highlight__price { white-space: nowrap; }

/* ── Trail route map and elevation ──────────────────────────── */
.ph-map--route { height: 300px; border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-route-pin { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.ph-route-pin--start { background: var(--ph-color-open, #1f9d61); }
.ph-route-pin--end { background: var(--ph-color-primary); }
.ph-elev { margin-top: 10px; }
.ph-elev svg { width: 100%; height: 110px; display: block; }
.ph-elev__scale {
	display: flex; justify-content: space-between;
	font-size: 11px; color: var(--ph-color-ink-soft); margin-top: 2px;
}
.ph-map__note { font-size: 12px; color: var(--ph-color-ink-soft); margin: 8px 0 0; }
.phe-gpx__status { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.phe-gpx__err { font-size: 12.5px; margin: 6px 0 0; }

/* Route legend: colour is never the only cue, the name is always there. */
.ph-routekeys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ph-routekey {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1.5px solid var(--ph-color-line); background: #fff;
	border-radius: var(--ph-radius-pill); padding: 5px 13px;
	font-size: 12.5px; font-weight: 700; color: var(--ph-color-ink-soft);
	cursor: pointer; font-family: inherit;
}
.ph-routekey:hover { border-color: var(--ph-color-primary); }
.ph-routekey.is-on { color: var(--ph-color-ink); border-color: var(--ph-color-ink-soft); }
.ph-routekey:not(.is-on) { opacity: 0.5; }
.ph-routekey__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* TikTok blockquote: the official embed sizes itself, so the item must not
   force an aspect ratio onto it or the player is clipped. */
.ph-videos__item[data-tiktok="1"] { aspect-ratio: auto; height: auto; }
.ph-videos__tiktok { display: flex; justify-content: center; }
.ph-videos__tiktok blockquote.tiktok-embed { margin: 0 auto; }


/* Same cascade trap as the claim form: any element this stylesheet gives a
   display value to must restate [hidden], or the browser default loses and
   the element never hides. */
.ph-lh__panel[hidden] { display: none; }
.ph-routekeys[hidden] { display: none; }

/* ── Always-visible tail: related listings and featured-in plans ──
   On a phone the tabs are the whole page, so anything inside Home cannot be
   reached from another tab. These two are worth reaching from anywhere, so
   they sit outside the panels and stay put.

   On desktop there is a sidebar and far more room, and repeating them under
   every tab would be noise, so they are kept to Home as before. */
.ph-lh__always { display: block; }
@media (min-width: 901px) {
	.ph-lh__always:not([data-active-tab="ph-home"]) { display: none; }
}

/* Read-all-reviews link under the single review shown on Home. */
.ph-reviews__more {
	display: inline-block; margin-top: var(--ph-space-3);
	font-size: 13.5px; font-weight: 700; color: var(--ph-color-primary);
	text-decoration: none;
}
.ph-reviews__more:hover { text-decoration: underline; }