/*
 * 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--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;
	min-height: 100dvh;
}

.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: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ph-space-2);
}
.ph-videos--full {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ph-space-3);
}
.ph-videos__item {
	position: relative; cursor: pointer; border-radius: var(--ph-radius-sm);
	overflow: hidden; background: #000;
	width: 100%;
}
/* 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: var(--ph-space-3) var(--ph-space-4);
	color: #fff;
	font-size: var(--ph-text-label);
}

.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: 50%;
	transform: translateY(-50%);
	font-size: 3.5rem;
	font-weight: 200;
	color: var(--ph-color-line);
	line-height: 1;
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
}
.ph-price-range__label { color: var(--ph-color-ink-soft); margin: 0 0 var(--ph-space-2); font-size: var(--ph-text-small); }
.ph-price-range { display: flex; align-items: center; gap: var(--ph-space-3); margin: 0; }
.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; }

/* ---- 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: var(--ph-space-3) 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;
}
.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-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: 4 per line on desktop on both Home tab (.ph-videos)
	   and Gallery tab (.ph-videos--full). Matches photo grid so the
	   two media sections feel paired. */
	.ph-videos { grid-template-columns: repeat(4, 1fr); }
	.ph-videos--full { grid-template-columns: repeat(4, 1fr); }
	.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; }
}