/**
 * Warehouse Listings Manager — frontend styles.
 *
 * Built to sit naturally inside "The Warehouse of Hudson, NY" site:
 *   - Headings: "Ivypresto Display" (serif display face used by the theme)
 *   - Body copy: "League Spartan" (the theme's body/UI face)
 *   - Warm off-white section background, near-black text, outlined
 *     black buttons matching the existing "Tenants Directory" /
 *     "Rental Inquiries" buttons on the site.
 *
 * All values are exposed as CSS custom properties on .wlm-listing /
 * .wlm-listings-grid so a developer can fine-tune the match to pixel
 * values pulled from the live theme without touching selectors.
 * Every class is prefixed `wlm-` to avoid colliding with theme/page
 * builder styles.
 */

.wlm-listing,
.wlm-listings-grid,
.wlm-lightbox,
.wlm-floorplan-modal {
	--wlm-color-text: rgb( 60, 60, 60 );
	--wlm-color-heading: #1a1a1a;
	--wlm-color-eyebrow: #816855;
	--wlm-color-border: #1a1a1a;
	--wlm-color-bg: #ffffff;
	--wlm-color-bg-muted: #f5f3ee;
	--wlm-color-focus: #1a56db;
	--wlm-font-heading: "Ivypresto Display", Georgia, "Times New Roman", serif;
	--wlm-font-body: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wlm-container-width: 1240px;
	--wlm-gutter: 24px;
	--wlm-radius: 2px;
	--wlm-radius-lg: 6px;
	--wlm-color-bg-card: #ffffff;
	--wlm-color-divider: #e4e1d9;
	--wlm-shadow-card: 0 1px 2px rgba( 26, 26, 26, 0.04 ), 0 8px 24px rgba( 26, 26, 26, 0.06 );
	--wlm-shadow-card-hover: 0 4px 10px rgba( 26, 26, 26, 0.07 ), 0 16px 32px rgba( 26, 26, 26, 0.09 );
}

/* ------------------------------------------------------------------ *
 *  Reset / base
 * ------------------------------------------------------------------ */

.wlm-listing,
.wlm-listing *,
.wlm-listings-grid,
.wlm-listings-grid *,
.wlm-lightbox,
.wlm-lightbox *,
.wlm-floorplan-modal,
.wlm-floorplan-modal * {
	box-sizing: border-box;
}

.wlm-container {
	max-width: var( --wlm-container-width );
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --wlm-gutter );
	padding-right: var( --wlm-gutter );
}

.wlm-listing {
	font-family: var( --wlm-font-body );
	color: var( --wlm-color-text );
	max-width: var( --wlm-container-width );
	margin: 0 auto;
	padding: 48px var( --wlm-gutter ) 80px;
}

.wlm-listing img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wlm-section-heading {
	font-family: var( --wlm-font-heading );
	font-weight: 400;
	color: var( --wlm-color-heading );
	font-size: 28px;
	line-height: 1.25;
	margin: 0 0 20px;
}

.wlm-section-heading--compact {
	font-size: 20px;
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------ *
 *  Title band: a full-bleed, centered banner for the listing title —
 *  echoes the site's existing page-title banners elsewhere on the
 *  site. Breaks out of the normal content column on purpose; adjust
 *  or remove the full-bleed rule below if a given theme/page builder
 *  ever needs the title to stay inside the column instead.
 * ------------------------------------------------------------------ */

.wlm-title-band {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 40px;
	padding: 56px var( --wlm-gutter );
	background: var( --wlm-color-bg-muted );
	text-align: center;
}

.wlm-title-band__inner {
	max-width: 780px;
	margin: 0 auto;
}

.wlm-title-band .wlm-eyebrow,
.wlm-title-band .wlm-listing__address {
	justify-content: center;
}

/* ------------------------------------------------------------------ *
 *  Box row: floor plan (left box) + photo carousel (right box)
 * ------------------------------------------------------------------ */

.wlm-box-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-bottom: 40px;
}

.wlm-box-row--single {
	grid-template-columns: 1fr;
}

