.ptiles-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.ptiles {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;

	/* Taps are input, not reading: no double-tap zoom delay, no long-press
	   save-image callout, no accidental image drag or selection. */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;

	/* Set by the script from the rendered width so effect lengths authored
	   against the full-size image keep their proportion at any scale. */
	--pt-unit: 1px;
	--pt-hint-color: rgba(255, 255, 255, 0.85);
}

.ptiles__bg {
	display: block;
	width: 100%;
	height: auto;
}

.ptiles__bg,
.ptiles__overlay img {
	-webkit-user-drag: none;
}

/* Between the background image and the overlays: fades in while a hotspot is
   pinned or selected, so the chosen artwork reads as lifted out of the scene. */
.ptiles__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--pt-dim-color, rgba(16, 16, 20, 0.35));
	-webkit-backdrop-filter: blur(var(--pt-dim-blur, 0px));
	backdrop-filter: blur(var(--pt-dim-blur, 0px));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ptiles.is-dimmed .ptiles__scrim {
	opacity: 1;
}

.ptiles__areas,
.ptiles__overlays {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ptiles__areas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptiles__item {
	margin: 0;
	padding: 0;
}

/* Themes that decorate list items with a generated bullet would otherwise drop
   one into the artwork. */
.ptiles__item::before,
.ptiles__item::after {
	content: none;
}

/* Names and descriptions are real text: available to assistive technology and
   to find-in-page, but out of the visual design. */
.ptiles__label,
.ptiles__description {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ptiles__overlay {
	position: absolute;
	opacity: var(--pt-opacity-idle, 0);
	transform: var(--pt-transform-idle, none);
	filter: var(--pt-filter-idle, none);
	transform-origin: var(--pt-origin, center center);
	transition: var(--pt-transition, opacity 0.25s ease-out);
	will-change: opacity, transform, filter;
}

.ptiles__overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--pt-fit, fill);
}

.ptiles__overlay.is-active {
	opacity: var(--pt-opacity-active, 1);
	transform: var(--pt-transform-active, none);
	filter: var(--pt-filter-active, none);
}

.ptiles__area {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	appearance: none;
	color: inherit;
	font: inherit;

	/* Every pointer test is done in script against the real shape, so the
	   bounding box itself must never swallow events. */
	pointer-events: none;
}

/* Two rings in opposing tones, so the focused region reads against artwork of
   any brightness. A single-tone ring disappears on a photograph. */
