/* ==========================================================================
   Knack Digital Gallery
   Room renderer, archive cards, artwork frames, modal, responsive, dark mode
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARCHIVE PAGE
   -------------------------------------------------------------------------- */

.knack-gallery-archive-header {
	text-align: center;
	padding: var(--knack-space-2xl) 0 var(--knack-space-lg);
}

.knack-gallery-archive-title {
	font-size: var(--knack-font-size-3xl);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--knack-space-sm);
	color: var(--knack-text);
}

.knack-gallery-archive-title [data-lucide] {
	width: 32px;
	height: 32px;
	color: var(--knack-accent);
}

.knack-gallery-archive-desc {
	color: var(--knack-text-secondary);
	font-size: var(--knack-font-size-lg);
	margin-top: var(--knack-space-sm);
}

.knack-gallery-search {
	max-width: 480px;
	margin: 0 auto var(--knack-space-xl);
}

/* Gallery grid */
.knack-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--knack-space-lg);
	padding-bottom: var(--knack-space-2xl);
}

/* --------------------------------------------------------------------------
   2. GALLERY CARD (Archive + Homepage)
   -------------------------------------------------------------------------- */

.knack-gallery-card {
	border-radius: var(--knack-radius-xl);
	overflow: hidden;
	background: var(--knack-surface);
	box-shadow: var(--knack-shadow-card);
	transition: box-shadow var(--knack-transition), transform var(--knack-transition);
}

.knack-gallery-card:hover {
	box-shadow: var(--knack-shadow-card-hover);
	transform: translateY(-2px);
}

.knack-gallery-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.knack-gallery-card__inner {
	position: relative;
	height: 260px;
	overflow: hidden;
}

.knack-gallery-card__room-preview {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: relative;
}

.knack-gallery-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 30%,
		rgba(0, 0, 0, 0.5) 100%
	);
	pointer-events: none;
}

/* Mini artwork frames inside the card */
.knack-gallery-card__mini-artworks {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--knack-space-md);
	padding: var(--knack-space-lg);
	z-index: 1;
}

.knack-gallery-card__mini-frame {
	width: 72px;
	height: 72px;
	border: 3px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	border-radius: var(--knack-radius-sm);
	overflow: hidden;
	transition: transform 0.4s ease;
}

.knack-gallery-card:hover .knack-gallery-card__mini-frame {
	transform: translateY(-3px);
}

.knack-gallery-card__mini-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Layout badge */
.knack-gallery-card__layout-badge {
	position: absolute;
	top: var(--knack-space-sm);
	right: var(--knack-space-sm);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: var(--knack-font-size-xs);
	padding: 4px 10px;
	border-radius: var(--knack-radius-pill);
	display: flex;
	align-items: center;
	gap: 4px;
	z-index: 2;
	backdrop-filter: blur(4px);
}

.knack-gallery-card__layout-badge [data-lucide] {
	width: 12px;
	height: 12px;
}

/* "Just opened" freshness pill — sits beside the room-type badge. */
.knack-gallery-card__new-badge {
	position: absolute;
	top: var(--knack-space-sm);
	left: var(--knack-space-sm);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--knack-radius-pill);
	background: var(--knack-accent, #60335e);
	color: #fff;
	font-size: var(--knack-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Card info area */
.knack-gallery-card__info {
	padding: var(--knack-space-md);
}

.knack-gallery-card__title {
	font-size: var(--knack-font-size-base);
	font-weight: 600;
	color: var(--knack-text);
	margin: 0 0 var(--knack-space-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-gallery-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--knack-font-size-xs);
	color: var(--knack-text-secondary);
}

.knack-gallery-card__artist {
	display: flex;
	align-items: center;
	gap: var(--knack-space-xs);
}

.knack-gallery-card__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--knack-bg-alt, #f3f4f6);
}

.knack-gallery-card__count {
	display: flex;
	align-items: center;
	gap: 3px;
}

.knack-gallery-card__count [data-lucide] {
	width: 12px;
	height: 12px;
}

/* CTA */
.knack-gallery-card__cta {
	padding: 0 var(--knack-space-md) var(--knack-space-md);
}

.knack-gallery-card__enter {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--knack-font-size-sm);
	font-weight: 600;
	color: var(--knack-accent);
	transition: gap var(--knack-transition);
}

.knack-gallery-card:hover .knack-gallery-card__enter {
	gap: 8px;
}

.knack-gallery-card__enter [data-lucide] {
	width: 14px;
	height: 14px;
	transition: transform var(--knack-transition);
}

.knack-gallery-card:hover .knack-gallery-card__enter [data-lucide] {
	transform: translateX(2px);
}

/* Empty state */
.knack-gallery-empty {
	text-align: center;
	padding: var(--knack-section-gap) var(--knack-space-lg);
	color: var(--knack-text-muted);
}

.knack-gallery-empty__icon [data-lucide] {
	width: 64px;
	height: 64px;
	margin-bottom: var(--knack-space-md);
	opacity: 0.4;
}

.knack-gallery-empty h2 {
	color: var(--knack-text-secondary);
}

/* --------------------------------------------------------------------------
   3. SINGLE GALLERY — 3D ROOM
   -------------------------------------------------------------------------- */

.knack-main--gallery-single {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100dvh;
	background: #1a1a1a;
}

/* Immersive mode — hides site chrome when gallery is entered */
body.knack-gallery-immersive .knack-header,
body.knack-gallery-immersive .knack-side-panel,
body.knack-gallery-immersive .knack-category-bar,
body.knack-gallery-immersive .knack-discovery-nav,
body.knack-gallery-immersive #wpadminbar,
body.knack-gallery-immersive .knack-footer,
body.knack-gallery-immersive .knack-music-player {
	display: none !important;
}

body.knack-gallery-immersive .knack-main--gallery-single {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.knack-gallery-immersive {
	overflow: hidden;
	padding-top: 0 !important; /* Remove WP admin bar spacing */
}

/* --- Scene (Three.js WebGL Canvas) --- */

.knack-gallery-scene {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: relative;
	overflow: hidden;
}

#knack-gallery-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Enter gallery prompt */
.knack-gallery-enter-prompt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
}

.knack-gallery-enter-prompt__inner {
	text-align: center;
	pointer-events: auto;
}

.knack-gallery-enter-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 60px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(12px);
	transition: background 0.2s, transform 0.2s;
}

.knack-gallery-enter-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.03);
}

.knack-gallery-enter-btn [data-lucide] {
	width: 20px;
	height: 20px;
}

.knack-gallery-enter-hint {
	margin-top: 16px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.3px;
}

.knack-gallery-enter-hint__bg {
	display: inline-block;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(10px);
	padding: 8px 18px;
	border-radius: 8px;
	line-height: 1.5;
}

/* Crosshair when pointer-locked */
.knack-gallery-crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. ARTWORK FRAMES ON WALLS
   -------------------------------------------------------------------------- */

.knack-artwork-frame {
	position: absolute;
	transform: translateZ(2px);
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	backface-visibility: hidden;
}

.knack-artwork-frame:hover {
	transform: translateZ(14px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	z-index: 10;
}

.knack-artwork-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1px;
	backface-visibility: hidden;
}

/* Frame styles */
.knack-artwork-frame--classic {
	border: 10px solid #3a2920;
	box-shadow:
		inset 0 0 0 2px #5a4030,
		0 4px 12px rgba(0, 0, 0, 0.25);
}

.knack-artwork-frame--modern {
	border: 3px solid #222;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.knack-artwork-frame--floating {
	border: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.knack-artwork-frame--none {
	border: none;
	box-shadow: none;
}

/* Artwork plaque / title label */
.knack-artwork-plaque {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%) translateZ(2px);
	backface-visibility: hidden;
	background: rgba(255, 255, 255, 0.92);
	color: #333;
	padding: 4px 14px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--knack-radius-sm);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.knack-artwork-frame:hover .knack-artwork-plaque {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   5. GALLERY CONTROLS
   -------------------------------------------------------------------------- */

.knack-gallery-controls {
	position: fixed;
	bottom: var(--knack-space-xl);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	z-index: calc(var(--knack-z-overlay) + 10);
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(12px);
	padding: var(--knack-space-sm) var(--knack-space-md);
	border-radius: var(--knack-radius-pill);
}

.knack-gallery-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--knack-transition);
}

.knack-gallery-nav:hover {
	background: rgba(255, 255, 255, 0.2);
}

.knack-gallery-nav [data-lucide] {
	width: 18px;
	height: 18px;
}

.knack-gallery-wall-indicator {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.knack-gallery-wall-btn {
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--knack-font-size-xs);
	font-weight: 500;
	line-height: 1;
	padding: 8px 10px;
	border-radius: var(--knack-radius-pill);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: all var(--knack-transition);
}

.knack-gallery-wall-btn:hover {
	color: rgba(255, 255, 255, 0.8);
}

.knack-gallery-wall-btn--active {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* --- Gallery info overlay --- */

.knack-gallery-info {
	position: fixed;
	top: calc(var(--knack-header-height) + var(--knack-admin-bar-offset, 0px) + var(--knack-space-md));
	left: var(--knack-space-lg);
	z-index: calc(var(--knack-z-overlay) + 5);
	display: flex;
	align-items: flex-start;
	gap: var(--knack-space-sm);
}

.knack-gallery-info__inner {
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(12px);
	padding: var(--knack-space-md) var(--knack-space-lg);
	border-radius: var(--knack-radius-lg);
	color: #fff;
	max-width: 360px;
}

.knack-gallery-info__title {
	font-size: var(--knack-font-size-xl);
	font-weight: 700;
	margin: 0 0 var(--knack-space-xs);
	line-height: 1.3;
	color: #fff;
}

.knack-gallery-info__artist {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	font-size: var(--knack-font-size-sm);
	color: rgba(255, 255, 255, 0.75);
}

.knack-gallery-info__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.knack-gallery-info__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background var(--knack-transition);
}

.knack-gallery-info__toggle:hover {
	background: rgba(0, 0, 0, 0.7);
}

.knack-gallery-info__toggle [data-lucide] {
	width: 16px;
	height: 16px;
}

/* --- Back link --- */

.knack-gallery-back {
	position: fixed;
	top: calc(var(--knack-header-height) + var(--knack-admin-bar-offset, 0px) + var(--knack-space-md));
	right: var(--knack-space-lg);
	z-index: calc(var(--knack-z-overlay) + 5);
	display: flex;
	align-items: center;
	gap: var(--knack-space-xs);
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: var(--knack-font-size-sm);
	font-weight: 500;
	padding: var(--knack-space-sm) var(--knack-space-md);
	border-radius: var(--knack-radius-pill);
	text-decoration: none;
	transition: background var(--knack-transition);
}

.knack-gallery-back:hover {
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
}

.knack-gallery-back [data-lucide] {
	width: 16px;
	height: 16px;
}

/* --- Loading state --- */

.knack-gallery-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--knack-space-md);
	background: #1a1a1a;
	z-index: calc(var(--knack-z-overlay) + 20);
	transition: opacity 0.5s ease;
}

.knack-gallery-loading[aria-hidden="true"] {
	opacity: 0;
	pointer-events: none;
}

.knack-gallery-loading__spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--knack-accent);
	border-radius: 50%;
	animation: knack-spin 0.8s linear infinite;
}

.knack-gallery-loading p {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--knack-font-size-sm);
}

@keyframes knack-spin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   6. ARTWORK MODAL
   -------------------------------------------------------------------------- */

.knack-artwork-modal {
	position: fixed;
	inset: 0;
	z-index: var(--knack-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.knack-artwork-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.knack-artwork-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
}

.knack-artwork-modal__content {
	position: relative;
	background: var(--knack-surface);
	border-radius: var(--knack-radius-xl);
	overflow: hidden;
	max-width: 960px;
	width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
	transform: scale(0.95) translateY(10px);
	transition: transform 0.3s ease;
}

.knack-artwork-modal[aria-hidden="false"] .knack-artwork-modal__content {
	transform: scale(1) translateY(0);
}

.knack-artwork-modal__close {
	position: absolute;
	top: var(--knack-space-md);
	right: var(--knack-space-md);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	transition: background var(--knack-transition);
}

.knack-artwork-modal__close:hover {
	background: rgba(0, 0, 0, 0.7);
}

.knack-artwork-modal__close [data-lucide] {
	width: 18px;
	height: 18px;
}

/* Modal nav arrows */
.knack-artwork-modal__prev,
.knack-artwork-modal__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	transition: background var(--knack-transition);
}

.knack-artwork-modal__prev { left: var(--knack-space-md); }
.knack-artwork-modal__next { right: var(--knack-space-md); }

.knack-artwork-modal__prev:hover,
.knack-artwork-modal__next:hover {
	background: rgba(0, 0, 0, 0.7);
}

.knack-artwork-modal__prev [data-lucide],
.knack-artwork-modal__next [data-lucide] {
	width: 20px;
	height: 20px;
}