.wlm-box {
	background: var( --wlm-color-bg-muted );
	border-radius: var( --wlm-radius-lg );
	padding: 28px;
}

.wlm-box--gallery {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Photo carousel (inside the gallery box) */

.wlm-carousel {
	position: relative;
}

.wlm-carousel__viewport {
	position: relative;
	overflow: hidden;
	background: var( --wlm-color-bg-card );
	border-radius: var( --wlm-radius-lg );
	box-shadow: var( --wlm-shadow-card );
}

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

.wlm-carousel__slide {
	margin: 0;
}

.wlm-carousel__image-button {
	display: block;
	width: 100%;
	padding: 0;
	/* !important: some themes apply a global "button, [type=button]" reset
	   (their own accent-colored outline button) that ties in specificity
	   with a single class selector; without !important, load order can
	   let that theme rule win here instead of ours. */
	border: 0 !important;
	background: none !important;
	cursor: zoom-in;
	line-height: 0;
}

.wlm-carousel__image-button:focus-visible {
	outline: 2px solid var( --wlm-color-focus );
	outline-offset: -2px;
}

.wlm-carousel__image-button:hover,
.wlm-carousel__image-button:focus-visible {
	/* !important: overrides a theme "button:hover" reset that otherwise
	   fills the background pink — see note on .wlm-carousel__nav above. */
	background: none !important;
}

.wlm-carousel__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wlm-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 1px solid var( --wlm-color-border ) !important;
	background: rgba( 255, 255, 255, 0.92 ) !important;
	color: var( --wlm-color-heading ) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.wlm-carousel__nav:hover,
.wlm-carousel__nav:focus-visible {
	/* !important: a theme "button:hover" reset (see notes above) fills
	   the background pink and turns the text white on hover/focus unless
	   we outrank it here too, not just on the resting state. */
	background: var( --wlm-color-heading ) !important;
	color: #fff !important;
	outline: none;
}

.wlm-carousel__nav--prev {
	left: 12px;
}

.wlm-carousel__nav--next {
	right: 12px;
}

.wlm-carousel__counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	margin: 12px 0 0;
	color: var( --wlm-color-text );
}

.wlm-carousel__counter .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	opacity: 0.6;
}

