/* Swipe gallery 2026-08-03
 *
 * Styles the PhotoSwipe caption bar (title / price / buy) and gives the grid
 * cards a tap affordance. Scoped to .pswp and .nh-swipe-gallery-active only —
 * nothing here touches the existing page or the Mobile quick-wins block.
 */

/* --- Grid affordance ---------------------------------------------------- */

.nh-swipe-gallery-active li.product:not(.product-category) img,
.nh-swipe-gallery-active li.wc-block-product img {
	cursor: zoom-in;
}

/* --- Lightbox chrome ---------------------------------------------------- */

/* The site already carries a global inline stylesheet that paints PhotoSwipe
   cream — it exists for WooCommerce's v4 lightbox on single-product zoom and
   uses !important throughout. Everything below is scoped to .nh-pswp (our
   root class) so this gallery reads dark while that product zoom is left
   exactly as it was. The doubled .pswp.nh-pswp raises specificity above it. */

.pswp.nh-pswp {
	--pswp-bg: #0d0d0d;
	--pswp-placeholder-bg: #1c1c1c;
}

.pswp.nh-pswp .pswp__bg {
	background-color: #0d0d0d !important;
}

.pswp.nh-pswp .pswp__top-bar {
	background-color: transparent !important;
}

.pswp.nh-pswp .pswp__button {
	color: #fff !important;
}

.pswp.nh-pswp .pswp__button svg,
.pswp.nh-pswp .pswp__button--close svg,
.pswp.nh-pswp .pswp__button--zoom svg,
.pswp.nh-pswp .pswp__button--arrow svg {
	fill: #fff !important;
}

.pswp.nh-pswp .pswp__counter {
	color: #fff !important;
	opacity: 0.85;
}

/* --- Caption bar -------------------------------------------------------- */

.pswp.nh-pswp .nh-pswp-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	padding: 2.25em 1.25em calc(1.1em + env(safe-area-inset-bottom, 0px));
	text-align: center;
	color: #fff;
	/* Solid behind the text, fading only above it — titles wrap to two lines
	   over pale paintings and must stay legible. */
	background: linear-gradient(to top, #0d0d0d 0%, rgba(13, 13, 13, 0.95) 62%, rgba(13, 13, 13, 0));
	pointer-events: auto;
}

.pswp.nh-pswp .nh-pswp-caption:empty {
	display: none;
}

.pswp.nh-pswp .nh-pswp-caption__title {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.3;
	color: #fff !important;
	/* Bound the bar's height so it can never grow past the reserved padding. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pswp.nh-pswp .nh-pswp-caption__price {
	margin: 0;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.9rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.78) !important;
}

.pswp.nh-pswp .nh-pswp-caption__price del {
	opacity: 0.6;
}

.pswp.nh-pswp .nh-pswp-caption__price ins {
	text-decoration: none;
}

.pswp.nh-pswp .nh-pswp-caption__buy {
	display: inline-block;
	margin-top: 0.35em;
	padding: 0.6em 1.5em;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: #111 !important;
	background: #fff;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pswp.nh-pswp .nh-pswp-caption__buy:hover,
.pswp.nh-pswp .nh-pswp-caption__buy:focus {
	background: #e6e6e6;
	color: #000;
}

.pswp.nh-pswp .nh-pswp-caption__buy:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Desktop: keep the bar from stretching across very wide screens. */
@media only screen and (min-width: 782px) {
	.pswp.nh-pswp .nh-pswp-caption {
		gap: 0.5em;
		padding-bottom: 1.4em;
	}

	.pswp.nh-pswp .nh-pswp-caption__title {
		font-size: 1.35rem;
	}
}