/* Modal body: image + details side by side */
.knack-artwork-modal__body {
	display: grid;
	grid-template-columns: 1fr 340px;
	min-height: 0;
	flex: 1;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Modal media area — zoomable artwork display.

   Layout: `__media` is the framed letterbox; `__media-stage` is the
   transform-target wrapper that handles cursor / touch input. The image
   itself gets transform: translate(...) scale(...) applied via JS. Controls
   float as an overlay above the stage, intentionally outside the transform
   chain so they stay anchored at constant size when the image zooms.

   Background uses a subtle radial-gradient vignette instead of solid black
   so paintings with dark edges (the previous flat #111) blend in better.
   --------------------------------------------------------------------------- */
.knack-artwork-modal__media {
	position: relative;
	background:
		radial-gradient(120% 120% at 50% 50%, #1c1c1c 0%, #0a0a0a 70%, #050505 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--knack-space-lg);
	min-height: 300px;
	overflow: hidden;
}

.knack-artwork-modal__media-stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none; /* Suppress browser pinch-zoom so we can handle it ourselves. */
}

.knack-artwork-modal__media-stage--zoomed {
	cursor: grab;
}

.knack-artwork-modal__media-stage--panning {
	cursor: grabbing;
}

.knack-artwork-modal__image {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: var(--knack-radius);
	transform-origin: center center;
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
	/* A faint shadow lifts the painting off the letterbox — common gallery
	   presentation trick that makes 2D pieces feel more substantial. */
	box-shadow:
		0 30px 60px -20px rgba(0, 0, 0, 0.5),
		0 18px 36px -18px rgba(0, 0, 0, 0.35);
	-webkit-user-drag: none;
}

/* Mid-drag we kill the transition so the image tracks the cursor 1:1. */
.knack-artwork-modal__media-stage--panning .knack-artwork-modal__image {
	transition: none;
}

/* Floating zoom controls. Always on, but fade in only after the user shows
   intent (hover or zoom > 1) so they don't compete with the artwork at rest. */
.knack-artwork-modal__zoom-controls {
	position: absolute;
	bottom: var(--knack-space-md);
	right: var(--knack-space-md);
	display: flex;
	align-items: center;
	gap: 2px;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 4px;
	border-radius: var(--knack-radius-pill);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
	z-index: 5;
}

.knack-artwork-modal__media:hover .knack-artwork-modal__zoom-controls,
.knack-artwork-modal__media:focus-within .knack-artwork-modal__zoom-controls,
.knack-artwork-modal__media:has(.knack-artwork-modal__media-stage--zoomed) .knack-artwork-modal__zoom-controls {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.knack-artwork-modal__zoom-btn {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	border-radius: 50%;
	padding: 0;
	transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.knack-artwork-modal__zoom-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.knack-artwork-modal__zoom-btn:active:not(:disabled) {
	transform: scale(0.92);
}

.knack-artwork-modal__zoom-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.knack-artwork-modal__zoom-btn [data-lucide] {
	width: 16px;
	height: 16px;
}

/* Hairline divider between the in/out/reset cluster and the "open in new tab"
   action — visually groups the zoom controls (which mutate state) apart from
   the external link (which does not). */
.knack-artwork-modal__zoom-divider {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.18);
	margin: 0 4px;
}

/* The external-link target is an <a>, not a <button>; reset its anchor
   defaults so it visually matches the surrounding round buttons. */
.knack-artwork-modal__zoom-external {
	text-decoration: none;
}

.knack-artwork-modal__zoom-external[hidden] {
	display: none;
}

.knack-artwork-modal__zoom-level {
	font-size: var(--knack-font-size-xs);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	padding: 0 6px;
	min-width: 44px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* "Click to zoom · drag to pan" hint — surfaces on first hover, dismisses
   itself after the user has zoomed at least once (handled in JS). */
.knack-artwork-modal__zoom-hint {
	position: absolute;
	top: var(--knack-space-md);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--knack-font-size-xs);
	padding: 6px 12px;
	border-radius: var(--knack-radius-pill);
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
	white-space: nowrap;
	z-index: 5;
}

.knack-artwork-modal__media:hover .knack-artwork-modal__zoom-hint {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.knack-artwork-modal__media:has(.knack-artwork-modal__media-stage--zoomed) .knack-artwork-modal__zoom-hint {
	opacity: 0;
}

/* Details sidebar */
.knack-artwork-modal__details {
	padding: var(--knack-space-xl) var(--knack-space-lg);
	overflow-y: auto;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE/Edge */
	display: flex;
	flex-direction: column;
	gap: var(--knack-space-md);
	border-left: var(--knack-divider);
}

.knack-artwork-modal__details::-webkit-scrollbar {
	display: none;                  /* Chrome/Safari */
}

.knack-artwork-modal__title {
	font-size: var(--knack-font-size-xl);
	font-weight: 700;
	color: var(--knack-text);
	margin: 0;
	/* Reserve room for the floating close (×) button (36px wide + 12px right inset)
	   so a long, unbroken title (e.g. an upload filename like
	   `1c5db3_958c400a518547ab86…`) wraps before colliding with it instead of
	   running under the button. */
	padding-right: 52px;
	line-height: 1.3;
	/* Allow long words / hashes / URLs to break across lines instead of horizontal-
	   scrolling out of the modal. `overflow-wrap: anywhere` falls back to
	   `word-break: break-word` for older browsers. */
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.knack-artwork-modal__artist-info {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
}

.knack-artwork-modal__artist-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.knack-artwork-modal__artist-name {
	font-size: var(--knack-font-size-sm);
	font-weight: 500;
	color: var(--knack-text-secondary);
}

/* ----------------------------------------------------------------------------
   Artwork details — specs (definition list) + "About this work"

   The sidebar groups artwork metadata into two visual sections:

   1. `.knack-artwork-modal__specs` — gallery-style label/value list
      (Year, Medium, Dimensions, Edition, Tags). Uses a CSS grid so the
      labels align in a neat left column and the values flow on the right.

   2. `.knack-artwork-modal__about` — the artist's notes / story prose,
      preceded by a small section heading.

   Both sections hide their wrapper when empty so we never show a heading
   without content. The legacy `.knack-artwork-modal__meta` class is gone.
   -------------------------------------------------------------------------- */

.knack-artwork-modal__specs,
.knack-artwork-modal__about {
	border-top: var(--knack-divider);
	padding-top: var(--knack-space-md);
	margin-top: 2px;
}

.knack-artwork-modal__section-title {
	font-size: var(--knack-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--knack-text-muted);
	margin: 0 0 var(--knack-space-sm);
}

.knack-artwork-modal__specs-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.knack-artwork-modal__spec {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: var(--knack-space-md);
	align-items: baseline;
	font-size: var(--knack-font-size-sm);
	line-height: 1.4;
}

.knack-artwork-modal__spec dt {
	color: var(--knack-text-muted);
	font-size: var(--knack-font-size-xs);
	font-weight: 500;
	letter-spacing: 0.01em;
	margin: 0;
}

.knack-artwork-modal__spec dd {
	color: var(--knack-text);
	font-weight: 500;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.knack-artwork-modal__spec .knack-artwork-modal__medium {
	display: inline-block;
}

.knack-artwork-modal__about .knack-artwork-modal__story {
	font-size: var(--knack-font-size-sm);
	color: var(--knack-text-secondary);
	line-height: 1.6;
	white-space: pre-wrap; /* Preserve line breaks the artist typed in the description. */
}

.knack-artwork-modal__soundtrack label {
	display: flex;
	align-items: center;
	gap: var(--knack-space-xs);
	font-size: var(--knack-font-size-xs);
	font-weight: 600;
	color: var(--knack-text-secondary);
	margin-bottom: var(--knack-space-xs);
}

.knack-artwork-modal__soundtrack [data-lucide] {
	width: 14px;
	height: 14px;
}

.knack-artwork-modal__soundtrack audio {
	width: 100%;
	height: 36px;
}

/* The edition row is a regular spec row now; the type chip + count sit on the value side. */
.knack-artwork-modal__spec .knack-artwork-modal__edition-type {
	background: var(--knack-accent-light);
	color: var(--knack-accent);
	padding: 2px 10px;
	border-radius: var(--knack-radius-pill);
	font-weight: 600;
	font-size: var(--knack-font-size-xs);
	margin-right: 6px;
	display: inline-block;
}

.knack-artwork-modal__spec .knack-artwork-modal__edition-count {
	color: var(--knack-text-muted);
	font-size: var(--knack-font-size-xs);
}

/* ----------------------------------------------------------------------------
   Artist's signature crop — small image rendered below the artist info.
   Designed to read as a "signed by the artist" certificate-style mark; the
   accompanying caption is intentionally subtle so the signature is the hero.
   --------------------------------------------------------------------------- */
.knack-artwork-modal__signature {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	padding: 8px 12px;
	background: var(--knack-bg-secondary);
	border-radius: var(--knack-radius);
	border: 1px dashed var(--knack-border-soft);
}

.knack-artwork-modal__signature-img {
	max-height: 36px;
	max-width: 140px;
	object-fit: contain;
	mix-blend-mode: multiply; /* Drops the white background of typical PNG signature crops. */
}

.knack-artwork-modal__signature-caption {
	font-size: var(--knack-font-size-xs);
	color: var(--knack-text-muted);
	letter-spacing: 0.02em;
}

body.aoty-dark-mode .knack-artwork-modal__signature {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-artwork-modal__signature-img {
	mix-blend-mode: screen; /* Drops a dark scan against a dark sidebar. */
	filter: invert(1);
}

/* ----------------------------------------------------------------------------
   Certificate of Authenticity badge + download.
   --------------------------------------------------------------------------- */
.knack-artwork-modal__coa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--knack-space-sm);
}

.knack-artwork-modal__coa-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: linear-gradient(135deg, #f5e6d3 0%, #e8d5b7 100%);
	color: #5e3a1a;
	border-radius: var(--knack-radius-pill);
	font-size: var(--knack-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid rgba(94, 58, 26, 0.15);
}

.knack-artwork-modal__coa-badge [data-lucide] {
	width: 14px;
	height: 14px;
}

.knack-artwork-modal__coa-download {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--knack-font-size-xs);
	color: var(--knack-text-secondary);
	text-decoration: none;
	padding: 4px 8px;
	border-radius: var(--knack-radius);
	transition: background 120ms ease, color 120ms ease;
}

.knack-artwork-modal__coa-download:hover {
	background: var(--knack-bg-secondary);
	color: var(--knack-accent);
}

.knack-artwork-modal__coa-download[hidden] {
	display: none;
}

.knack-artwork-modal__coa-download [data-lucide] {
	width: 13px;
	height: 13px;
}

body.aoty-dark-mode .knack-artwork-modal__coa-badge {
	background: linear-gradient(135deg, #5b4527 0%, #3f2f1a 100%);
	color: #f5e6d3;
	border-color: rgba(245, 230, 211, 0.18);
}

/* ----------------------------------------------------------------------------
   Provenance / exhibition history — chronological list of entries.
   Each row: optional year + type chip + title (link if URL provided) + venue.
   --------------------------------------------------------------------------- */
.knack-artwork-modal__provenance-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: provenance;
}

.knack-artwork-modal__provenance-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding-left: 10px;
	border-left: 2px solid var(--knack-border-soft);
	font-size: var(--knack-font-size-sm);
	line-height: 1.45;
}

.knack-artwork-modal__provenance-year {
	color: var(--knack-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: var(--knack-font-size-xs);
	min-width: 38px;
}

.knack-artwork-modal__provenance-type {
	background: var(--knack-bg-secondary);
	color: var(--knack-text-secondary);
	padding: 1px 8px;
	border-radius: var(--knack-radius-pill);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}

.knack-artwork-modal__provenance-title {
	color: var(--knack-text);
	flex: 1 1 auto;
	min-width: 0;
}

.knack-artwork-modal__provenance-title a {
	color: var(--knack-accent);
	text-decoration: none;
}

.knack-artwork-modal__provenance-title a:hover {
	text-decoration: underline;
}

.knack-artwork-modal__provenance-venue {
	color: var(--knack-text-muted);
	font-style: italic;
	font-size: var(--knack-font-size-xs);
	flex: 1 1 100%;
	margin-left: 38px;
}

body.aoty-dark-mode .knack-artwork-modal__provenance-item {
	border-left-color: rgba(255, 255, 255, 0.1);
}

body.aoty-dark-mode .knack-artwork-modal__provenance-type {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------------------------------------------
   Sold-out / reserved status. Replaces the Buy Now panel when the artwork
   is unavailable. Variants: --sold (final, neutral grey), --reserved (warm
   amber, suggests "come back later").
   --------------------------------------------------------------------------- */
.knack-artwork-modal__status {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--knack-space-md);
	background: var(--knack-bg-secondary);
	border-radius: var(--knack-radius);
	border: 1px solid var(--knack-border-soft);
}

.knack-artwork-modal__status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--knack-radius-pill);
	font-size: var(--knack-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	width: fit-content;
}

.knack-artwork-modal__status-badge [data-lucide] {
	width: 13px;
	height: 13px;
}

.knack-artwork-modal__status-badge--sold {
	background: #2c2c2e;
	color: #fff;
}

.knack-artwork-modal__status-badge--reserved {
	background: #f6e2b9;
	color: #6b4a0e;
}

.knack-artwork-modal__status-similar {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--knack-font-size-sm);
	color: var(--knack-accent);
	text-decoration: none;
	font-weight: 600;
}

.knack-artwork-modal__status-similar [data-lucide] {
	width: 14px;
	height: 14px;
	transition: transform 160ms ease;
}

.knack-artwork-modal__status-similar:hover {
	text-decoration: underline;
}

.knack-artwork-modal__status-similar:hover [data-lucide] {
	transform: translateX(2px);
}

body.aoty-dark-mode .knack-artwork-modal__status {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-artwork-modal__status-badge--reserved {
	background: #4a3a1f;
	color: #f6e2b9;
}

/* ----------------------------------------------------------------------------
   "View on a wall" trigger button — sits in the modal sidebar near the
   action row; styled as a secondary CTA that doesn't compete with Buy Now.
   --------------------------------------------------------------------------- */
.knack-artwork-modal__view-on-wall {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--knack-font-size-sm);
	font-weight: 600;
	padding: 8px 14px;
	border-radius: var(--knack-radius);
}

.knack-artwork-modal__view-on-wall [data-lucide] {
	width: 15px;
	height: 15px;
}

/* ----------------------------------------------------------------------------
   Wall visualizer overlay — pure-CSS room. Fills the entire modal area
   when active, with a perspective-styled floor and 3 selectable interior
   palettes (data-room="modern" | "gallery" | "study").

   Scale logic in JS pins the wall element to ~280 cm and resizes the art
   element accordingly, so a 60×90 cm painting renders at ~21% × 32% of
   the visible wall — true to what you'd see at home.
   --------------------------------------------------------------------------- */
.knack-artwork-wall {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	background: #000;
	border-radius: inherit;
	overflow: hidden;
}

.knack-artwork-wall[hidden] {
	display: none;
}

.knack-artwork-wall__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.knack-artwork-wall__close [data-lucide] {
	width: 18px;
	height: 18px;
}

.knack-artwork-wall__close:hover {
	background: rgba(0, 0, 0, 0.75);
}

.knack-artwork-wall__scene {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.knack-artwork-wall__wall {
	flex: 0 0 70%;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 50px;
	transition: background 300ms ease;
}

.knack-artwork-wall__floor {
	flex: 1;
	position: relative;
	transform-origin: top;
	transition: background 300ms ease;
}

/* Adds a subtle horizon shadow where the wall meets the floor. */
.knack-artwork-wall__floor::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 24px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.knack-artwork-wall__art {
	position: absolute;
	bottom: 60%;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: 8px;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.18),
		0 18px 40px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	transition: width 220ms ease, height 220ms ease;
}

.knack-artwork-wall__art-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scale-reference person silhouette — 1.7 m tall standing to the left of
   the painting. Built from CSS shapes; no SVG / image needed. */
.knack-artwork-wall__figure {
	position: absolute;
	bottom: 0;
	left: max(8%, 40px);
	width: 36px;
	height: calc(100% * (170 / 280)); /* 170cm against a 280cm wall = ~60.7% */
	background:
		radial-gradient(circle at 50% 12%, rgba(0, 0, 0, 0.55) 0 11px, transparent 12px),  /* head */
		linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.55) 100%);          /* body */
	background-size: 100% 100%;
	border-radius: 18px 18px 4px 4px;
	opacity: 0.32;
	pointer-events: none;
}

/* ── Room palettes ───────────────────────────────────────────────────────── */

/* Modern — warm beige walls, light oak floor. */
.knack-artwork-wall__scene[data-room="modern"] .knack-artwork-wall__wall {
	background:
		radial-gradient(120% 80% at 50% 30%, #ede4d6 0%, #d8cab2 60%, #c0b193 100%);
}
.knack-artwork-wall__scene[data-room="modern"] .knack-artwork-wall__floor {
	background:
		repeating-linear-gradient(90deg,
			#9c7a4f 0,
			#a98864 2px,
			#9c7a4f 4px,
			#8e6b40 60px),
		linear-gradient(180deg, #b08a5b 0%, #6f4e2a 100%);
	background-blend-mode: multiply, normal;
}

/* Gallery — pure white-cube. */
.knack-artwork-wall__scene[data-room="gallery"] .knack-artwork-wall__wall {
	background:
		radial-gradient(140% 100% at 50% 0%, #fafafa 0%, #f0f0f0 100%);
}
.knack-artwork-wall__scene[data-room="gallery"] .knack-artwork-wall__floor {
	background:
		linear-gradient(180deg, #d8d6d2 0%, #b9b6b1 100%);
}

/* Study — navy walls, dark walnut floor. */
.knack-artwork-wall__scene[data-room="study"] .knack-artwork-wall__wall {
	background:
		radial-gradient(140% 100% at 50% 30%, #2d3e57 0%, #1c2a3e 60%, #131c2c 100%);
}
.knack-artwork-wall__scene[data-room="study"] .knack-artwork-wall__floor {
	background:
		repeating-linear-gradient(90deg,
			#3a2616 0,
			#4a3120 2px,
			#3a2616 4px,
			#2c1b0e 80px),
		linear-gradient(180deg, #4a3120 0%, #1f1209 100%);
	background-blend-mode: multiply, normal;
}

.knack-artwork-wall__scene[data-room="study"] .knack-artwork-wall__art {
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.5),
		0 18px 40px rgba(0, 0, 0, 0.4);
}

/* Bottom panel — room toggle + dimension readout. */
.knack-artwork-wall__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--knack-space-md);
	padding: 10px var(--knack-space-md);
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #fff;
	flex-wrap: wrap;
}

.knack-artwork-wall__rooms {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.08);
	padding: 3px;
	border-radius: var(--knack-radius-pill);
}

.knack-artwork-wall__room-btn {
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	padding: 6px 14px;
	font-size: var(--knack-font-size-xs);
	font-weight: 600;
	border-radius: var(--knack-radius-pill);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.knack-artwork-wall__room-btn:hover {
	color: #fff;
}

.knack-artwork-wall__room-btn--active {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.knack-artwork-wall__info {
	display: flex;
	gap: 8px;
	font-size: var(--knack-font-size-xs);
	color: rgba(255, 255, 255, 0.85);
}

.knack-artwork-wall__dim-label {
	color: rgba(255, 255, 255, 0.55);
}

.knack-artwork-wall__dim-value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   Studio editor — provenance repeater inside the artwork-row details panel.
   Only used in /studio/galleries/add/, not on the public modal.
   --------------------------------------------------------------------------- */
.ks-provenance-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 6px 0 8px;
}

.ks-provenance-entry {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 6px;
	background: var(--knack-bg-secondary);
	border-radius: var(--knack-radius);
}

/* Price block: small uppercase "Price" label sitting above the formatted amount.
   The block is hidden as a unit when there's no price to show. */
.knack-artwork-modal__price-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.knack-artwork-modal__price-label {
	font-size: var(--knack-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--knack-text-muted);
}

.knack-artwork-modal__price {
	font-size: var(--knack-font-size-xl);
	font-weight: 700;
	color: var(--knack-text);
	line-height: 1.2;
}

/* Price row pairs the converted amount with a tiny inline currency picker. */
.knack-artwork-modal__price-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.knack-artwork-modal__currency {
	font-size: var(--knack-font-size-xs);
	padding: 2px 6px;
	border: 1px solid var(--knack-border);
	border-radius: var(--knack-radius);
	background: var(--knack-bg-secondary);
	color: var(--knack-text-secondary);
	cursor: pointer;
	max-width: 90px;
}

.knack-artwork-modal__price-note {
	font-size: var(--knack-font-size-xs);
	color: var(--knack-text-muted);
	font-style: italic;
}

.knack-artwork-modal__price-note[hidden] {
	display: none;
}

body.aoty-dark-mode .knack-artwork-modal__currency {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

/* Tags row: chips inside the value cell of the spec list. */
.knack-artwork-modal__spec--tags {
	align-items: start;
}

.knack-artwork-modal__spec--tags dt {
	padding-top: 4px; /* Vertically centre the label against the chips. */
}

.knack-artwork-modal__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.knack-artwork-modal__tag {
	background: var(--knack-bg-tertiary);
	color: var(--knack-text-secondary);
	font-size: var(--knack-font-size-xs);
	padding: 2px 10px;
	border-radius: var(--knack-radius-pill);
}

.knack-artwork-modal__actions {
	display: flex;
	flex-wrap: wrap;            /* Allow buttons to wrap on narrow sidebars instead of overflowing. */
	gap: var(--knack-space-sm);
	margin-top: auto;
	padding-top: var(--knack-space-md);
}

.knack-artwork-modal__actions .knack-btn {
	/* `flex: 1 1 96px` lets buttons share the row evenly when there's room, but allows
	   them to wrap once any one would shrink below 96px. Previously plain `flex: 1`
	   forced 4 buttons into a ~292px sidebar (~67px each), which truncated labels
	   and pushed the ghost-styled Report button out of alignment with the bordered
	   Inquire/Share buttons (because no border = 2px wider content area). */
	flex: 1 1 96px;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--knack-space-xs);
	padding: 10px 12px;
	border-radius: var(--knack-radius-lg);
	font-size: var(--knack-font-size-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: all var(--knack-transition);
	border: 1px solid transparent; /* Match the outline buttons' content-box width so all four align. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The like (heart + count) and save (bookmark) buttons are compact — let
   them size to content rather than stretching to a full flex slice so the
   three labelled actions (Inquire / Share / Report) get the headroom. */
.knack-artwork-modal__actions .knack-artwork-modal__like-btn,
.knack-artwork-modal__actions .knack-artwork-modal__save-btn {
	flex: 0 0 auto;
	padding-left: 14px;
	padding-right: 14px;
}

/* Save (bookmark) button — saved state pulls the brand accent so it reads
   as a deliberate choice, not just an idle hover. */
.knack-artwork-modal__save-btn--saved {
	color: var(--knack-accent);
	border-color: var(--knack-accent);
}

.knack-artwork-modal__save-btn--saved .knack-save-icon {
	fill: currentColor;
}

.knack-artwork-modal__actions .knack-btn--accent {
	background: var(--knack-accent);
	color: #fff;
}

.knack-artwork-modal__actions .knack-btn--accent:hover {
	background: var(--knack-accent-hover);
}

.knack-artwork-modal__actions .knack-btn--outline {
	background: transparent;
	color: var(--knack-text-secondary);
	border-color: var(--knack-border);
}

.knack-artwork-modal__actions .knack-btn--outline:hover {
	background: var(--knack-bg-secondary);
}

/* Report is a tertiary action — keep it ghost-styled but match the visual footprint
   of the outline siblings (transparent border, same padding) so the row reads as
   four evenly-weighted buttons instead of a misaligned trailing chip. */
.knack-artwork-modal__actions .knack-btn--ghost {
	background: transparent;
	color: var(--knack-text-muted);
	border-color: transparent;
}

.knack-artwork-modal__actions .knack-btn--ghost:hover {
	background: var(--knack-bg-secondary);
	color: var(--knack-text-secondary);
}

.knack-artwork-modal__actions .knack-btn [data-lucide],
.knack-artwork-modal__actions .knack-btn .knack-like-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   7. MUSEUM PLAQUES (Wall Info Labels)
   -------------------------------------------------------------------------- */

.knack-artwork-unit {
	position: absolute;
	transform-style: preserve-3d;
	overflow: visible;
	cursor: pointer;
	z-index: 5;
	backface-visibility: hidden;
}

.knack-museum-plaque {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateZ(2px);
	backface-visibility: hidden;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	padding: 8px 14px;
	min-width: 120px;
	max-width: 220px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	white-space: nowrap;
}

.knack-museum-plaque__title {
	font-size: 12px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 3px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-museum-plaque__artist {
	font-size: 11px;
	font-weight: 500;
	color: #555;
	font-style: italic;
	margin: 0 0 4px;
}

.knack-museum-plaque__meta {
	font-size: 10px;
	color: #888;
	line-height: 1.4;
}

.knack-museum-plaque__edition {
	font-size: 10px;
	color: var(--knack-accent);
	font-weight: 600;
	margin-top: 3px;
}

/* Wall section label inside each wall */
.knack-wall-section-label {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%) translateZ(3px);
	backface-visibility: hidden;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.2);
	pointer-events: none;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7.2. ROOM ARCHITECTURE
   -------------------------------------------------------------------------- */

/* Artwork spotlights (cone of light above each frame) */
.knack-artwork-spotlight {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	backface-visibility: hidden;
	width: 40px;
	height: 60px;
	background: linear-gradient(
		to bottom,
		rgba(255, 248, 230, 0.5) 0%,
		rgba(255, 248, 230, 0.15) 40%,
		transparent 100%
	);
	clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
	pointer-events: none;
	z-index: 0;
}

/* Baseboard molding at bottom of each wall */
.knack-wall-baseboard {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 16px;
	background: linear-gradient(to top,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.04) 40%,
		transparent 100%
	);
	border-top: 2px solid rgba(0, 0, 0, 0.08);
	z-index: 2;
	pointer-events: none;
}

/* Crown molding at top of each wall */
.knack-wall-crown {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.06) 0%,
		transparent 100%
	);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	z-index: 2;
	pointer-events: none;
}

/* Ceiling */
.knack-room-ceiling {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--room-size, 1000px) * 2);
	height: calc(var(--room-size, 1000px) * 2);
	transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--room-height) / -2));
	background: linear-gradient(to bottom, #e8e3dd 0%, #ddd6cc 100%);
	opacity: 0.35;
	pointer-events: none;
}

/* Track lighting rail on ceiling */
.knack-room-track-light {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70%;
	height: 4px;
	transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--room-height) / -2 - 2px));
	background: #333;
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	z-index: 2;
}