.wlm-carousel__thumbs {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
	padding: 2px 2px 4px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.wlm-carousel__thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 46px;
	padding: 0;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 2px solid transparent !important;
	border-radius: 4px;
	overflow: hidden;
	background: var( --wlm-color-bg-card ) !important;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.wlm-carousel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wlm-carousel__thumb:hover,
.wlm-carousel__thumb:focus-visible {
	opacity: 1;
	/* !important: overrides a theme "button:hover" reset that otherwise
	   fills the background pink — see note on .wlm-carousel__nav above. */
	background: var( --wlm-color-bg-card ) !important;
}

.wlm-carousel__thumb.is-active {
	opacity: 1;
	border-color: var( --wlm-color-heading ) !important;
}

/* Floor plan box: PDF preview on top, title/description/button below */

.wlm-floorplan-box__preview {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 0 !important;
	color: var( --wlm-color-heading ) !important;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var( --wlm-radius-lg );
	background: var( --wlm-color-bg-card ) !important;
	box-shadow: var( --wlm-shadow-card );
	margin-bottom: 20px;
	transition: box-shadow 0.2s ease;
}

.wlm-floorplan-box__preview:hover,
.wlm-floorplan-box__preview:focus-visible {
	box-shadow: var( --wlm-shadow-card-hover );
	/* !important: overrides a theme "button:hover" reset that otherwise
	   fills the background pink — see note on .wlm-carousel__nav above. */
	background: var( --wlm-color-bg-card ) !important;
}

.wlm-floorplan-box__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

.wlm-floorplan-box__text .wlm-section-heading {
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ *
 *  Listing title / property name / address (used inside the title band)
 * ------------------------------------------------------------------ */

.wlm-eyebrow {
	font-family: var( --wlm-font-heading );
	font-style: normal;
	color: var( --wlm-color-eyebrow );
	font-size: 16px;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
}

.wlm-listing__title {
	font-family: var( --wlm-font-heading );
	font-weight: 400;
	color: var( --wlm-color-heading );
	font-size: clamp( 32px, 4vw, 52px );
	line-height: 1.1;
	margin: 0 0 8px;
}

.wlm-listing__property-name {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 16px;
	color: var( --wlm-color-text );
	margin: 0 0 8px;
	opacity: 0.8;
}

.wlm-listing__address {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
	color: var( --wlm-color-text );
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.wlm-listing__address {
	transition: opacity 0.15s ease;
}

.wlm-listing__address:hover,
.wlm-listing__address:focus-visible {
	opacity: 0.7;
}

.wlm-listing__address .dashicons {
	color: var( --wlm-color-eyebrow );
}

/* ------------------------------------------------------------------ *
 *  Breadcrumb ("← All Listings")
 * ------------------------------------------------------------------ */

.wlm-breadcrumb {
	margin-bottom: 20px;
}

.wlm-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wlm-color-text );
	text-decoration: none;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.wlm-breadcrumb a:hover,
.wlm-breadcrumb a:focus-visible {
	opacity: 1;
}

.wlm-breadcrumb .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ *
 *  Stat strip (square footage / type / lease / price, at a glance)
 * ------------------------------------------------------------------ */

.wlm-stat-strip {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 40px;
	padding: 0;
	border: 1px solid var( --wlm-color-divider );
	border-radius: var( --wlm-radius-lg );
	background: var( --wlm-color-bg-card );
	overflow: hidden;
}

.wlm-stat-strip__item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 200px;
	padding: 18px 24px;
	border-right: 1px solid var( --wlm-color-divider );
	border-bottom: 1px solid var( --wlm-color-divider );
}

.wlm-stat-strip__item:last-child {
	border-right: 0;
}

.wlm-stat-strip .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
	color: var( --wlm-color-eyebrow );
	flex-shrink: 0;
}

.wlm-stat-strip__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wlm-stat-strip__value {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var( --wlm-color-heading );
	overflow-wrap: break-word;
}

.wlm-stat-strip__label {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wlm-color-text );
	opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 *  Floor plan box: placeholder state + zoom badge + description text
 *  (the preview/image/text wrapper rules live with the box-row above)
 * ------------------------------------------------------------------ */

.wlm-floorplan__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	color: var( --wlm-color-text );
}

.wlm-floorplan__placeholder .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
	opacity: 0.5;
}

.wlm-floorplan__placeholder-filename {
	font-size: 13px;
	word-break: break-all;
	opacity: 0.7;
}

.wlm-floorplan__zoom-badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var( --wlm-color-border );
	display: flex;
	align-items: center;
	justify-content: center;
}

.wlm-floorplan__zoom-badge .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var( --wlm-color-heading );
}

.wlm-floorplan-box__preview:hover .wlm-floorplan__zoom-badge,
.wlm-floorplan-box__preview:focus-visible .wlm-floorplan__zoom-badge {
	background: var( --wlm-color-heading );
	color: #fff;
}

.wlm-floorplan__description {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
	opacity: 0.8;
}

/* ------------------------------------------------------------------ *
 *  Content row: main column (description/features) + sticky sidebar
 * ------------------------------------------------------------------ */

.wlm-content-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 360px;
	gap: 56px;
	align-items: start;
}

.wlm-content-row--sidebar-only {
	grid-template-columns: minmax( 0, 420px );
	justify-content: flex-start;
}

.wlm-content-main {
	min-width: 0;
}

.wlm-sidebar {
	min-width: 0;
}

.wlm-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 32px;
}

.wlm-sidebar-card {
	background: var( --wlm-color-bg-card );
	border: 1px solid var( --wlm-color-divider );
	border-radius: var( --wlm-radius-lg );
	box-shadow: var( --wlm-shadow-card );
	padding: 28px;
}

.wlm-sidebar-card__heading {
	font-family: var( --wlm-font-heading );
	font-weight: 400;
	font-size: 20px;
	color: var( --wlm-color-heading );
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --wlm-color-divider );
}