.ptiles__area:focus-visible {
	outline: 3px solid var(--pt-focus-dark, #101014);
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--pt-focus-light, #ffffff);
	border-radius: 2px;
}

.ptiles--hint-always .ptiles__area,
.ptiles--hint-hover:hover .ptiles__area,
.ptiles--editing .ptiles__area {
	outline: 1px dashed var(--pt-hint-color);
	outline-offset: 0;
}

.ptiles--hint-always .ptiles__area:focus-visible,
.ptiles--hint-hover:hover .ptiles__area:focus-visible,
.ptiles--editing .ptiles__area:focus-visible {
	outline: 3px solid var(--pt-focus-dark, #101014);
}

@media (forced-colors: active) {
	.ptiles__area:focus-visible {
		outline: 3px solid CanvasText;
		box-shadow: 0 0 0 6px Canvas;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ptiles__overlay,
	.ptiles__scrim {
		transition-duration: 1ms;
	}
}

/* --------------------------------------------------------- Detail display */

.ptiles-wrap--panel {
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

.ptiles-wrap--panel .ptiles {
	flex: 1 1 0;
	min-width: 0;
}

.ptiles-wrap--panel-left {
	flex-direction: row-reverse;
}

/* The detail region is a <dialog> in one of three states: docked beside the
   image (open attribute, restyled into normal flow), modal (driven by
   showModal(), so the UA keeps it fixed and centred in the top layer), or
   stacked under the image on browsers without dialog support. */
.ptiles-detail {
	box-sizing: border-box;
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	color: inherit;
}

.ptiles-detail--docked {
	display: block;
	position: static;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	flex: 0 0 var(--pt-panel-width, 40%);
	min-width: 0;
}

.ptiles-detail--stacked {
	display: block;
	position: static;
	width: 100%;
	height: auto;
	max-width: none;
	flex: 1 1 100%;
}

.ptiles-detail--modal {
	margin: auto;
	width: 92vw;
	max-width: 480px;
	max-height: 85vh;
	overflow: auto;
	padding: 36px 28px 32px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 24px 80px rgba(16, 16, 20, 0.35);
}

.ptiles-detail--modal::backdrop {
	background: rgba(16, 16, 20, 0.55);
}

/* The pop-up's controls are plain <button>s inside a top-layer dialog, where
   the page theme's button styling (backgrounds, radii, min-heights, :focus
   fills — often behind ID selectors this stylesheet cannot out-rank) still
   reaches. Every contested property is declared !important: these are leaf
   controls whose look is a terminal decision, not a theme extension point. */
.ptiles-detail__close {
	display: none;
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	appearance: none !important;
	margin: 0 !important;
	border: 0 !important;
	padding: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: none !important;
	color: inherit !important;
	line-height: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
}

/* In the pop-up the close and nav controls overlap the artwork, so they carry
   their own surface — a small light chip — and stay legible over any
   photograph or card alike. */
.ptiles-detail--modal .ptiles-detail__close,
.ptiles-detail--modal .ptiles-detail__nav {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid rgba(16, 16, 20, 0.12) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 1px 4px rgba(16, 16, 20, 0.25) !important;
}

/* The dialog focuses the close button the moment it opens, and pointer taps
   focus whichever control was pressed — neither may repaint the chip. The
   ring stays reserved for keyboard focus, restated below at equal importance
   so source order restores it. */
.ptiles-detail__close:focus,
.ptiles-detail__nav:focus {
	outline: none !important;
}

.ptiles-detail__close:focus-visible,
.ptiles-detail__nav:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* Previous / next live only in the pop-up; docked mode has the grid itself. */
.ptiles-detail__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	appearance: none !important;
	margin: 0 !important;
	border: 0 !important;
	padding: 10px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: none !important;
	color: inherit !important;
	line-height: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	touch-action: manipulation;
}

.ptiles-detail__nav--prev {
	left: 8px;
}

.ptiles-detail__nav--next {
	right: 8px;
}

.ptiles-detail__panel[hidden] {
	display: none;
}

.ptiles-detail__panel {
	animation: ptiles-panel-in 0.3s ease;
}

@keyframes ptiles-panel-in {
	from {
		opacity: 0;
	}
}

.ptiles-detail__media {
	margin: 0 0 24px;
}

.ptiles-detail__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Match mode: the docked card ends level with the picture beside it.

   The image column keeps its natural height — stretching it would stretch the
   hotspot layers with it and slide every region off the photograph — so only
   the card stretches. Inside it, the picture is the elastic part: a flex-basis
   of zero keeps it out of the panel's intrinsic height, so the panel never
   asks for more room than its text needs and the picture takes whatever is
   left. Longer copy therefore eats into the picture rather than pushing the
   card past the photograph, and only text taller than the whole photograph
   grows the row. */
.ptiles-wrap--match .ptiles {
	align-self: flex-start;
}

.ptiles-wrap--match .ptiles-detail--docked {
	display: flex;
	flex-direction: column;
}

.ptiles-wrap--match .ptiles-detail--docked .ptiles-detail__panel:not([hidden]) {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}

.ptiles-wrap--match .ptiles-detail--docked .ptiles-detail__media {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.ptiles-wrap--match .ptiles-detail--docked .ptiles-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ptiles-detail__subtitle {
	margin: 0 0 8px;
	font-size: 0.8em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ptiles-detail__title {
	margin: 0 0 12px;
}

.ptiles-detail__description p {
	margin: 0 0 0.6em;
}

.ptiles-detail__description p:last-child {
	margin-bottom: 0;
}

.ptiles-detail__cta {
	display: inline-block;
	margin-top: 16px;
	padding: 0.7em 1.6em;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
}

/* The panel's controls sit on the card surface, not the artwork — the
   two-tone ring built for photographs blows out here, so they get a plain
   offset ring in their own colour instead. */
.ptiles-detail__close:focus-visible,
.ptiles-detail__nav:focus-visible,
.ptiles-detail__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	box-shadow: none;
}

/* Four squares standing in for the panel the visitor has yet to fill. Drawn
   rather than shipped as an image so it takes the panel's own trim colour. */
.ptiles-detail__prompt-icon {
	display: block;
	width: var(--pt-prompt-icon-size, 64px);
	height: var(--pt-prompt-icon-size, 64px);
	margin: 0 auto 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

/* The invitation the docked placeholder extends on wide screens, restated
   beneath the image while the details open as a pop-up instead. The script
   raises the wrap flag; without it the bar stays out of the layout — and out
   of the accessibility tree, where the docked placeholder already speaks. */
.ptiles-prompt {
	display: none;
}

.ptiles-wrap--popup .ptiles-prompt {
	display: block;
	flex: 1 1 100%;
	box-sizing: border-box;
	text-align: center;
}

.ptiles-prompt__icon {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 10px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

.ptiles-prompt__title {
	margin: 0;
}

.ptiles-prompt__text {
	margin: 6px 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.ptiles-detail__panel {
		animation: none;
	}
}

/* ------------------------------------------------------- WPBakery additions */

/* The Elementor original set the cursor through a widget-control selector;
   here it arrives as an inline custom property on the root. */
.ptiles.is-hot {
	cursor: var(--pt-cursor, pointer);
}

/* --------------------------------------------------------- Palermo skin

   Ported from the tiles-site demo so the page reads the same: serif ink
   title over a gold eyebrow and hairline divider, white card on a soft rule,
   square dark button that inverts on hover. Scoped entirely to .ptiles-*
   classes, and this stylesheet only loads on pages that render the element,
   so no other page is touched. */

.ptiles-wrap--panel .ptiles {
	border: 1px solid #e7ded0;
}

.ptiles-detail.ptiles-detail {
	background-color: #ffffff;
	color: #23232b;
}

.ptiles-detail--docked.ptiles-detail--docked,
.ptiles-detail--stacked.ptiles-detail--stacked {
	border: 1px solid #e7ded0;
	box-shadow: 0 1px 3px rgba(35, 35, 43, 0.04);
	padding: clamp(24px, 3vw, 44px);
}

.ptiles-detail--modal.ptiles-detail--modal {
	border: 1px solid #e7ded0;
	border-radius: 0;
	box-shadow: 0 24px 80px rgba(20, 20, 15, 0.4);
}

.ptiles-detail.ptiles-detail::backdrop {
	background: rgba(20, 20, 15, 0.6);
}

.ptiles-detail .ptiles-detail__subtitle {
	margin: 0 0 10px;
	font-family: var(--wca-font-body, "Montserrat", sans-serif);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #b8963f;
}

.ptiles-detail .ptiles-detail__title {
	margin: 0;
	font-family: var(--wca-font-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #23232b;
}

.ptiles-detail .ptiles-detail__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin: 18px auto 20px;
	background-color: #b8963f;
}

.ptiles-detail .ptiles-detail__description {
	font-family: var(--wca-font-body, "Montserrat", sans-serif);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.8;
	color: #5f5f66;
}

.ptiles-detail .ptiles-detail__cta {
	margin-top: 24px;
	padding: 16px 30px;
	border: 1px solid #16161a;
	border-radius: 0;
	background-color: #16161a;
	color: #fff;
	font-family: var(--wca-font-body, "Montserrat", sans-serif);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

@media (hover: hover) {

	.ptiles-detail .ptiles-detail__cta:hover {
		background-color: transparent;
		color: #16161a;
	}

	.ptiles-detail .ptiles-detail__close:hover,
	.ptiles-detail .ptiles-detail__nav:hover {
		color: #b8963f !important;
	}
}

.ptiles-detail .ptiles-detail__cta:focus-visible {
	background-color: transparent;
	color: #16161a;
	outline: 2px solid #b8963f;
	outline-offset: 2px;
	box-shadow: none;
}

.ptiles-detail .ptiles-detail__close,
.ptiles-detail .ptiles-detail__nav {
	color: #23232b !important;
}

/* Default text alignment for the panel — the Elementor original got this from
   a style control; centred matches the demo. */
.ptiles-detail {
	text-align: center;
}

.ptiles-detail .ptiles-detail__close:focus-visible,
.ptiles-detail .ptiles-detail__nav:focus-visible {
	outline: 2px solid #b8963f !important;
	outline-offset: 2px !important;
	box-shadow: none;
}

.ptiles-detail .ptiles-detail__prompt-icon {
	color: #b8963f;
}

.ptiles-wrap--popup .ptiles-prompt {
	border: 1px solid #e7ded0;
	background-color: #ffffff;
	box-shadow: 0 1px 3px rgba(35, 35, 43, 0.04);
	padding: 18px 20px 20px;
}

.ptiles-prompt .ptiles-prompt__icon {
	color: #b8963f;
}

.ptiles-prompt .ptiles-prompt__title {
	font-family: var(--wca-font-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #23232b;
}

.ptiles-prompt .ptiles-prompt__text {
	font-family: var(--wca-font-body, "Montserrat", sans-serif);
	font-weight: 300;
	font-size: 13px;
	line-height: 1.7;
	color: #5f5f66;
}