/* Decorative bench in the room center */
.knack-room-bench {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120px;
	height: 16px;
	transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--room-height) / -2 - 6px));
	background: linear-gradient(to bottom, #8b7355 0%, #6b5a44 100%);
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   7.5. MINIMAP
   -------------------------------------------------------------------------- */

.knack-gallery-minimap {
	display: flex;
	align-items: center;
	padding: 0 var(--knack-space-xs);
}

.knack-gallery-minimap__room {
	position: relative;
	width: 60px;
	height: 50px;
}

.knack-gallery-minimap__svg {
	width: 100%;
	height: 100%;
	display: block;
}

.knack-gallery-minimap__wall {
	transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

.knack-gallery-minimap__hit:hover + .knack-gallery-minimap__wall,
.knack-gallery-minimap__wall:hover {
	stroke: rgba(255, 255, 255, 0.6) !important;
}

.knack-gallery-minimap__viewer {
	transition: cx 0.15s ease, cy 0.15s ease;
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}

/* --------------------------------------------------------------------------
   7.6. EXTRA CONTROLS (Zoom, Grid, Tour, Fullscreen)
   -------------------------------------------------------------------------- */

.knack-gallery-ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	border-radius: var(--knack-radius);
	cursor: pointer;
	transition: color var(--knack-transition), background var(--knack-transition);
}

.knack-gallery-ctrl:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.knack-gallery-ctrl:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.4);
	outline-offset: 2px;
}

.knack-gallery-ctrl--active {
	background: var(--knack-accent) !important;
	color: #fff !important;
}

.knack-gallery-ctrl [data-lucide] {
	width: 16px;
	height: 16px;
}

/* Quality toggle button (injected via JS) — match toolbar controls, not a browser-default button. */
.knack-gallery-controls__btn,
.knack-gallery-quality-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 10px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--knack-radius-pill);
	cursor: pointer;
	transition: color var(--knack-transition), background var(--knack-transition);
}

.knack-gallery-controls__btn:hover,
.knack-gallery-quality-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.knack-gallery-quality-btn[data-quality="low"]    { color: rgba(255, 255, 255, 0.5); }
.knack-gallery-quality-btn[data-quality="medium"] { color: rgba(255, 255, 255, 0.75); }
.knack-gallery-quality-btn[data-quality="high"]   { color: #fff; }

.knack-gallery-controls__divider {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.15);
	margin: 0 var(--knack-space-xs);
}

/* Artwork counter */
.knack-gallery-counter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--knack-font-size-xs);
	line-height: 1;
	color: rgba(255, 255, 255, 0.5);
	padding: 0 var(--knack-space-xs);
	white-space: nowrap;
	flex-shrink: 0;
}

.knack-gallery-counter__text {
	white-space: nowrap;
}

.knack-gallery-counter [data-lucide] {
	width: 13px;
	height: 13px;
}

/* --------------------------------------------------------------------------
   7.7. WALL LABEL (floating indicator)
   -------------------------------------------------------------------------- */

.knack-gallery-wall-label {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: calc(var(--knack-z-overlay) + 3);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.knack-gallery-wall-label--visible {
	opacity: 1;
}

.knack-gallery-wall-label__text {
	font-size: var(--knack-font-size-3xl);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.15);
	letter-spacing: 4px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7.8. GALLERY INFO DESCRIPTION
   -------------------------------------------------------------------------- */

.knack-gallery-info__desc {
	margin-top: var(--knack-space-sm);
	font-size: var(--knack-font-size-sm);
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
}

.knack-gallery-info__desc p {
	margin: 0 0 var(--knack-space-xs);
}

.knack-gallery-info__desc p:last-child {
	margin-bottom: 0;
}

/* Info collapsed state */
.knack-gallery-info--collapsed .knack-gallery-info__inner {
	display: none;
}

/* --------------------------------------------------------------------------
   7.9. GRID VIEW OVERLAY
   -------------------------------------------------------------------------- */

.knack-gallery-grid-view {
	position: fixed;
	inset: 0;
	z-index: calc(var(--knack-z-overlay) + 15);
	background: rgba(10, 10, 10, 0.97);
	backdrop-filter: blur(16px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.knack-gallery-grid-view[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.knack-gallery-grid-view__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--knack-space-2xl) var(--knack-space-lg);
}

.knack-gallery-grid-view__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--knack-space-xl);
}