/* "Key Property Details" card (main column) */

.wlm-pricing-card {
	margin-bottom: 48px;
}

.wlm-pricing-card .wlm-section-heading {
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var( --wlm-color-divider );
}

/* Key Property Details */

.wlm-details-list {
	margin: 0;
}

.wlm-details-list__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var( --wlm-color-divider );
}

.wlm-details-list__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wlm-details-list__row:first-child {
	padding-top: 0;
}

.wlm-details-list dt {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --wlm-color-text );
	opacity: 0.6;
	flex-shrink: 0;
}

.wlm-details-list dd {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: var( --wlm-color-heading );
	margin: 0;
	text-align: right;
}

/* ------------------------------------------------------------------ *
 *  Description / Additional details
 * ------------------------------------------------------------------ */

.wlm-description,
.wlm-additional-details {
	margin-bottom: 48px;
}

.wlm-content-main .wlm-description:last-child,
.wlm-content-main .wlm-additional-details:last-child {
	margin-bottom: 0;
}

.wlm-description__content {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
	color: var( --wlm-color-text );
}

.wlm-description__content p {
	margin: 0 0 18px;
}

.wlm-description__content p:last-child {
	margin-bottom: 0;
}

/* A quiet, premium touch on the opening paragraph. */
.wlm-description__content > p:first-of-type::first-letter {
	font-family: var( --wlm-font-heading );
	font-size: 3.4em;
	line-height: 0.8;
	font-weight: 400;
	float: left;
	padding: 4px 10px 0 0;
	color: var( --wlm-color-heading );
}

/* Additional details, rendered as a checklist */

.wlm-features-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* auto-fit (not auto-fill): when there are fewer items than would fill
	   a row, the unused column tracks collapse instead of sitting empty,
	   so a single long item stretches to use the full card width rather
	   than being stuck in one narrow column with dead space beside it. */
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 12px 24px;
}

.wlm-features-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: var( --wlm-color-text );
}

.wlm-features-list .dashicons {
	color: var( --wlm-color-eyebrow );
	font-size: 20px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Additional Property Details, nested inside the Key Property Details card */

.wlm-additional-details--in-card {
	margin-top: 24px;
	margin-bottom: 0;
	padding-top: 24px;
	border-top: 1px solid var( --wlm-color-divider );
}

.wlm-additional-details__heading {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --wlm-color-text );
	opacity: 0.6;
	margin: 0 0 16px;
}

/* Rent, nested inside the Key Property Details card, directly below
   Additional Property Details. */

.wlm-rent-details--in-card {
	margin-top: 24px;
	margin-bottom: 0;
	padding-top: 24px;
	border-top: 1px solid var( --wlm-color-divider );
}

.wlm-rent-details__heading {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --wlm-color-text );
	opacity: 0.6;
	margin: 0 0 12px;
}

.wlm-rent-details__price {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: var( --wlm-color-heading );
	margin: 0 0 12px;
}

.wlm-rent-terms-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wlm-rent-terms-list li {
	position: relative;
	padding-left: 18px;
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	color: var( --wlm-color-text );
}

.wlm-rent-terms-list li::before {
	content: "\2022";
	position: absolute;
	left: 2px;
	color: var( --wlm-color-eyebrow );
}

.wlm-rent-details__footnote {
	font-family: var( --wlm-font-body );
	font-weight: 400;
	font-style: italic;
	font-size: 13px;
	line-height: 1.5;
	color: var( --wlm-color-text );
	opacity: 0.75;
	margin: 12px 0 0;
}

/* ------------------------------------------------------------------ *
 *  CTA
 * ------------------------------------------------------------------ */

.wlm-cta {
	text-align: center;
}

.wlm-cta .wlm-section-heading {
	font-size: 20px;
	margin-bottom: 10px;
}

.wlm-cta p {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px;
	opacity: 0.85;
}