.knack-gallery-grid-view__header h2 {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	font-size: var(--knack-font-size-xl);
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.knack-gallery-grid-view__header h2 [data-lucide] {
	width: 22px;
	height: 22px;
	color: var(--knack-accent);
}

.knack-gallery-grid-view__close {
	display: inline-flex;
	align-items: center;
	gap: var(--knack-space-xs);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: none;
	padding: var(--knack-space-sm) var(--knack-space-md);
	border-radius: var(--knack-radius-pill);
	font-size: var(--knack-font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--knack-transition);
}

.knack-gallery-grid-view__close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.knack-gallery-grid-view__close [data-lucide] {
	width: 16px;
	height: 16px;
}

/* Grid cards */
.knack-gallery-grid-view__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--knack-space-lg);
}

.knack-grid-card {
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--knack-radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: transform var(--knack-transition), box-shadow var(--knack-transition);
}

.knack-grid-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.knack-grid-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.knack-grid-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.knack-grid-card:hover .knack-grid-card__image img {
	transform: scale(1.05);
}

.knack-grid-card__info {
	padding: var(--knack-space-md);
}

.knack-grid-card__title {
	font-size: var(--knack-font-size-base);
	font-weight: 600;
	color: #fff;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knack-grid-card__artist {
	font-size: var(--knack-font-size-xs);
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: var(--knack-space-xs);
}

.knack-grid-card__meta {
	font-size: var(--knack-font-size-xs);
	color: rgba(255, 255, 255, 0.35);
}

.knack-grid-card__price {
	display: inline-block;
	margin-top: var(--knack-space-xs);
	font-size: var(--knack-font-size-sm);
	font-weight: 700;
	color: var(--knack-accent);
}

/* --------------------------------------------------------------------------
   7.10. AUTO-TOUR PROGRESS BAR
   -------------------------------------------------------------------------- */

.knack-gallery-tour-bar {
	position: fixed;
	top: calc(var(--knack-header-height) + var(--knack-admin-bar-offset, 0px) + var(--knack-space-md));
	left: 50%;
	transform: translateX(-50%);
	z-index: calc(var(--knack-z-overlay) + 12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.knack-gallery-tour-bar[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.knack-gallery-tour-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--knack-space-sm);
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(12px);
	padding: var(--knack-space-sm) var(--knack-space-md);
	border-radius: var(--knack-radius-pill);
	color: #fff;
	font-size: var(--knack-font-size-xs);
}

.knack-gallery-tour-bar__label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	color: var(--knack-accent);
}

.knack-gallery-tour-bar__label [data-lucide] {
	width: 13px;
	height: 13px;
}

.knack-gallery-tour-bar__progress {
	width: 120px;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
	overflow: hidden;
}

.knack-gallery-tour-bar__fill {
	height: 100%;
	width: 0%;
	background: var(--knack-accent);
	border-radius: 2px;
	transition: width 0.3s ease;
}

.knack-gallery-tour-bar__current {
	color: rgba(255, 255, 255, 0.5);
	min-width: 30px;
	text-align: center;
}

.knack-gallery-tour-bar__stop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--knack-transition);
}

.knack-gallery-tour-bar__stop:hover {
	background: rgba(255, 100, 100, 0.3);
}

.knack-gallery-tour-bar__stop [data-lucide] {
	width: 12px;
	height: 12px;
}

/* --------------------------------------------------------------------------
   7.11. MOBILE ARTWORK CARDS
   -------------------------------------------------------------------------- */

.knack-artwork-mobile-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.knack-artwork-mobile-card .knack-artwork-frame {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	transform: none !important;
}

.knack-artwork-mobile-card .knack-museum-plaque {
	position: static;
	margin-top: 8px;
	transform: none;
	width: 100%;
	max-width: none;
	text-align: center;
	white-space: normal;
}

/* --------------------------------------------------------------------------
   8. HOMEPAGE — DIGITAL ART EXHIBITIONS SHOWCASE
   -------------------------------------------------------------------------- */

/* — Section wrapper — */
.knack-exhibition-showcase {
	padding: var(--knack-section-py-lg, 72px) 0;
	background: linear-gradient(180deg, transparent 0%, rgba(96, 51, 94, 0.04) 25%, rgba(96, 51, 94, 0.06) 75%, transparent 100%);
	border-top: none;
	border-bottom: none;
}

/* — Header — */
.knack-exhibition-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--knack-space-lg);
	margin-bottom: var(--knack-space-xl, 2rem);
}

.knack-exhibition-header__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--knack-accent);
	margin-bottom: 6px;
}

.knack-exhibition-header__badge [data-lucide] {
	width: 14px;
	height: 14px;
}

.knack-exhibition-header__title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: var(--knack-text);
}

.knack-exhibition-header__desc {
	font-size: 14px;
	color: var(--knack-text-secondary);
	margin: 0;
	max-width: 520px;
	line-height: 1.5;
}

.knack-exhibition-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--knack-accent);
	border-radius: var(--knack-radius-pill, 100px);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s, box-shadow 0.2s, gap 0.2s;
	box-shadow: 0 2px 8px rgba(96, 51, 94, 0.25);
}

.knack-exhibition-header__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(96, 51, 94, 0.35);
	gap: 12px;
	color: #fff;
}

.knack-exhibition-header__cta [data-lucide] {
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
}

/* — Layout: Hero + Grid — */
.knack-exhibition-layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--knack-space-lg);
	align-items: stretch;
}

/* — Hero Exhibition Card — */
.knack-exhibition-hero {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 24px;
	overflow: hidden;
	background: var(--knack-surface);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.knack-exhibition-hero:hover {
	transform: translateY(-6px) scale(1.005);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.knack-exhibition-hero__visual {
	position: relative;
	height: 320px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	perspective: 500px;
}

.knack-exhibition-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.knack-exhibition-hero__artworks {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 32px;
	z-index: 1;
}

.knack-exhibition-hero__frame {
	width: 90px;
	height: 90px;
	border: 3px solid rgba(255, 255, 255, 0.75);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transform: translateZ(calc(var(--i, 0) * 8px + 5px));
	transition: transform 0.4s ease;
}

.knack-exhibition-hero:hover .knack-exhibition-hero__frame {
	transform: translateZ(calc(var(--i, 0) * 16px + 10px));
}

.knack-exhibition-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.knack-exhibition-hero__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--knack-radius-pill, 100px);
	display: flex;
	align-items: center;
	gap: 5px;
	z-index: 3;
}

.knack-exhibition-hero__badge [data-lucide] {
	width: 12px;
	height: 12px;
}

.knack-exhibition-hero__info {
	padding: 20px 24px 24px;
}

.knack-exhibition-hero__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--knack-text);
}

.knack-exhibition-hero__excerpt {
	font-size: 13px;
	color: var(--knack-text-secondary);
	margin: 0 0 14px;
	line-height: 1.45;
}

.knack-exhibition-hero__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--knack-text-secondary);
	margin-bottom: 16px;
}

.knack-exhibition-hero__artist {
	display: flex;
	align-items: center;
	gap: 8px;
}

.knack-exhibition-hero__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.knack-exhibition-hero__count {
	display: flex;
	align-items: center;
	gap: 4px;
}

.knack-exhibition-hero__count [data-lucide] {
	width: 13px;
	height: 13px;
}

.knack-exhibition-hero__enter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--knack-accent);
	transition: gap 0.2s;
}

.knack-exhibition-hero:hover .knack-exhibition-hero__enter {
	gap: 10px;
}

.knack-exhibition-hero__enter [data-lucide] {
	width: 15px;
	height: 15px;
	transition: transform 0.2s;
}

.knack-exhibition-hero:hover .knack-exhibition-hero__enter [data-lucide] {
	transform: translateX(3px);
}

/* — Grid of gallery cards — */
.knack-exhibition-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--knack-space-md, 1rem);
	align-content: start;
}

/* Cards in the exhibition grid stretch to fill */
.knack-exhibition-grid .knack-gallery-card {
	display: flex;
	flex-direction: column;
}

.knack-exhibition-grid .knack-gallery-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Fallback: if no hero layout, still use old previews class */
.knack-section--galleries .knack-gallery-previews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--knack-space-lg);
}

/* Exhibition grid cards: slightly smaller inner heights */
.knack-exhibition-grid .knack-gallery-card__inner {
	height: 180px;
}

.knack-exhibition-grid .knack-gallery-card__title {
	font-size: 13px;
}

.knack-exhibition-grid .knack-gallery-card__mini-frame {
	width: 52px;
	height: 52px;
}

/* — Dark mode — */
body.aoty-dark-mode .knack-exhibition-hero {
	background: var(--knack-surface);
}

body.aoty-dark-mode .knack-exhibition-header__title {
	color: var(--knack-text);
}

body.aoty-dark-mode .knack-exhibition-header__cta {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.aoty-dark-mode .knack-exhibition-hero__frame {
	border-color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Archive */
	.knack-gallery-grid {
		grid-template-columns: 1fr;
	}

	.knack-gallery-archive-header {
		padding: var(--knack-space-lg) 0 var(--knack-space-md);
	}

	.knack-gallery-archive-title {
		font-size: var(--knack-font-size-2xl);
	}

	/* Room → horizontal scroll fallback */
	.knack-gallery-scene {
		perspective: none;
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		background: var(--wall-color, #f5f0eb);
	}

	.knack-gallery-room {
		transform: none !important;
		display: flex;
		flex-direction: row;
		width: max-content;
		height: auto;
		min-height: calc(100vh - var(--knack-header-height));
		min-height: calc(100dvh - var(--knack-header-height));
		position: static;
		transition: none;
	}

	.knack-wall {
		transform: none !important;
		position: static;
		top: auto;
		left: auto;
		min-width: 100vw;
		height: auto;
		min-height: calc(100vh - var(--knack-header-height) - 120px);
		min-height: calc(100dvh - var(--knack-header-height) - 120px);
		padding: var(--knack-space-xl) var(--knack-space-md);
		scroll-snap-align: start;
		display: flex;
		flex-wrap: wrap;
		gap: var(--knack-space-md);
		justify-content: center;
		align-content: flex-start;
	}

	.knack-gallery-floor,
	.knack-gallery-ambient,
	.knack-room-ceiling,
	.knack-room-track-light,
	.knack-room-bench,
	.knack-wall-baseboard,
	.knack-wall-crown,
	.knack-artwork-spotlight,
	.knack-wall-front,
	.knack-room-lintel {
		display: none;
	}

	.knack-artwork-frame {
		position: static !important;
		width: calc(50% - var(--knack-space-sm)) !important;
		height: auto !important;
		transform: none !important;
	}

	.knack-artwork-frame img {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.knack-artwork-plaque {
		position: static;
		transform: none;
		opacity: 1;
		text-align: center;
		margin-top: var(--knack-space-xs);
		background: transparent;
		box-shadow: none;
		font-size: var(--knack-font-size-xs);
		color: var(--knack-text-secondary);
	}

	/* Museum plaques on mobile */
	.knack-museum-plaque {
		position: static;
		transform: none;
		margin-top: 8px;
		text-align: center;
		max-width: none;
		white-space: normal;
	}

	.knack-wall-section-label {
		position: static;
		transform: none;
		text-align: center;
		padding: var(--knack-space-md) 0 var(--knack-space-sm);
		color: var(--knack-text-muted);
		width: 100%;
	}

	.knack-artwork-unit {
		position: static !important;
		width: calc(50% - var(--knack-space-sm)) !important;
		height: auto !important;
		transform: none !important;
	}

	/* Hide 3D nav arrows on mobile, use native scroll */
	.knack-gallery-controls .knack-gallery-nav {
		display: none;
	}

	.knack-gallery-controls {
		bottom: var(--knack-space-md);
		max-width: 95vw;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Simplify controls on mobile */
	.knack-gallery-minimap {
		display: none;
	}

	.knack-gallery-wall-indicator {
		display: none;
	}

	.knack-gallery-wall-label {
		display: none;
	}

	/* Grid view mobile */
	.knack-gallery-grid-view__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--knack-space-md);
	}

	.knack-gallery-grid-view__inner {
		padding: var(--knack-space-lg) var(--knack-space-md);
	}

	.knack-gallery-grid-view__header h2 {
		font-size: var(--knack-font-size-lg);
	}

	/* Gallery info */
	.knack-gallery-info {
		left: var(--knack-space-md);
		top: calc(var(--knack-header-height) + var(--knack-admin-bar-offset, 0px) + var(--knack-space-sm));
	}

	.knack-gallery-info__inner {
		padding: var(--knack-space-sm) var(--knack-space-md);
	}

	.knack-gallery-info__title {
		font-size: var(--knack-font-size-base);
	}

	.knack-gallery-back {
		right: var(--knack-space-md);
		top: calc(var(--knack-header-height) + var(--knack-admin-bar-offset, 0px) + var(--knack-space-sm));
		padding: var(--knack-space-xs) var(--knack-space-sm);
		font-size: var(--knack-font-size-xs);
	}

	.knack-gallery-back span {
		display: none;
	}

	/* Modal → full-screen on mobile (edge-to-edge, image gets max real estate) */
	.knack-artwork-modal__body {
		grid-template-columns: 1fr;
	}

	.knack-artwork-modal__content {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
		box-shadow: none;
	}

	.knack-artwork-modal__media {
		padding: var(--knack-space-sm);
		min-height: 0;
		flex: 1 1 auto;
	}

	.knack-artwork-modal__image {
		max-height: none;
		max-width: 100%;
	}

	.knack-artwork-modal__details {
		border-left: none;
		border-top: var(--knack-divider);
		padding: var(--knack-space-md);
		max-height: 45vh;
		max-height: 45dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.knack-artwork-modal__close {
		top: max(var(--knack-space-md), env(safe-area-inset-top, 0px));
		right: var(--knack-space-md);
		width: 44px;
		height: 44px;
	}

	.knack-artwork-modal__prev,
	.knack-artwork-modal__next {
		width: 44px;
		height: 44px;
	}
	.knack-artwork-modal__prev { left: var(--knack-space-sm); }
	.knack-artwork-modal__next { right: var(--knack-space-sm); }

	/* Homepage exhibitions */
	.knack-exhibition-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.knack-exhibition-layout {
		grid-template-columns: 1fr;
	}

	.knack-exhibition-grid {
		grid-template-columns: 1fr;
	}

	.knack-exhibition-hero__visual {
		height: 220px;
	}

	.knack-section--galleries .knack-gallery-previews {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.knack-artwork-frame {
		width: 100% !important;
	}

	.knack-gallery-card__inner {
		height: 200px;
	}
}

/* --------------------------------------------------------------------------
   9. DARK MODE
   -------------------------------------------------------------------------- */

body.aoty-dark-mode .knack-wall {
	background: var(--knack-bg-tertiary);
}

body.aoty-dark-mode .knack-gallery-floor {
	background: linear-gradient(to bottom, #2a2a2a 0%, #111 100%);
}

body.aoty-dark-mode .knack-artwork-plaque {
	background: rgba(30, 30, 30, 0.92);
	color: var(--knack-text);
}

body.aoty-dark-mode .knack-artwork-frame--classic {
	border-color: #555;
	box-shadow:
		inset 0 0 0 2px #666,
		0 4px 12px rgba(0, 0, 0, 0.4);
}

body.aoty-dark-mode .knack-artwork-frame--modern {
	border-color: #666;
}

body.aoty-dark-mode .knack-artwork-modal__content {
	background: var(--knack-surface);
}

body.aoty-dark-mode .knack-artwork-modal__media {
	background: #0a0a0a;
}

/* Dark-mode polish for the new specs / about sections — softer dividers and
   labels so the section headings don't shout against a dark sidebar. */
body.aoty-dark-mode .knack-artwork-modal__specs,
body.aoty-dark-mode .knack-artwork-modal__about {
	border-top-color: rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-artwork-modal__section-title {
	color: rgba(255, 255, 255, 0.55);
}

body.aoty-dark-mode .knack-artwork-modal__spec dt {
	color: rgba(255, 255, 255, 0.55);
}

body.aoty-dark-mode .knack-gallery-card {
	background: var(--knack-surface);
}

/* Framed variant ignores the generic surface background — the
   `--framed` card builds its own visual chrome (graphite frame +
   plaque) and any background on the outer `.knack-gallery-card`
   wrapper renders as a redundant slab behind that chrome. The
   generic `.knack-gallery-card` rule above keeps applying to the
   default and other gallery card variants. */
body.aoty-dark-mode .knack-gallery-card.knack-gallery-card--framed {
	background: transparent;
}

body.aoty-dark-mode .knack-gallery-card__mini-frame {
	border-color: rgba(255, 255, 255, 0.3);
}

/* Museum plaques */
body.aoty-dark-mode .knack-museum-plaque {
	background: rgba(30, 30, 30, 0.95);
	border-color: rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-museum-plaque__title {
	color: #e0e0e0;
}

body.aoty-dark-mode .knack-museum-plaque__artist {
	color: #aaa;
}

body.aoty-dark-mode .knack-museum-plaque__meta {
	color: #777;
}

body.aoty-dark-mode .knack-wall-section-label {
	color: rgba(255, 255, 255, 0.12);
}

/* Room architecture */
body.aoty-dark-mode .knack-wall-baseboard {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
	border-top-color: rgba(255, 255, 255, 0.06);
}

body.aoty-dark-mode .knack-wall-crown {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
	border-bottom-color: rgba(255, 255, 255, 0.04);
}

body.aoty-dark-mode .knack-room-ceiling {
	background: linear-gradient(to bottom, #1a1a1a 0%, #111 100%);
}

body.aoty-dark-mode .knack-room-bench {
	background: linear-gradient(to bottom, #444 0%, #333 100%);
}

body.aoty-dark-mode .knack-wall-front,
body.aoty-dark-mode .knack-room-lintel {
	background: var(--knack-bg-tertiary);
}

body.aoty-dark-mode .knack-artwork-spotlight {
	background: linear-gradient(
		to bottom,
		rgba(255, 248, 230, 0.35) 0%,
		rgba(255, 248, 230, 0.08) 40%,
		transparent 100%
	);
}

/* Grid cards */
body.aoty-dark-mode .knack-grid-card {
	background: rgba(255, 255, 255, 0.04);
}

/* Room always has dark background regardless of theme */
body.aoty-dark-mode .knack-main--gallery-single {
	background: #0f0f0f;
}

body.aoty-dark-mode .knack-gallery-loading {
	background: #0f0f0f;
}

/* ============================================================
   11. Music Controls
   ============================================================ */

/* Audio initialization indicator */
.knack-gallery-audio-indicator {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(30, 30, 30, 0.85);
	backdrop-filter: blur(8px);
	color: #fff;
	padding: 8px 18px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2050;
	opacity: 1;
	transition: opacity 0.5s ease;
	pointer-events: none;
	animation: knack-audio-fade-in 0.4s ease;
}

.knack-gallery-audio-indicator svg {
	flex-shrink: 0;
}

@keyframes knack-audio-fade-in {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Soundtrack / Narration in artwork modal */
.knack-artwork-modal__soundtrack {
	margin-top: 16px;
	padding: 12px 16px;
	background: rgba(var(--knack-accent-rgb, 96, 51, 94), 0.08);
	border-radius: 10px;
	border: 1px solid rgba(var(--knack-accent-rgb, 96, 51, 94), 0.15);
}

.knack-artwork-modal__soundtrack label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--knack-accent, #60335e);
	margin-bottom: 8px;
}

.knack-artwork-modal__soundtrack audio {
	width: 100%;
	height: 36px;
	border-radius: 8px;
}

.knack-gallery-music-btn {
	position: relative;
}

.knack-gallery-volume-popover {
	position: fixed;
	bottom: 70px;
	z-index: 2010;
	background: rgba(30, 30, 30, 0.92);
	backdrop-filter: blur(12px);
	border-radius: 10px;
	padding: 16px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.knack-gallery-volume-slider {
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	writing-mode: vertical-lr;
	direction: rtl;
	width: 6px;
	height: 100px;
	background: transparent;
	cursor: pointer;
}

.knack-gallery-volume-slider::-webkit-slider-runnable-track {
	width: 6px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.knack-gallery-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	margin-left: -5px;
}

/* ============================================================
   12. Guestbook Overlay
   ============================================================ */

.knack-gallery-guestbook {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2100;
	pointer-events: none;
}

.knack-gallery-guestbook--open {
	display: flex !important;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.knack-gallery-guestbook__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}

.knack-gallery-guestbook__content {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 16px;
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 32px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
	animation: guestbook-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes guestbook-enter {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.knack-gallery-guestbook__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: #f0f0f0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: background 0.2s, color 0.2s;
}

.knack-gallery-guestbook__close:hover {
	background: #e0e0e0;
	color: #333;
}

.knack-gallery-guestbook__header {
	text-align: center;
	margin-bottom: 24px;
}

.knack-gallery-guestbook__header i {
	width: 36px;
	height: 36px;
	color: var(--knack-accent, #60335e);
	margin-bottom: 8px;
}

.knack-gallery-guestbook__header h2 {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: #1a1a1a;
}

.knack-gallery-guestbook__subtitle {
	font-size: 0.85rem;
	color: #888;
	margin: 0;
}

.knack-gallery-guestbook__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.knack-gallery-guestbook__form input,
.knack-gallery-guestbook__form textarea {
	font-family: inherit;
	font-size: 0.9rem;
	padding: 10px 14px;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	background: #fafafa;
	color: #1a1a1a;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	resize: vertical;
}

.knack-gallery-guestbook__form input:focus,
.knack-gallery-guestbook__form textarea:focus {
	border-color: var(--knack-accent, #60335e);
	background: #fff;
}

.knack-gallery-guestbook__form textarea {
	min-height: 80px;
}

.knack-gallery-guestbook__actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.knack-gallery-guestbook__submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	font-weight: 600;
	border-radius: 8px;
	transition: transform 0.15s, box-shadow 0.15s;
}

.knack-gallery-guestbook__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(96, 51, 94, 0.3);
}

.knack-gallery-guestbook__skip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 8px;
	background: transparent;
	color: #888;
	border: 1px solid #e0e0e0;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.knack-gallery-guestbook__skip:hover {
	background: #f5f5f5;
	color: #555;
}

.knack-gallery-guestbook__skip [data-lucide] {
	width: 14px;
	height: 14px;
}

body.aoty-dark-mode .knack-gallery-guestbook__skip {
	color: #aaa;
	border-color: #444;
}

body.aoty-dark-mode .knack-gallery-guestbook__skip:hover {
	background: #333;
	color: #ddd;
}

.knack-gallery-guestbook__submit--success {
	background: #22c55e !important;
}

.knack-gallery-guestbook__entries {
	border-top: 1px solid #f0f0f0;
	padding-top: 20px;
}

.knack-gallery-guestbook__entries-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: #888;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.knack-gallery-guestbook__entry {
	padding: 12px 0;
	border-bottom: 1px solid #f5f5f5;
}

.knack-gallery-guestbook__entry:last-child {
	border-bottom: none;
}

.knack-gallery-guestbook__entry-name {
	font-size: 0.9rem;
	color: #1a1a1a;
	display: block;
	margin-bottom: 4px;
}

.knack-gallery-guestbook__entry-message {
	font-size: 0.85rem;
	color: #555;
	margin: 0 0 4px;
	line-height: 1.5;
	font-style: italic;
}

.knack-gallery-guestbook__entry-date {
	font-size: 0.75rem;
	color: #aaa;
}

/* Dark mode guestbook */
body.aoty-dark-mode .knack-gallery-guestbook__content {
	background: #1e1e1e;
}

body.aoty-dark-mode .knack-gallery-guestbook__header h2,
body.aoty-dark-mode .knack-gallery-guestbook__entry-name {
	color: #f0f0f0;
}

body.aoty-dark-mode .knack-gallery-guestbook__form input,
body.aoty-dark-mode .knack-gallery-guestbook__form textarea {
	background: #2a2a2a;
	border-color: #3a3a3a;
	color: #f0f0f0;
}

body.aoty-dark-mode .knack-gallery-guestbook__entry-message {
	color: #aaa;
}

body.aoty-dark-mode .knack-gallery-guestbook__entries {
	border-top-color: #333;
}

body.aoty-dark-mode .knack-gallery-guestbook__entry {
	border-bottom-color: #2a2a2a;
}

body.aoty-dark-mode .knack-gallery-guestbook__close {
	background: #333;
	color: #ccc;
}

/* ============================================================
   13. Artwork Inquiry Overlay
   ============================================================ */

.knack-gallery-inquiry {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2200;
	pointer-events: none;
}

.knack-gallery-inquiry--open {
	display: flex !important;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.knack-gallery-inquiry__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}

.knack-gallery-inquiry__content {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 16px;
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 32px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
	animation: inquiry-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes inquiry-enter {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.knack-gallery-inquiry__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: #f0f0f0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: background 0.2s, color 0.2s;
}

.knack-gallery-inquiry__close:hover {
	background: #e0e0e0;
	color: #333;
}

.knack-gallery-inquiry__header {
	text-align: center;
	margin-bottom: 24px;
}

.knack-gallery-inquiry__header i {
	width: 36px;
	height: 36px;
	color: var(--knack-accent, #60335e);
	margin-bottom: 8px;
}

.knack-gallery-inquiry__header h2 {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.knack-gallery-inquiry__artwork-title {
	font-size: 0.9rem;
	color: #888;
	margin: 0;
	font-style: italic;
}

.knack-gallery-inquiry__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.knack-gallery-inquiry__form input,
.knack-gallery-inquiry__form textarea {
	font-family: inherit;
	font-size: 0.9rem;
	padding: 10px 14px;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	background: #fafafa;
	color: #1a1a1a;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	resize: vertical;
}

.knack-gallery-inquiry__form input:focus,
.knack-gallery-inquiry__form textarea:focus {
	border-color: var(--knack-accent, #60335e);
	background: #fff;
}

.knack-gallery-inquiry__form textarea {
	min-height: 100px;
}

.knack-gallery-inquiry__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	font-weight: 600;
	border-radius: 8px;
	transition: transform 0.15s, box-shadow 0.15s;
}

.knack-gallery-inquiry__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(96, 51, 94, 0.3);
}

.knack-gallery-inquiry__submit--success {
	background: #22c55e !important;
}

.knack-gallery-inquiry__submit--sending {
	opacity: 0.7;
	pointer-events: none;
}

/* Dark mode inquiry */
body.aoty-dark-mode .knack-gallery-inquiry__content {
	background: #1e1e1e;
}

body.aoty-dark-mode .knack-gallery-inquiry__header h2 {
	color: #f0f0f0;
}

body.aoty-dark-mode .knack-gallery-inquiry__form input,
body.aoty-dark-mode .knack-gallery-inquiry__form textarea {
	background: #2a2a2a;
	border-color: #3a3a3a;
	color: #f0f0f0;
}

body.aoty-dark-mode .knack-gallery-inquiry__close {
	background: #333;
	color: #ccc;
}

/* ============================================================
   14. Share Toast Notification
   ============================================================ */

.knack-gallery-toast {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1a1a1a;
	color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 0.85rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 3000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.knack-gallery-toast [data-lucide] {
	width: 16px;
	height: 16px;
	color: #22c55e;
}

.knack-gallery-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

body.aoty-dark-mode .knack-gallery-toast {
	background: #333;
}

/* ── Artwork Like Button ───────────────────────────────────────── */

.knack-artwork-modal__like-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	transition: color 0.2s, border-color 0.2s;
}

.knack-artwork-modal__like-btn .knack-like-icon {
	transition: fill 0.2s, stroke 0.2s, transform 0.2s;
}

.knack-artwork-modal__like-btn--liked {
	color: #e74c6f;
	border-color: #e74c6f;
}

.knack-artwork-modal__like-btn--liked .knack-like-icon {
	fill: #e74c6f;
	stroke: #e74c6f;
}

.knack-like-count {
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Pulse animation on click */
@keyframes knack-like-pulse {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.3); }
	60%  { transform: scale(0.95); }
	100% { transform: scale(1); }
}

.knack-like-pulse .knack-like-icon {
	animation: knack-like-pulse 0.4s ease-out;
}

/* Dark mode */
body.aoty-dark-mode .knack-artwork-modal__like-btn--liked {
	color: #ff6b8a;
	border-color: #ff6b8a;
}

body.aoty-dark-mode .knack-artwork-modal__like-btn--liked .knack-like-icon {
	fill: #ff6b8a;
	stroke: #ff6b8a;
}

/* --------------------------------------------------------------------------
   15. VIGNETTE OVERLAY (CSS post-processing)
   -------------------------------------------------------------------------- */

.knack-gallery-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(
		ellipse at center,
		transparent 55%,
		rgba(0, 0, 0, 0.15) 80%,
		rgba(0, 0, 0, 0.35) 100%
	);
}

/* --------------------------------------------------------------------------
   17. QUICK-PEEK ZOOM
   -------------------------------------------------------------------------- */

.knack-gallery--quick-peek .knack-gallery-crosshair svg {
	transform: scale(1.5);
	transition: transform 0.15s ease;
}

.knack-gallery--quick-peek .knack-gallery-vignette {
	background: radial-gradient(
		ellipse at center,
		transparent 30%,
		rgba(0, 0, 0, 0.25) 60%,
		rgba(0, 0, 0, 0.5) 100%
	);
}

/* --------------------------------------------------------------------------
   18. LIVE VISITOR COUNT
   -------------------------------------------------------------------------- */

.knack-gallery-visitors {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--knack-font-size-xs);
	color: rgba(255, 255, 255, 0.5);
	padding: 0 var(--knack-space-xs);
}

.knack-gallery-visitors svg {
	opacity: 0.5;
}

.knack-gallery-visitors__count {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   19. REACTION BUTTONS
   -------------------------------------------------------------------------- */

.knack-artwork-modal__reactions {
	display: flex;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	margin-top: 12px;
}

.knack-reaction-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--knack-radius-pill);
	background: transparent;
	cursor: pointer;
	font-size: 13px;
	transition: all 0.15s ease;
}

.knack-reaction-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	transform: scale(1.05);
}

.knack-reaction-btn--pop {
	animation: reaction-pop 0.4s ease;
}

@keyframes reaction-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.knack-reaction-btn__icon {
	font-size: 16px;
	line-height: 1;
}

.knack-reaction-btn__count {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.5);
	font-variant-numeric: tabular-nums;
}

body.aoty-dark-mode .knack-reaction-btn {
	border-color: rgba(255, 255, 255, 0.1);
}

body.aoty-dark-mode .knack-reaction-btn:hover {
	background: rgba(255, 255, 255, 0.06);
}

body.aoty-dark-mode .knack-reaction-btn__count {
	color: rgba(255, 255, 255, 0.5);
}

body.aoty-dark-mode .knack-artwork-modal__reactions {
	border-top-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   20. QR CODE OVERLAY
   -------------------------------------------------------------------------- */

.knack-gallery-qr-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--knack-z-modal) + 10);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.knack-gallery-qr-overlay__content {
	position: relative;
	background: #fff;
	border-radius: var(--knack-radius-xl);
	padding: 32px;
	text-align: center;
	max-width: 300px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.knack-gallery-qr-overlay__content h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
}

.knack-gallery-qr-overlay__img {
	display: block;
	margin: 0 auto 12px;
	border-radius: 8px;
	background: #fff;
}

.knack-gallery-qr-overlay__url {
	font-size: 11px;
	color: #888;
	word-break: break-all;
	margin: 0 0 12px;
}

.knack-gallery-qr-overlay__actions {
	display: flex;
	justify-content: center;
}

.knack-gallery-qr-overlay__copy {
	padding: 6px 16px;
	border: 1px solid #ddd;
	border-radius: var(--knack-radius-pill);
	background: #f5f5f5;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.knack-gallery-qr-overlay__copy:hover {
	background: #eee;
}

.knack-gallery-qr-overlay__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: none;
	background: none;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	line-height: 1;
}

.knack-gallery-qr-overlay__close:hover {
	color: #333;
}

/* --------------------------------------------------------------------------
   21. MINIMAP DIRECTION CONE
   -------------------------------------------------------------------------- */

.knack-gallery-minimap__cone {
	transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   22. PURCHASE / BID PANEL
   -------------------------------------------------------------------------- */

.knack-artwork-modal__purchase {
	padding-top: var(--knack-space-sm);
	border-top: var(--knack-divider);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.knack-artwork-modal__buy-now {
	display: flex;
	align-items: center;
	gap: 10px;
}

.knack-artwork-modal__buy-now .knack-artwork-modal__collect-btn {
	flex: 1;
}

.knack-artwork-modal__collect-status,
.knack-artwork-modal__bid-status {
	font-size: var(--knack-font-size-xs);
	color: var(--knack-text-muted);
}

.knack-artwork-modal__collect-status--success,
.knack-artwork-modal__bid-status--success {
	color: #22c55e;
}

.knack-artwork-modal__collect-status--error,
.knack-artwork-modal__bid-status--error {
	color: #ef4444;
}

.knack-artwork-modal__bidding {
	background: rgba(0, 0, 0, 0.02);
	border-radius: var(--knack-radius);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.knack-artwork-modal__bid-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.knack-artwork-modal__bid-label {
	font-size: var(--knack-font-size-sm);
	color: var(--knack-text-muted);
}

.knack-artwork-modal__bid-highest {
	font-size: var(--knack-font-size-lg);
	font-weight: 700;
	color: var(--knack-text);
}

.knack-artwork-modal__bid-form {
	display: flex;
	gap: 8px;
}

.knack-artwork-modal__bid-input {
	flex: 1;
	min-width: 0;
}

.knack-artwork-modal__bid-list {
	max-height: 120px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.knack-artwork-modal__bid-list::-webkit-scrollbar {
	display: none;
}

.knack-artwork-modal__bid-entry {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	font-size: var(--knack-font-size-xs);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.knack-artwork-modal__bid-name {
	color: var(--knack-text-muted);
}

.knack-artwork-modal__bid-amount {
	font-weight: 600;
	color: var(--knack-text);
}

/* Dark mode */
body.aoty-dark-mode .knack-artwork-modal__bidding {
	background: rgba(255, 255, 255, 0.04);
}

body.aoty-dark-mode .knack-artwork-modal__bid-entry {
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Auction Timer & Status ───────────────────────────────────── */

.knack-artwork-modal__auction-timer {
	text-align: center;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: var(--knack-radius);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.knack-artwork-modal__auction-countdown {
	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--knack-text);
	line-height: 1.3;
}

.knack-artwork-modal__auction-label {
	font-size: var(--knack-font-size-xs);
	color: var(--knack-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

.knack-artwork-modal__auction-timer--urgent .knack-artwork-modal__auction-countdown {
	color: #dc2626;
	animation: knack-auction-pulse 1.5s ease-in-out infinite;
}

@keyframes knack-auction-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.knack-artwork-modal__auction-ended {
	text-align: center;
	padding: 12px;
}

.knack-artwork-modal__auction-ended-badge {
	display: inline-block;
	padding: 6px 16px;
	background: var(--knack-text);
	color: #fff;
	border-radius: 999px;
	font-size: var(--knack-font-size-sm);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.knack-artwork-modal__auction-winner {
	margin-top: 6px;
	font-size: var(--knack-font-size-sm);
	color: var(--knack-text-muted);
	font-weight: 500;
}

.knack-artwork-modal__bid-entry--winner {
	background: linear-gradient(90deg, rgba(234, 179, 8, 0.10) 0%, transparent 100%);
	border-left: 3px solid #eab308;
	padding-left: 8px;
	border-radius: 2px;
}

.knack-artwork-modal__bid-entry--winner .knack-artwork-modal__bid-name {
	color: var(--knack-text);
	font-weight: 600;
}

.knack-artwork-modal__bid-entry--winner .knack-artwork-modal__bid-amount {
	color: #ca8a04;
	font-weight: 700;
}

.knack-artwork-modal__bid-login {
	text-align: center;
	padding: 8px 0;
}

.knack-artwork-modal__bid-login-link {
	width: 100%;
	justify-content: center;
	gap: 6px;
}

/* Dark mode — auction */
body.aoty-dark-mode .knack-artwork-modal__auction-timer {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-artwork-modal__auction-ended-badge {
	background: #fff;
	color: var(--knack-text);
}

body.aoty-dark-mode .knack-artwork-modal__bid-entry--winner {
	background: linear-gradient(90deg, rgba(234, 179, 8, 0.15) 0%, transparent 100%);
}

/* ── Gallery Cart Badge ───────────────────────────────────────── */

.knack-gallery-cart-btn {
	position: relative;
}

.knack-gallery-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	color: #fff;
	background: #ef4444;
	border-radius: 99px;
	pointer-events: none;
	animation: knack-cart-pop 0.3s ease;
}

@keyframes knack-cart-pop {
	0% { transform: scale(0); }
	60% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* ── Gallery Search Overlay ─────────────────────────────────────── */

.knack-gallery-search {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	transform: translateY(-100%);
	transition: transform 0.25s ease;
}

.knack-gallery-search[aria-hidden="false"] {
	transform: translateY(0);
}

.knack-gallery-search > [data-lucide] {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
}

.knack-gallery-search__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 16px;
	font-family: inherit;
	padding: 4px 0;
}

.knack-gallery-search__input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.knack-gallery-search__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.15s;
}

.knack-gallery-search__close:hover {
	color: #fff;
}

.knack-gallery-search__close [data-lucide] {
	width: 18px;
	height: 18px;
}

/* ── Accessibility Narrator ─────────────────────────────────────── */

.knack-gallery-narrator {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Collection Navigation ──────────────────────────────────────── */

.knack-gallery-collection-nav {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	display: flex;
	gap: 8px;
}

.knack-gallery-collection-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	border-radius: 20px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.knack-gallery-collection-nav__link:hover {
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
}

.knack-gallery-collection-nav__link [data-lucide] {
	width: 14px;
	height: 14px;
}

/* ── Multi-Room Navigation ──────────────────────────────────────── */

.knack-gallery-rooms-nav {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	border-radius: 24px;
}

.knack-gallery-rooms-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.knack-gallery-rooms-nav__label [data-lucide] {
	width: 14px;
	height: 14px;
}

.knack-gallery-rooms-nav__room {
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}

.knack-gallery-rooms-nav__room:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* ── Comparison Overlay ─────────────────────────────────────────── */

.knack-gallery-compare {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: none;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(16px);
}

.knack-gallery-compare[aria-hidden="false"] {
	display: flex;
}

.knack-gallery-compare__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.knack-gallery-compare__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.knack-gallery-compare__header h2 {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.knack-gallery-compare__close {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	transition: background 0.2s, color 0.2s;
}

.knack-gallery-compare__close:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.knack-gallery-compare__close [data-lucide] {
	width: 18px;
	height: 18px;
}

.knack-gallery-compare__panels {
	display: flex;
	flex: 1;
	gap: 0;
	min-height: 0;
}

.knack-gallery-compare__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	min-width: 0;
}

.knack-gallery-compare__divider {
	width: 1px;
	background: rgba(255, 255, 255, 0.15);
	align-self: stretch;
	flex-shrink: 0;
}

.knack-gallery-compare__image {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	width: 100%;
}

.knack-gallery-compare__image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

.knack-gallery-compare__info {
	margin-top: 16px;
	text-align: center;
	flex-shrink: 0;
}

.knack-gallery-compare__info h3 {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 4px;
}

.knack-gallery-compare__info p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	margin: 0;
}

/* ── Embed Code Overlay ─────────────────────────────────────────── */

.knack-gallery-embed {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: none;
	align-items: center;
	justify-content: center;
}

.knack-gallery-embed[aria-hidden="false"] {
	display: flex;
}

.knack-gallery-embed__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
}

.knack-gallery-embed__content {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	max-width: 520px;
	width: 90%;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

.knack-gallery-embed__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--knack-text-muted, #888);
	transition: color 0.15s;
}

.knack-gallery-embed__close:hover {
	color: var(--knack-text, #333);
}

.knack-gallery-embed__close [data-lucide] {
	width: 20px;
	height: 20px;
}

.knack-gallery-embed__content h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--knack-text, #1a1a1a);
}

.knack-gallery-embed__content p {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--knack-text-muted, #666);
}

.knack-gallery-embed__code {
	width: 100%;
	min-height: 80px;
	padding: 12px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 12px;
	color: var(--knack-text, #333);
	resize: none;
	margin-bottom: 16px;
}

.knack-gallery-embed__copy {
	width: 100%;
}

/* Dark mode embed */
body.aoty-dark-mode .knack-gallery-embed__content {
	background: #1e1e1e;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-gallery-embed__code {
	background: #111;
	border-color: rgba(255, 255, 255, 0.1);
	color: #e0e0e0;
}

/* ── Opening Countdown Overlay ──────────────────────────────────── */

.knack-gallery-opening {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.knack-gallery-opening__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.knack-gallery-opening__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	filter: blur(8px);
}

.knack-gallery-opening__content {
	position: relative;
	text-align: center;
	padding: 40px;
	max-width: 600px;
}

.knack-gallery-opening__title {
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.knack-gallery-opening__artist {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 40px;
}

.knack-gallery-opening__countdown {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 32px;
}

.knack-gallery-opening__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.knack-gallery-opening__num {
	font-size: 48px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	min-width: 72px;
	padding: 16px 12px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	font-variant-numeric: tabular-nums;
}

.knack-gallery-opening__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.4);
}

.knack-gallery-opening__status {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

/* ── Artwork Modal — Comments Section ───────────────────────────── */

.knack-artwork-modal__comments {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.knack-artwork-modal__comments h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--knack-text, #1a1a1a);
}

.knack-artwork-modal__comments-list {
	max-height: 200px;
	overflow-y: auto;
	scrollbar-width: thin;
	margin-bottom: 12px;
}

.knack-artwork-modal__comment {
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.knack-artwork-modal__comment:last-child {
	border-bottom: none;
}

.knack-artwork-modal__comment strong {
	font-size: 13px;
	color: var(--knack-text, #1a1a1a);
}

.knack-artwork-modal__comment-date {
	font-size: 11px;
	color: var(--knack-text-muted, #888);
	margin-left: 8px;
}

.knack-artwork-modal__comment p {
	font-size: 13px;
	color: var(--knack-text-secondary, #555);
	margin: 4px 0 0;
	line-height: 1.4;
}

.knack-artwork-modal__comments-empty {
	font-size: 13px;
	color: var(--knack-text-muted, #888);
	font-style: italic;
	padding: 8px 0;
}

.knack-artwork-modal__comment-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.knack-artwork-modal__comment-name {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	background: transparent;
	color: var(--knack-text, #1a1a1a);
}

.knack-artwork-modal__comment-name:focus {
	outline: none;
	border-color: var(--knack-accent, #60335e);
}

.knack-artwork-modal__comment-row {
	display: flex;
	gap: 8px;
}

.knack-artwork-modal__comment-text {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	background: transparent;
	color: var(--knack-text, #1a1a1a);
}

.knack-artwork-modal__comment-text:focus {
	outline: none;
	border-color: var(--knack-accent, #60335e);
}

/* Dark mode comments */
body.aoty-dark-mode .knack-artwork-modal__comments {
	border-top-color: rgba(255, 255, 255, 0.08);
}

body.aoty-dark-mode .knack-artwork-modal__comment {
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.aoty-dark-mode .knack-artwork-modal__comment-name,
body.aoty-dark-mode .knack-artwork-modal__comment-text {
	border-color: rgba(255, 255, 255, 0.12);
}

body.aoty-dark-mode .knack-artwork-modal__comment-name:focus,
body.aoty-dark-mode .knack-artwork-modal__comment-text:focus {
	border-color: var(--knack-accent, #60335e);
}

/* ── Minimap Visitor Dots ───────────────────────────────────────── */

.knack-minimap-visitor-dot {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #3b82f6;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	box-shadow: 0 0 4px rgba(59, 130, 246, 0.6);
	animation: knack-visitor-pulse 2s ease-in-out infinite;
}

@keyframes knack-visitor-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ── Embedded Mode ──────────────────────────────────────────────── */

body.knack-gallery-embedded {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body.knack-gallery-embedded .knack-header,
body.knack-gallery-embedded .knack-side-panel,
body.knack-gallery-embedded .knack-category-bar,
body.knack-gallery-embedded .knack-discovery-nav,
body.knack-gallery-embedded #wpadminbar,
body.knack-gallery-embedded .knack-footer,
body.knack-gallery-embedded .knack-music-player,
body.knack-gallery-embedded .knack-gallery-back {
	display: none !important;
}

body.knack-gallery-embedded .knack-main--gallery-single {
	padding: 0;
	margin: 0;
	max-width: 100%;
}

body.knack-gallery-embedded .knack-gallery-scene {
	height: 100vh;
}

/* ── Section Divider Labels (3D overlay) ────────────────────────── */

.knack-gallery-section-label {
	position: absolute;
	padding: 4px 14px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(6px);
	border-radius: 12px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	pointer-events: none;
	white-space: nowrap;
}

/* ── Audio Guide Icon ───────────────────────────────────────────── */

.knack-gallery-audio-icon {
	position: absolute;
	width: 24px;
	height: 24px;
	color: rgba(255, 255, 255, 0.7);
	pointer-events: none;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
	animation: knack-audio-bob 3s ease-in-out infinite;
}

@keyframes knack-audio-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

/* ── Curator's Pick Indicator ───────────────────────────────────── */

.knack-gallery-curators-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	background: linear-gradient(135deg, #c9a84c 0%, #f0d78c 50%, #c9a84c 100%);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #2a1810;
	pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.knack-gallery-compare__panels {
		flex-direction: column;
	}

	.knack-gallery-compare__divider {
		width: 100%;
		height: 1px;
	}

	.knack-gallery-collection-nav {
		top: auto;
		bottom: 130px;
	}

	.knack-gallery-rooms-nav {
		bottom: 90px;
		max-width: 90%;
		overflow-x: auto;
	}

	.knack-gallery-opening__num {
		font-size: 32px;
		min-width: 56px;
		padding: 12px 8px;
	}

	.knack-gallery-opening__title {
		font-size: 24px;
	}

	.knack-gallery-opening__countdown {
		gap: 12px;
	}
}

/* ================================================================
   #10 — Keyboard Shortcuts Overlay
   ================================================================ */

.knack-gallery-shortcuts {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	backdrop-filter: blur(4px);
}

.knack-gallery-shortcuts--visible {
	opacity: 1;
	pointer-events: auto;
}

.knack-gallery-shortcuts__panel {
	background: #1a1a1a;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 24px 28px;
	min-width: 320px;
	max-width: 400px;
	position: relative;
	color: #fff;
}

.knack-gallery-shortcuts__panel h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.knack-gallery-shortcuts__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	color: #888;
	font-size: 22px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}

.knack-gallery-shortcuts__close:hover { color: #fff; }

.knack-gallery-shortcuts__grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.knack-gallery-shortcuts__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
}

.knack-gallery-shortcuts__row kbd {
	background: #2a2a2a;
	border: 1px solid #444;
	border-radius: 5px;
	padding: 3px 10px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 12px;
	color: #e0e0e0;
	min-width: 60px;
	text-align: center;
}

.knack-gallery-shortcuts__row span {
	font-size: 13px;
	color: #aaa;
}

/* ================================================================
   #11 — Artwork Hover Preview
   ================================================================ */

.knack-gallery-hover-preview {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	text-align: center;
	pointer-events: none;
	z-index: 100;
	backdrop-filter: blur(6px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 300px;
}

.knack-gallery-hover-preview strong {
	font-size: 14px;
	font-weight: 600;
}

.knack-gallery-hover-preview span {
	font-size: 12px;
	color: #bbb;
}

/* ================================================================
   #15 — Mobile 3D Toggle
   ================================================================ */

.knack-gallery-mobile-3d-toggle {
	position: fixed;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	right: 16px;
	z-index: var(--knack-z-overlay, 300);
	min-height: 44px;
	background: var(--knack-accent, #60335e);
	color: #fff;
	border: none;
	border-radius: 24px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s, box-shadow 0.15s;
}

.knack-gallery-mobile-3d-toggle:active {
	transform: scale(0.95);
}

/* When the user has swapped to 3D, lift the toggle even higher so the
   PointerLock + canvas can't accidentally swallow the tap. */
.knack-gallery-immersive .knack-gallery-mobile-3d-toggle {
	z-index: 10000;
}

/* ================================================================
   #19 — Performance Monitor
   ================================================================ */

.knack-gallery-perf {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 10001;
	background: rgba(0, 0, 0, 0.8);
	color: #0f0;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 11px;
	padding: 6px 10px;
	border-radius: 6px;
	display: flex;
	gap: 12px;
	pointer-events: none;
}

/* ================================================================
   #21 — Membership Paywall
   ================================================================ */

.knack-gallery-paywall {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10002;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(8px);
}

.knack-gallery-paywall__card {
	background: #1a1a1a;
	border: 1px solid #333;
	border-radius: 16px;
	padding: 40px 48px;
	text-align: center;
	color: #fff;
	max-width: 400px;
}

.knack-gallery-paywall__card h2 {
	font-size: 24px;
	margin: 0 0 12px;
}

.knack-gallery-paywall__card p {
	color: #aaa;
	font-size: 14px;
	margin: 0 0 24px;
}

.knack-gallery-paywall__btn {
	display: inline-block;
	background: var(--knack-accent, #60335e);
	color: #fff;
	text-decoration: none;
	padding: 12px 32px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: opacity 0.15s;
}

.knack-gallery-paywall__btn:hover {
	opacity: 0.9;
}

/* ================================================================
   #3 — Time of Day Display
   ================================================================ */

.knack-gallery-time-display {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 12px;
	z-index: 100;
	pointer-events: none;
	letter-spacing: 0.04em;
}

/* ================================================================
   #8 — Guestbook Load More
   ================================================================ */

.knack-guestbook-load-more {
	display: block;
	width: 100%;
	padding: 10px;
	margin-top: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ccc;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s;
}

.knack-guestbook-load-more:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* ================================================================
   Mobile Responsive Additions
   ================================================================ */

@media (max-width: 768px) {
	.knack-gallery-shortcuts__panel {
		min-width: 280px;
		padding: 20px;
	}

	.knack-gallery-hover-preview {
		bottom: 100px;
		font-size: 12px;
	}

	.knack-gallery-perf {
		font-size: 9px;
		gap: 6px;
		padding: 4px 6px;
	}
}

/* =============================================================
   Single gallery page — hide site chrome that competes with the room.
   (category bar is hidden server-side via knack_hide_category_bar filter)
   ============================================================= */

body.knack-gallery-single .knack-side-panel,
body.knack-gallery-single .knack-sidebar-toggle,
body.knack-gallery-single .knack-discovery-nav,
body.knack-gallery-single .knack-footer,
body.knack-gallery-single .knack-music-player {
	display: none !important;
}
body.knack-gallery-single #page.knack-site.has-side-panel {
	padding-left: 0 !important;
}

/* Kill the default site content padding so the 3D scene fills the viewport
   edge-to-edge. The theme's global .knack-content-area applies ~xl/2xl
   padding that was leaving a dark band above and below the WebGL canvas. */
body.knack-gallery-single .knack-content-area {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body.knack-gallery-single .knack-content-area > .knack-container,
body.knack-gallery-single .knack-full-width .knack-content-area > .knack-container {
	padding: 0 !important;
	max-width: none !important;
}

/* Pin the header as a clean glass bar above the scene. We need !important /
   high specificity because the side-panel CSS also targets .knack-header--sticky
   with a left offset that would otherwise leave a gap where the scene shows
   through. Solid enough that the scene is clearly BELOW it, not bleeding through. */
body.knack-gallery-single .knack-header,
body.knack-gallery-single .knack-header.knack-header--sticky,
body.knack-gallery-single.has-side-panel .knack-header--sticky,
body.knack-gallery-single.knack-panel-collapsed.has-side-panel .knack-header--sticky {
	position: fixed !important;
	top: var(--knack-admin-bar-offset, 0px) !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	height: var(--knack-header-height);
	z-index: calc(var(--knack-z-overlay) + 20);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(140%) blur(20px);
	-webkit-backdrop-filter: saturate(140%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
body.knack-gallery-single .knack-header-inner {
	max-width: none;
	padding: 0 var(--knack-space-xl);
}
/* Hide the side-panel rail entirely on gallery-single pages — it's redundant
   and only creates a visual gap behind the header. */
body.knack-gallery-single .knack-side-panel {
	display: none !important;
}
body.aoty-dark-mode.knack-gallery-single .knack-header {
	background: rgba(18, 18, 20, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Make the scene fill the viewport BELOW the floating header. The header is
   still fixed, so we pin the scene's top to the header height — this avoids
   the header overlaying the gallery and the gallery hiding behind it.
   When the user enters fullscreen/immersive mode, the body.knack-gallery-
   immersive override below returns the scene to full-viewport. */
html:has(body.knack-gallery-single),
body.knack-gallery-single {
	overflow: hidden !important;
	height: 100vh;
	height: 100dvh;
}
body.knack-gallery-single .knack-main--gallery-single {
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
body.knack-gallery-single .knack-gallery-scene {
	position: fixed;
	top: calc(var(--knack-header-height, 64px) + var(--knack-admin-bar-offset, 0px));
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: calc(100vh - var(--knack-header-height, 64px) - var(--knack-admin-bar-offset, 0px));
	height: calc(100dvh - var(--knack-header-height, 64px) - var(--knack-admin-bar-offset, 0px));
	z-index: 1;
}
body.knack-gallery-immersive .knack-gallery-scene {
	top: 0;
	height: 100vh;
	height: 100dvh;
}

/* =============================================================
   Exhibition threshold — the redesigned pre-entry landing card.
   Replaces the old "Click to Enter Gallery" prompt.
   ============================================================= */

.knack-gallery-threshold {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 40;
	padding: 32px;
	animation: knack-threshold-fade-in 600ms ease-out;
}

@keyframes knack-threshold-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.knack-gallery-threshold__backdrop {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.75) 100%);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
}

.knack-gallery-threshold__inner {
	position: relative;
	max-width: 640px;
	width: 100%;
	padding: 44px 48px 40px;
	border-radius: 24px;
	background: rgba(20, 20, 22, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(24px) saturate(140%);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
	color: #fff;
	text-align: left;
	box-shadow:
		0 40px 80px -20px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	animation: knack-threshold-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes knack-threshold-rise {
	from { opacity: 0; transform: translateY(18px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.knack-gallery-threshold__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 14px;
}

.knack-gallery-threshold__title {
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.knack-gallery-threshold__byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.knack-gallery-threshold__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	object-fit: cover;
}

.knack-gallery-threshold__byline-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.knack-gallery-threshold__byline-label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.55);
}

.knack-gallery-threshold__byline-name {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin-top: 2px;
}

.knack-gallery-threshold__desc {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 22px;
}

.knack-gallery-threshold__marquee {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}

.knack-gallery-threshold__marquee li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.88);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
}

.knack-gallery-threshold__marquee i {
	width: 13px;
	height: 13px;
	opacity: 0.7;
}

.knack-gallery-threshold__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.knack-gallery-threshold__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.knack-gallery-threshold__cta i {
	width: 16px;
	height: 16px;
}

.knack-gallery-threshold__cta--primary {
	background: var(--knack-accent, #60335e);
	color: var(--knack-btn-text, #fff);
	box-shadow: 0 6px 24px -8px rgba(96, 51, 94, 0.7);
}

.knack-gallery-threshold__cta--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 32px -8px rgba(96, 51, 94, 0.8);
}

.knack-gallery-threshold__cta--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.15);
}

.knack-gallery-threshold__cta--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.25);
}

.knack-gallery-threshold__hint {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.52);
	margin: 0;
	letter-spacing: 0.02em;
}

@media (max-width: 640px) {
	.knack-gallery-threshold { padding: 20px; }
	.knack-gallery-threshold__inner { padding: 28px 24px 24px; border-radius: 18px; }
	.knack-gallery-threshold__title { font-size: 26px; }
	.knack-gallery-threshold__actions { flex-direction: column; }
	.knack-gallery-threshold__cta { justify-content: center; }
}

/* =============================================================
   Toolbar clusters — group the dense control bar visually.
   ============================================================= */

.knack-gallery-cluster {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid transparent;
	position: relative;
	flex-shrink: 0;
	transition: background 180ms ease, border-color 180ms ease;
}

.knack-gallery-cluster--move {
	gap: 8px;
}

body.aoty-dark-mode .knack-gallery-cluster {
	background: rgba(255, 255, 255, 0.04);
}

.knack-gallery-cluster + .knack-gallery-cluster::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 22%;
	bottom: 22%;
	width: 1px;
	background: rgba(0, 0, 0, 0.08);
}

body.aoty-dark-mode .knack-gallery-cluster + .knack-gallery-cluster::before {
	background: rgba(255, 255, 255, 0.1);
}

/* Audio-guide active state (when director's commentary is on). */
.knack-gallery-ctrl[data-action="audio-guide"].is-active {
	background: var(--knack-accent, #60335e);
	color: var(--knack-btn-text, #fff);
}

/* =============================================================
   Cinema mode — after idle, fade out chrome. Mouse-move restores.
   ============================================================= */

body.knack-gallery-cinema .knack-gallery-controls,
body.knack-gallery-cinema .knack-gallery-info,
body.knack-gallery-cinema .knack-gallery-back,
body.knack-gallery-cinema .knack-gallery-wall-label,
body.knack-gallery-cinema .knack-gallery-collection-nav,
body.knack-gallery-cinema .knack-gallery-rooms-nav {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease;
}

.knack-gallery-controls,
.knack-gallery-info,
.knack-gallery-back,
.knack-gallery-wall-label {
	transition: opacity 300ms ease;
}

/* Also dim the rest of the site header during cinema. */
body.knack-gallery-cinema.knack-gallery-single .knack-header {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease;
}

/* =============================================================
   Bench dwell mode — peaceful seated viewing.
   ============================================================= */

.knack-gallery-dwell-exit {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 80;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	cursor: pointer;
	animation: knack-dwell-pulse 2.4s ease-in-out infinite;
}

.knack-gallery-dwell-exit i {
	width: 16px;
	height: 16px;
}

body.knack-gallery-dwelling .knack-gallery-dwell-exit {
	display: inline-flex;
}

body.knack-gallery-dwelling .knack-gallery-controls,
body.knack-gallery-dwelling .knack-gallery-wall-label {
	opacity: 0.15;
	pointer-events: none;
}

@keyframes knack-dwell-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.15); }
	50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* =============================================================
   End-of-tour credits card — slow vertical scroll on finish.
   ============================================================= */

.knack-gallery-credits {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	overflow: hidden;
}

.knack-gallery-credits[aria-hidden="false"] {
	display: block;
}

.knack-gallery-credits__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.82);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.knack-gallery-credits__scroll {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
}

.knack-gallery-credits__inner {
	max-width: 560px;
	width: 100%;
	text-align: center;
	color: #fff;
	animation: knack-credits-rise 1400ms cubic-bezier(0.15, 0.8, 0.25, 1);
}

@keyframes knack-credits-rise {
	from { opacity: 0; transform: translateY(60px); }
	to   { opacity: 1; transform: translateY(0); }
}

.knack-gallery-credits__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 16px;
}

.knack-gallery-credits__title {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: #fff;
}

.knack-gallery-credits__thanks {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 36px;
}

.knack-gallery-credits__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 18px;
	text-align: left;
	max-width: 320px;
	margin: 0 auto 40px;
	font-size: 14px;
}

.knack-gallery-credits__list dt {
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	font-weight: 600;
	padding-top: 3px;
}

.knack-gallery-credits__list dd {
	margin: 0;
	color: #fff;
	font-weight: 500;
}

.knack-gallery-credits__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* =============================================================
   Departure ritual — triggered when clicking "All Galleries".
   ============================================================= */

.knack-gallery-departure {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: none;
}

.knack-gallery-departure[aria-hidden="false"] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	animation: knack-threshold-fade-in 300ms ease-out;
}

.knack-gallery-departure__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.knack-gallery-departure__card {
	position: relative;
	max-width: 500px;
	width: 100%;
	padding: 38px 40px 32px;
	border-radius: 20px;
	background: rgba(24, 24, 26, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	color: #fff;
	text-align: center;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
	animation: knack-threshold-rise 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.knack-gallery-departure__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

.knack-gallery-departure__close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.knack-gallery-departure__close i {
	width: 18px;
	height: 18px;
}

.knack-gallery-departure__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 12px;
}

.knack-gallery-departure__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	color: #fff;
}

.knack-gallery-departure__subtitle {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 26px;
}

.knack-gallery-departure__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0 0 28px;
	padding: 16px 8px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.knack-gallery-departure__stats > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.knack-gallery-departure__stats span {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.knack-gallery-departure__stats small {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.55);
}

.knack-gallery-departure__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.knack-gallery-departure__actions .knack-btn {
	width: 100%;
	justify-content: center;
}

@media (max-width: 520px) {
	.knack-gallery-departure__card { padding: 28px 22px 22px; }
}

/* =============================================================
   Favorite flash — L key hearts the currently-gazed artwork.
   ============================================================= */

.knack-gallery-heart-flash {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 200;
	color: #ff3366;
	opacity: 0;
	animation: knack-heart-burst 900ms ease-out forwards;
}

.knack-gallery-heart-flash svg {
	width: 88px;
	height: 88px;
	filter: drop-shadow(0 4px 16px rgba(255, 51, 102, 0.5));
}

@keyframes knack-heart-burst {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
	30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
	60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

/* ───────────────────────────────────────────────────────────────────
   Accessible 2D fallback — shown when WebGL is unavailable or when
   the URL explicitly requests ?accessible=1
   ─────────────────────────────────────────────────────────────────── */
.knack-gallery-fallback {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px;
}
.knack-gallery-fallback__intro {
	font-size: 14px;
	color: var(--knack-text-muted, #6b7280);
	margin: 0 0 16px;
}
.knack-gallery-fallback__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}
.knack-gallery-fallback__item figure {
	margin: 0;
	background: #fff;
	border: 1px solid var(--knack-border, #e5e7eb);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.knack-gallery-fallback__item img {
	width: 100%;
	height: auto;
	display: block;
	background: #f3f4f6;
}
.knack-gallery-fallback__item figcaption {
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.45;
}
.knack-gallery-fallback__item figcaption strong { font-weight: 700; }
.knack-gallery-fallback__item figcaption em { color: var(--knack-text-muted, #6b7280); font-style: italic; }
.knack-gallery-fallback__item figcaption small { color: var(--knack-text-muted, #6b7280); }
.knack-gallery-fallback__item figcaption p {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--knack-text, #1f2937);
}

/* Empty-state notice for galleries with no artworks placed yet. */
.knack-gallery-empty-state {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 50;
	pointer-events: none;
	max-width: 420px;
	width: calc(100% - 32px);
}
.knack-gallery-empty-state__inner {
	pointer-events: auto;
	text-align: center;
	padding: 28px 24px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	color: #1f2937;
}
.knack-gallery-empty-state__inner svg {
	color: var(--knack-accent, #60335e);
	margin-bottom: 8px;
}
.knack-gallery-empty-state__inner h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
}
.knack-gallery-empty-state__inner p {
	margin: 0;
	font-size: 13.5px;
	color: #6b7280;
	line-height: 1.5;
}

/* Artwork report overlay. */
.knack-gallery-report {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.knack-gallery-report__panel {
	background: #fff;
	color: #1f2937;
	border-radius: 14px;
	max-width: 440px;
	width: 100%;
	padding: 24px;
	position: relative;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.knack-gallery-report__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 22px;
	color: #6b7280;
	cursor: pointer;
	line-height: 1;
}
.knack-gallery-report h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.knack-gallery-report p { margin: 0 0 16px; font-size: 13px; color: #6b7280; }
.knack-gallery-report label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 12px;
}
.knack-gallery-report select,
.knack-gallery-report textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	font: inherit;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
}
.knack-gallery-report textarea { resize: vertical; }
.knack-gallery-report__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 8px;
}
.knack-gallery-report__msg {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--knack-accent, #60335e);
	min-height: 16px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Gallery card — "Framed Artwork" variant
   The card looks like a piece hanging on a wall: outer dark frame, a thick
   cream matte, brass pins in each corner, then a museum plaque underneath.
   Mirrors the ticket motif used for events; every content type gets a
   distinctive physical metaphor.
   ────────────────────────────────────────────────────────────────────────── */
.knack-gallery-card.knack-gallery-card--framed {
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	transform: none;
	border-radius: 0;
	padding: 18px 4px 0;
	color: var(--knack-text, #1f2328);
}

.knack-gallery-card--framed .knack-gallery-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	transform: translateY(0);
	transition: transform .25s ease;
}
.knack-gallery-card--framed:hover .knack-gallery-card__link {
	transform: translateY(-4px);
}

/* The hanging wire above the frame */
.knack-gallery-card--framed .knack-gallery-card__wire {
	display: block;
	width: 60%;
	height: 14px;
	margin: 0 auto -8px;
	color: rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

/* Outer frame — slim graphite, sits like a real picture frame on a white wall.
   Reads as a hairline border + soft drop shadow rather than heavy wood. */
.knack-gallery-card--framed .knack-gallery-card__frame {
	position: relative;
	background: #1f2328;
	border-radius: 6px;
	padding: 6px;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.06),
		0 12px 24px -10px rgba(15, 23, 42, 0.18),
		0 3px 8px -4px rgba(15, 23, 42, 0.12);
	transition: box-shadow .25s ease, transform .25s ease;
}
.knack-gallery-card--framed:hover .knack-gallery-card__frame {
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.08),
		0 20px 36px -10px rgba(15, 23, 42, 0.24),
		0 6px 12px -4px rgba(15, 23, 42, 0.16);
}

/* Matte — clean white paper, blends with the rest of the page. */
.knack-gallery-card--framed .knack-gallery-card__matte {
	position: relative;
	background: var(--knack-bg, #ffffff);
	padding: 14px;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Subtle accent dots in the matte corners — read as mounting points without
   competing with the artwork. Theme accent at low alpha so they belong here. */
.knack-gallery-card--framed .knack-gallery-card__pin {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--knack-accent, #60335e) 70%, transparent);
	pointer-events: none;
}
.knack-gallery-card--framed .knack-gallery-card__pin--tl { top: 6px;    left: 6px; }
.knack-gallery-card--framed .knack-gallery-card__pin--tr { top: 6px;    right: 6px; }
.knack-gallery-card--framed .knack-gallery-card__pin--bl { bottom: 6px; left: 6px; }
.knack-gallery-card--framed .knack-gallery-card__pin--br { bottom: 6px; right: 6px; }

/* Inner artwork preview */
.knack-gallery-card--framed .knack-gallery-card__preview {
	position: relative;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	border-radius: 1px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Museum plaque — clean white card, hairline border, accent purple title. */
.knack-gallery-card--framed .knack-gallery-card__plaque {
	position: relative;
	margin: 12px 16px 0;
	padding: 14px 18px 16px;
	background: var(--knack-bg, #ffffff);
	border: 1px solid var(--knack-border, rgba(15, 23, 42, 0.08));
	border-radius: 8px;
	color: var(--knack-text, #1f2328);
	font-family: var(--knack-font-body, system-ui, sans-serif);
	box-shadow: 0 4px 10px -8px rgba(15, 23, 42, 0.18);
}

.knack-gallery-card--framed .knack-gallery-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--knack-text, #1f2328);
	text-align: center;
}

.knack-gallery-card--framed .knack-gallery-card__plaque-rule {
	display: block;
	width: 28px;
	height: 1px;
	margin: 8px auto;
	background: var(--knack-accent, #60335e);
	opacity: 0.6;
}

.knack-gallery-card--framed .knack-gallery-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: var(--knack-text-muted, rgba(15, 23, 42, 0.6));
}
.knack-gallery-card--framed .knack-gallery-card__artist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-weight: 500;
}
.knack-gallery-card--framed .knack-gallery-card__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.knack-gallery-card--framed .knack-gallery-card__artist span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.knack-gallery-card--framed .knack-gallery-card__count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.knack-gallery-card--framed .knack-gallery-card__count [data-lucide] {
	width: 13px;
	height: 13px;
}

.knack-gallery-card--framed .knack-gallery-card__enter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--knack-border, rgba(15, 23, 42, 0.08));
	color: var(--knack-accent, #60335e);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: gap .2s ease;
}
.knack-gallery-card--framed:hover .knack-gallery-card__enter {
	gap: 10px;
}
.knack-gallery-card--framed .knack-gallery-card__enter [data-lucide] {
	width: 14px;
	height: 14px;
}

/* Dark mode — keep the frame, drop the inner chrome.
   Light mode layers `frame` (graphite slab) over `matte` (cream paper)
   over `preview` (cream gallery wall): three surfaces that together
   read as a framed piece on a museum wall. On a dark page two of
   those layers collide visually — the matte slab and the cream-tinted
   preview rectangle render as a "background behind the frame" with
   no purpose. So we keep the FRAME (the graphite picture frame is
   the whole point of this card variant) but flatten everything inside
   it: the matte becomes a transparent 14px spacer, the preview's
   wall_color is overridden so the artwork sits directly on the frame's
   graphite, and the corner pins stay as decorative brass accents. */
body.aoty-dark-mode .knack-gallery-card--framed .knack-gallery-card__frame {
	/* Frame needs LOTS of contrast against body bg `#111111` to read
	   as a real picture frame — light mode gets ~87% luminance step
	   (graphite #1f2328 on white). `#3a3a3a` + a clear hairline ring
	   gives a comparable visual presence in dark mode. */
	background: #3a3a3a;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.22),
		0 12px 24px -10px rgba(0, 0, 0, 0.65),
		0 3px 8px -4px rgba(0, 0, 0, 0.5);
}
body.aoty-dark-mode .knack-gallery-card--framed:hover .knack-gallery-card__frame {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.32),
		0 20px 36px -10px rgba(0, 0, 0, 0.75),
		0 6px 12px -4px rgba(0, 0, 0, 0.55);
}
body.aoty-dark-mode .knack-gallery-card--framed .knack-gallery-card__matte {
	/* Matte is a stepped surface BETWEEN the body bg and the frame:
	   - body  #111111  (darkest, page)
	   - matte #1a1a1a  (`--knack-surface`, the "paper inside the frame")
	   - frame #2a2a2a  (lightest, the graphite picture frame)
	   This mirrors the light-mode layering (white wall ⇢ paper matte
	   ⇢ graphite frame) just inverted in luminance, so visitors see a
	   real "picture in a frame" not a hollow window. */
	background: var(--knack-surface, #1a1a1a);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body.aoty-dark-mode .knack-gallery-card--framed .knack-gallery-card__plaque {
	background: var(--knack-surface, #1a1d23);
	border-color: rgba(255, 255, 255, 0.08);
}
body.aoty-dark-mode .knack-gallery-card--framed .knack-gallery-card__wire {
	color: rgba(255, 255, 255, 0.18);
}

/* Wall preview — `__preview` carries the gallery's `wall_color` meta
   as an inline `background-color` (default cream `#f5f0eb`). In dark
   mode we want the artwork (mini-thumbnails / hero image) to sit
   directly on the frame's graphite rather than on a separate cream
   slab inside the frame, so we override the inline color to
   transparent. The thumbnails and badges stay bright since they're
   separate child elements with their own backgrounds. */
body.aoty-dark-mode .knack-gallery-card--framed .knack-gallery-card__preview {
	background-color: transparent !important;
	box-shadow: none;
}

/* The `__overlay` in light mode is a 180deg gradient that darkens the
   bottom of the cream wall (transparent → 50% black) so the layout
   badge stays readable on bright cream. In dark mode the matte is
   already dark, so a dark-bottom gradient would just bake a black
   band in — instead we INVERT it: a faint highlight at the top
   (transparent → tiny white) gives the matte the same subtle "lit
   from above" depth cue light mode gets, mirroring the look. */
body.aoty-dark-mode .knack-gallery-card--framed .knack-gallery-card__overlay {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.04) 0%,
		transparent 60%
	);
}