.wlm-cta .wlm-btn {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 *  Buttons (match the site's outlined black buttons)
 * ------------------------------------------------------------------ */

.wlm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	padding: 16px 28px;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. Only matters for wlm-btn instances
	   that render as <button> (the floor plan trigger); <a>-based buttons
	   aren't targeted by that theme rule but the !important is harmless. */
	border: 1px solid var( --wlm-color-border ) !important;
	border-radius: var( --wlm-radius );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	/* Guards long text (e.g. an email address used as the CTA label)
	   from overflowing the button instead of wrapping onto a new line. */
	overflow-wrap: anywhere;
	text-align: center;
}

.wlm-btn--sm {
	padding: 9px 18px;
	font-size: 13px;
}

.wlm-btn--outline {
	background: #ffffff !important;
	color: var( --wlm-color-heading ) !important;
}

.wlm-btn--outline:hover,
.wlm-btn--outline:focus-visible {
	/* !important: overrides a theme "button:hover" reset that otherwise
	   fills the background pink and forces its own text color — see note
	   on .wlm-carousel__nav above. */
	background: var( --wlm-color-heading ) !important;
	color: #ffffff !important;
	outline: none;
}

.wlm-btn--solid {
	background: var( --wlm-color-heading );
	color: #ffffff;
}

.wlm-btn--solid:hover,
.wlm-btn--solid:focus-visible {
	background: #ffffff;
	color: var( --wlm-color-heading );
	outline: none;
}

/* Focus visibility across the whole component, in case a theme resets it */

.wlm-listing a:focus-visible,
.wlm-listing button:focus-visible,
.wlm-listings-grid a:focus-visible,
.wlm-listings-grid button:focus-visible {
	outline: 2px solid var( --wlm-color-focus );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 *  Listings grid ( [warehouse_listings] )
 * ------------------------------------------------------------------ */

.wlm-listings-grid {
	display: grid;
	grid-template-columns: repeat( var( --wlm-columns, 3 ), 1fr );
	gap: 40px;
	font-family: var( --wlm-font-body );
	max-width: var( --wlm-container-width );
	margin: 0 auto;
	padding: 0 var( --wlm-gutter );
}

.wlm-listings-grid[ data-columns='1' ] {
	--wlm-columns: 1;
}
.wlm-listings-grid[ data-columns='2' ] {
	--wlm-columns: 2;
}
.wlm-listings-grid[ data-columns='3' ] {
	--wlm-columns: 3;
}
.wlm-listings-grid[ data-columns='4' ] {
	--wlm-columns: 4;
}

.wlm-no-listings {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
	color: var( --wlm-color-text );
	text-align: center;
	padding: 48px var( --wlm-gutter );
}

.wlm-card {
	border: 1px solid #e4e1d9;
	background: #fff;
}

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

.wlm-card__image-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var( --wlm-color-bg-muted );
}

.wlm-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.wlm-card__link:hover .wlm-card__image {
	transform: scale( 1.03 );
}

.wlm-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: var( --wlm-color-bg-muted );
}

.wlm-card__body {
	padding: 20px;
}

.wlm-card__title {
	font-family: var( --wlm-font-heading );
	font-weight: 400;
	font-size: 22px;
	color: var( --wlm-color-heading );
	margin: 0 0 6px;
}

.wlm-card__address {
	font-weight: 700;
	font-size: 14px;
	margin: 0 0 4px;
	opacity: 0.8;
}

.wlm-card__sqft {
	font-weight: 700;
	font-size: 14px;
	color: var( --wlm-color-eyebrow );
	margin: 0 0 10px;
}

.wlm-card__excerpt {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.wlm-card__button {
	padding: 10px 20px;
	font-size: 13px;
}

/* ------------------------------------------------------------------ *
 *  Lightbox (enlarged photo viewer)
 * ------------------------------------------------------------------ */

.wlm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: var( --wlm-font-body );
}

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

.wlm-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 10, 10, 0.92 );
}

.wlm-lightbox__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.wlm-lightbox__image {
	max-width: min( 92vw, 1400px );
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.5 );
}

.wlm-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 1px solid rgba( 255, 255, 255, 0.5 ) !important;
	background: transparent;
	color: #fff !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.wlm-lightbox__close:hover,
.wlm-lightbox__close:focus-visible {
	/* !important: overrides a theme "button:hover" reset — see note on
	   .wlm-carousel__nav above. */
	background: #fff !important;
	color: #1a1a1a !important;
}

.wlm-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 52px;
	height: 52px;
	border-radius: 50%;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 1px solid rgba( 255, 255, 255, 0.5 ) !important;
	background: transparent;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wlm-lightbox__nav:hover,
.wlm-lightbox__nav:focus-visible {
	/* !important: overrides a theme "button:hover" reset — see note on
	   .wlm-carousel__nav above. */
	background: #fff !important;
	color: #1a1a1a !important;
}

.wlm-lightbox__nav--prev {
	left: 16px;
}

.wlm-lightbox__nav--next {
	right: 16px;
}

.wlm-lightbox__counter {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX( -50% );
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 *  Floor plan modal
 * ------------------------------------------------------------------ */

.wlm-floorplan-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: var( --wlm-font-body );
}

.wlm-floorplan-modal[ hidden ] {
	display: none;
}

.wlm-floorplan-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 10, 10, 0.75 );
}

.wlm-floorplan-modal__content {
	position: relative;
	z-index: 1;
	/* Boxed dialog, not full-screen — a full-viewport frame made the PDF's
	   own "fit width" zoom blow the page up far larger than comfortable.
	   Keeping it boxed lets the PDF viewer's default zoom show the whole
	   page at a sane size, with the dark backdrop visible around it. */
	max-width: 1100px;
	width: min( 92vw, 1100px );
	height: min( 86vh, 950px );
	margin: 7vh auto 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	border-radius: var( --wlm-radius );
	overflow: hidden;
}

.wlm-floorplan-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e4e1d9;
}

.wlm-floorplan-modal__title {
	font-family: var( --wlm-font-heading );
	font-weight: 400;
	font-size: 20px;
	margin: 0;
	color: var( --wlm-color-heading );
}

.wlm-floorplan-modal__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 1px solid var( --wlm-color-border ) !important;
	background: transparent;
	color: var( --wlm-color-heading ) !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.wlm-floorplan-modal__close:hover,
.wlm-floorplan-modal__close:focus-visible {
	/* !important: overrides a theme "button:hover" reset — see note on
	   .wlm-carousel__nav above. */
	background: var( --wlm-color-heading ) !important;
	color: #fff !important;
}

.wlm-floorplan-modal__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px;
	background: #f5f3ee;
	border-bottom: 1px solid #e4e1d9;
	flex-wrap: wrap;
}

.wlm-floorplan-modal__zoom,
.wlm-floorplan-modal__page-nav,
.wlm-floorplan-modal__toolbar-links {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Higher specificity than the [display:flex] rule above, so the plain
   HTML `hidden` attribute (used to hide page nav on single-page PDFs)
   actually wins instead of losing the cascade tie-break to source order. */
.wlm-floorplan-modal__page-nav[hidden] {
	display: none;
}

.wlm-floorplan-modal__zoom-out,
.wlm-floorplan-modal__zoom-in,
.wlm-floorplan-modal__prev-page,
.wlm-floorplan-modal__next-page {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* !important: overrides a theme's global button reset — see note on
	   .wlm-carousel__image-button above. */
	border: 1px solid var( --wlm-color-border ) !important;
	background: transparent;
	color: var( --wlm-color-heading ) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.wlm-floorplan-modal__zoom-out:hover,
.wlm-floorplan-modal__zoom-out:focus-visible,
.wlm-floorplan-modal__zoom-in:hover,
.wlm-floorplan-modal__zoom-in:focus-visible,
.wlm-floorplan-modal__prev-page:hover,
.wlm-floorplan-modal__prev-page:focus-visible,
.wlm-floorplan-modal__next-page:hover,
.wlm-floorplan-modal__next-page:focus-visible {
	/* !important: overrides a theme "button:hover" reset — see note on
	   .wlm-carousel__nav above. */
	background: var( --wlm-color-heading ) !important;
	color: #fff !important;
	outline: none;
}

.wlm-floorplan-modal__zoom-out:disabled,
.wlm-floorplan-modal__zoom-in:disabled,
.wlm-floorplan-modal__prev-page:disabled,
.wlm-floorplan-modal__next-page:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.wlm-floorplan-modal__zoom-level,
.wlm-floorplan-modal__page-indicator {
	font-family: var( --wlm-font-body );
	font-weight: 700;
	font-size: 13px;
	color: var( --wlm-color-text );
	min-width: 42px;
	text-align: center;
}

.wlm-floorplan-modal__toolbar-links {
	margin-left: auto;
}

.wlm-floorplan-modal__download,
.wlm-floorplan-modal__new-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var( --wlm-color-heading );
	text-decoration: none;
}

.wlm-floorplan-modal__download:hover,
.wlm-floorplan-modal__download:focus-visible,
.wlm-floorplan-modal__new-tab:hover,
.wlm-floorplan-modal__new-tab:focus-visible {
	background: var( --wlm-color-divider );
	outline: none;
}

.wlm-floorplan-modal__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #525659;
	overflow: hidden;
}

.wlm-floorplan-modal__canvas-wrap {
	flex: 1;
	overflow: auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px;
}

.wlm-floorplan-modal__canvas {
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
	max-width: none;
}

.wlm-floorplan-modal__status {
	text-align: center;
	font-family: var( --wlm-font-body );
	font-size: 13px;
	color: #fff;
	padding: 10px;
	margin: 0;
}

.wlm-floorplan-modal__status:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 *  Sticky mobile CTA bar (hidden on desktop/tablet, see media query)
 * ------------------------------------------------------------------ */

.wlm-sticky-cta-bar {
	display: none;
}

/* ------------------------------------------------------------------ *
 *  Body scroll lock while a modal/lightbox is open
 * ------------------------------------------------------------------ */

html.wlm-scroll-locked,
html.wlm-scroll-locked body {
	overflow: hidden !important;
}

/* ------------------------------------------------------------------ *
 *  Responsive breakpoints
 * ------------------------------------------------------------------ */

@media ( max-width: 960px ) {
	.wlm-box-row {
		grid-template-columns: 1fr;
	}

	.wlm-content-row,
	.wlm-content-row--sidebar-only {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.wlm-sidebar__inner {
		position: static;
		top: auto;
	}

	.wlm-listings-grid {
		--wlm-columns: 2 !important;
	}
}

@media ( max-width: 768px ) {
	.wlm-title-band {
		padding: 40px var( --wlm-gutter );
	}

	.wlm-box {
		padding: 22px;
	}

	.wlm-sticky-cta-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9000;
		padding: 12px var( --wlm-gutter );
		padding-bottom: max( 12px, env( safe-area-inset-bottom ) );
		background: var( --wlm-color-bg-card );
		border-top: 1px solid var( --wlm-color-divider );
		box-shadow: 0 -4px 16px rgba( 26, 26, 26, 0.08 );
	}

	.wlm-sticky-cta-bar__button {
		display: flex;
		width: 100%;
	}

	.wlm-listing {
		padding-bottom: 96px;
	}
}

@media ( max-width: 600px ) {
	.wlm-listing {
		padding: 32px var( --wlm-gutter ) 96px;
	}

	.wlm-listing__title {
		font-size: 32px;
	}

	.wlm-stat-strip__item {
		flex: 1 1 45%;
		padding: 14px 16px;
	}

	.wlm-features-list {
		grid-template-columns: 1fr;
	}

	.wlm-sidebar-card {
		padding: 22px;
	}

	.wlm-floorplan {
		flex-wrap: wrap;
	}

	.wlm-floorplan__preview {
		flex-basis: 100%;
		width: 100%;
		height: 160px;
	}

	.wlm-listings-grid {
		--wlm-columns: 1 !important;
	}

	.wlm-floorplan-modal__content {
		width: 100vw;
		height: 100vh;
		margin: 0;
		border-radius: 0;
	}

	.wlm-lightbox__nav {
		width: 42px;
		height: 42px;
	}
}