/**
 * EPL Template Builder — Default Frontend Styles
 *
 * Scoped to .epl-tb (Template Builder active) to override EPL Core's
 * legacy float/width/box-shadow styles with modern CSS Grid + Flex layout.
 */

/* ==========================================================
   Preview wrapper — transparent to flex layout
   The [data-epl-tb] wrapper only exists in preview mode
   (for component selection). display:contents removes it from
   the box tree so the inner component wrapper is the flex child.
   ========================================================== */
[data-epl-tb] {
	display: contents;
}

/* ==========================================================
   EPL Core Reset — neutralize legacy float-based grid styles
   ========================================================== */

/* Archive card: kill floats, widths, old box model + theme .hentry margins.
   Targets .epl-listing-post directly inside .epl-tb so we don't need to
   depend on the legacy .epl-listing-grid-view / -forced classes which are
   no longer hardcoded on every card (they live on the loop wrapper now). */
.epl-tb .epl-listing-post,
.epl-tb .epl-listing-post.hentry,
.epl-tb .epl-property-blog,
.epl-tb .epl-property-blog.hentry,
.epl-tb .epl-property-blog.epl-listing-grid-view,
.epl-tb .epl-property-blog.epl-listing-grid-view-forced,
.epl-tb .epl-listing-grid-view,
.epl-tb .epl-listing-grid-view-forced,
.epl-tb .epl-listing-grid-view.hentry,
.epl-tb .epl-listing-grid-view-forced.hentry,
.epl-tb .builder-module-content .epl-listing-grid-view-forced.hentry,
.epl-tb .builder-module-content .epl-listing-grid-view.hentry {
	display: flex;
	float: initial;
	width: initial;
	height: initial;
	max-width: 100%;
	box-sizing: border-box;
	font-size: initial;
	vertical-align: initial;
	clear: initial;
	margin: 0;
	padding: 0;
}

/* Property box: kill legacy 50%/33% float splits */
.epl-tb .epl-property-blog .property-box,
.epl-tb .epl-property-blog .property-box-left,
.epl-tb .epl-property-blog .property-box-right {
	float: none;
	width: 100%;
	padding: 0;
}

/* Entry wrapper: kill old box shadow + overflow */
.epl-tb .epl-property-blog .epl-property-blog-entry-wrapper {
	margin: 0;
	box-shadow: none;
	overflow: visible;
}

/* Images: full width, fill the parent vertically when the parent has
   an explicit height (e.g. list view's image-left column where the
   header section is stretched to the full card height by the inner
   CSS Grid). object-fit:cover keeps the aspect ratio without
   distorting the image.

   The chain that must hold for the img's height:100% to actually
   resolve to the grid track height is:

     .epl-tb-wrapper--card  → height:100% (from wrapper-stretch block)
       ↓ (display:grid; grid-template-rows: auto 1fr auto OR
                        grid-template-areas with header spanning rows)
     .epl-section--header   → height:100% (so it's definite to children)
       ↓ (display:flex; flex-direction:column)
     .epl-tb-item--featured-image  → height:100%
       ↓
     .epl-archive-entry-image     → height:100%
       ↓
     .epl-blog-image              → height:100%
       ↓
     <img>                         → height:100%; object-fit:cover

   .epl-section--header needs the explicit height:100% otherwise its
   children's percentage heights resolve to auto (CSS spec — a flex
   child only has a definite height if the flex container itself has
   one). The grid track gives the section a definite height, but
   that doesn't propagate to flex children unless the section also
   declares height:100%.

   In grid mode the header row is `auto` so the section sizes to its
   image-content height — the height:100% chain bottoms out at the
   img's natural height (same visual result as the previous
   height:auto rules). Safe for both modes. */
.epl-tb .epl-section--header,
.epl-tb .epl-tb-item--featured-image,
.epl-tb .epl-tb-item--featured-image-single,
.epl-tb .epl-archive-entry-image,
.epl-tb .epl-blog-image,
.epl-tb .epl-featured-image {
	height: 100%;
}

.epl-tb .epl-featured-image a,
.epl-tb .epl-featured-image img,
.epl-tb .epl-archive-entry-image img,
.epl-tb .epl-blog-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Listing status: kill legacy float */
.epl-tb .epl-listing-status {
	float: none;
	padding-left: 0;
	text-transform: none;
}

/* Feature icons: reset old sprite-based layout */
.epl-tb .property-feature-icons {
	margin: 0;
}

/* Inspection times: clean list */
.epl-tb .epl-inspection-times ul.home-open-wrapper {
	margin: 0;
	list-style-type: none;
}

/* Author/agent boxes */
.epl-tb .epl-author-box-container {
	margin: 0;
}
.epl-tb .epl-author-box-outer-wrapper {
	margin: 0;
	padding: 0;
	background: initial;
}

/* Tab section */
.epl-tb .epl-tab-section {
	margin-top: 0;
}

/* Map images: no theme box-shadow */
.epl-tb .gm-style img {
	box-shadow: none !important;
}

/* Mobile full-width cards + row stacking: now generated dynamically
   via output_responsive_css() using the user's breakpoint settings.
   See Global Options > Responsive. */

/* ==========================================================
   Card & Section Styles
   ========================================================== */

/* --- Card wrapper ------------------------------------------ */
.epl-tb .epl-listing-post {
	background-color: #ffffff;
	padding: 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	position: relative;
	transition: all 0.2s ease;
}

/* The float-reset block above sets .epl-listing-post to display:flex
   to neutralise theme floats. With the CSS Grid (header / content /
   footer rows) now living on the inner .epl-tb-wrapper--card, the
   inner wrapper is the single flex child and needs to stretch to fill
   the post on both axes — otherwise the inner CSS Grid only sees the
   wrapper's content height, the `1fr` content row has nothing to
   expand into, and the footer floats up against the content instead
   of sticking to the bottom of the card.

   With the wrapper stretched to fill the post, the user's saved
   template_rows of `auto 1fr auto` does the right thing naturally:
   header at top, content grows to fill, footer pinned to the bottom
   of the card. No grid-template-rows override needed. */
.epl-tb .epl-listing-post {
	flex-direction: column;
	align-items: stretch;
}

.epl-tb .epl-listing-post > .epl-tb-wrapper--card {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	align-self: stretch;
}

/* --- Grid Section Mode ------------------------------------ */
.epl-listing-post.epl-tb-grid .epl-section:not(.epl-section--columned) {
	/* display is set via inline styles (flex + direction/justify/align/gap) */
	grid-template-columns: none !important;
	min-width: 0;
	padding: 0;
	margin: 0;
}
.epl-listing-post.epl-tb-grid .epl-section--columned {
	min-width: 0;
	padding: 0;
	margin: 0;
}
.epl-listing-post.epl-tb-grid .epl-section--header {
	position: relative;
	overflow: hidden;
}
.epl-listing-post.epl-tb-grid .epl-section--header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.epl-listing-post.epl-tb-grid .epl-section--content {
	padding: 16px 20px;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
}
.epl-listing-post.epl-tb-grid .epl-section--sidebar {
	padding: 0;
	overflow: hidden;
}
.epl-listing-post.epl-tb-grid .epl-section--sidebar .epl-archive-entry-image,
.epl-listing-post.epl-tb-grid .epl-section--sidebar .epl-blog-image {
	width: 100%;
}
.epl-listing-post.epl-tb-grid .epl-section--sidebar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Pin the last section (typically footer) to the bottom of the card.
   margin-top:auto absorbs all remaining space in the grid/flex container,
   pushing the last section down regardless of align-items or template-rows
   settings. Works for any section that happens to be last — not just footer. */
.epl-listing-post.epl-tb-grid .epl-section:last-child {
	margin-top: auto;
}
.epl-listing-post.epl-tb-grid .epl-section--footer {
	padding: 12px 20px;
	border-top: 1px solid #e5e7eb;
}

/* --- Image sizing in Grid Mode --------------------------- */
.epl-listing-post.epl-tb-grid .epl-section--content .epl-archive-entry-image {
	overflow: hidden;
	max-height: 280px;
}
.epl-listing-post.epl-tb-grid .epl-section--content .epl-archive-entry-image img {
	width: 100%;
	height: 100%;
	max-height: 280px;
	object-fit: cover;
	display: block;
}
.epl-listing-post.epl-tb-grid .epl-section--sidebar .epl-archive-entry-image {
	overflow: hidden;
	max-height: none;
}
.epl-listing-post.epl-tb-grid .epl-section--sidebar .epl-archive-entry-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Component spacing ------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-section--content > * {
	margin: 0;
}
.epl-listing-post.epl-tb-grid .epl-tb-item {
	margin: 0;
	padding: 0;
}

/* --- Featured Image ------------------------------------ */
.epl-listing-post.epl-tb-grid .epl-feature-image img,
.epl-listing-post.epl-tb-grid .epl-archive-image img,
.epl-listing-post.epl-tb-grid .epl-property-image {
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* --- Suburb ---------------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--suburb,
.epl-listing-post.epl-tb-grid .epl-tb-suburb,
.epl-listing-post.epl-tb-grid .suburb {
	color: #555555;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

/* --- Address ----------------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--address,
.epl-listing-post.epl-tb-grid .epl-tb-address {
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

/* --- Price ------------------------------------------------ */
.epl-listing-post.epl-tb-grid .epl-tb-item--price,
.epl-listing-post.epl-tb-grid .price {
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

/* --- Icons (bed/bath/car) ----------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--icons,
.epl-listing-post.epl-tb-grid .epl-features,
.epl-listing-post.epl-tb-grid .property-feature-icons {
	color: var(--epl-tb-icons-color, #333333);
	font-size: var(--epl-tb-icons-font-size, 14px);
	margin: var(--epl-tb-icons-margin, auto 0 0 0);
	padding: var(--epl-tb-icons-padding, 0);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--epl-tb-icons-gap, 12px);
	align-items: center;
	justify-content: flex-start;
}
/* Hide tooltip text */
.epl-listing-post.epl-tb-grid .epl-tooltip__text {
	display: none;
}

/* --- Template Builder Icon (epl-tb-icon) --------------- */
.epl-tb-icon {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: #333333;
	line-height: 1;
}
/* Separator pipe between icon groups — uses `+` sibling selector so
   the builder preview's appended .epl-tb-comp-icon (gear) doesn't
   trigger a trailing separator. See includes/scss/components/_features.scss
   for the compiled-bundle version with the same logic and rationale. */
.epl-tb-icon + .epl-tb-icon::before {
	content: "|";
	display: inline-block;
	color: #cccccc;
	margin-right: 4px;
	font-size: inherit;
	line-height: 1;
}
/* SVG background icon */
.epl-tb-icon__img {
	width: var(--epl-tb-icons-icon-size, 16px);
	height: var(--epl-tb-icons-icon-size, 16px);
	display: inline-block;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	font-style: normal;
	filter: var(--epl-tb-icon-filter, brightness(0) invert(20%));
}
/* Per-type icon via CSS custom properties (set by PHP in wp_head) */
.epl-tb-icon__img--bed      { background-image: var(--epl-tb-icon-bed, none); }
.epl-tb-icon__img--bath     { background-image: var(--epl-tb-icon-bath, none); }
.epl-tb-icon__img--car      { background-image: var(--epl-tb-icon-car, none); }
.epl-tb-icon__img--land     { background-image: var(--epl-tb-icon-land, none); }
.epl-tb-icon__img--building { background-image: var(--epl-tb-icon-building, none); }
.epl-tb-icon__img--toilet   { background-image: var(--epl-tb-icon-toilet, none); }
/* FontAwesome icon sizing — legacy selector (epl-tb-icon__img with FA class) */
.epl-tb-icon__img[class*="fa-"] {
	width: auto;
	height: auto;
	font-size: 14px;
	background: none;
}
/* FontAwesome icons rendered by IconRenderer (no epl-tb-icon__img class) */
.epl-tb-icon > i[class*="fa-"] {
	font-size: var(--epl-tb-icons-icon-size, 16px);
	color: var(--epl-tb-icon-color, inherit);
	filter: none;
	line-height: 1;
}
/* Value (the number: 4, 3, 2) */
.epl-tb-icon__value {
	font-size: var(--epl-tb-icons-value-font-size, 14px);
	font-weight: var(--epl-tb-icons-value-font-weight, 700);
	color: inherit;
}
/* Label (Beds, Baths, Cars) */
.epl-tb-icon__label {
	font-size: var(--epl-tb-icons-label-font-size, 12px);
	font-weight: var(--epl-tb-icons-label-font-weight, 400);
	color: inherit;
}

/* --- Stickers (overlay badges on featured image) ------ */
.epl-listing-single.epl-tb .epl-blog-image,
.epl-listing-single.epl-tb .epl-archive-entry-image {
	position: relative;
}
.epl-listing-post.epl-tb-grid .epl-stickers-wrapper,
.epl-listing-single.epl-tb .epl-stickers-wrapper {
	position: absolute;
	z-index: 9;
	display: flex;
	flex-direction: column;
	gap: 4px;
	top: 20px;
	right: auto;
	bottom: auto;
	left: 0;
}
.epl-listing-post.epl-tb-grid .status-sticker,
.epl-listing-single.epl-tb .status-sticker {
	background: #333333;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 0;
	line-height: 1.4;
	display: inline-block;
}

/* --- Category Badge ---------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--category,
.epl-listing-post.epl-tb-grid .epl-tb-category,
.epl-listing-post.epl-tb-grid .epl-category {
	color: #1a56db;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	background-color: #e8f0fe;
	border-radius: 4px;
	margin: 0;
	padding: 4px 10px;
	width: fit-content;
}

/* --- Listing Status Badge ----------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--status,
.epl-listing-post.epl-tb-grid .epl-tb-status,
.epl-listing-post.epl-tb-grid .epl-listing-status {
	margin: 0;
	padding: 0;
}
.epl-listing-post.epl-tb-grid .epl-tb-status__label {
	display: inline-block;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	background-color: #e07000;
	border-radius: 4px;
	margin: 0;
	padding: 4px 10px;
	width: fit-content;
}

/* --- Heading -------------------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--property-heading,
.epl-listing-post.epl-tb-grid .epl-property-heading {
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

/* Truncate utility — single line with ellipsis */
.epl-tb-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Excerpt --------------------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--excerpt,
.epl-listing-post.epl-tb-grid .epl-property-excerpt {
	color: #555555;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

/* --- Agent Name ------------------------------------------------ */
.epl-listing-post.epl-tb-grid .epl-agent-name {
	color: #333333;
	font-size: 13px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

/* --- Office Name ------------------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-office-name {
	color: #555555;
	font-size: 12px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

/* --- Buttons ------------------------------------------------------- */
.epl-listing-post.epl-tb-grid .epl-tb-item--button a,
.epl-listing-post.epl-tb-grid .epl-read-more.button,
.epl-listing-post.epl-tb-grid .epl-cta a,
.epl-listing-post.epl-tb-grid .epl-cta button {
	display: inline-block;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	background-color: #1a56db;
	border-radius: 4px;
	padding: 8px 16px;
	margin: 0;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.epl-listing-post.epl-tb-grid .epl-tb-item--button a:hover,
.epl-listing-post.epl-tb-grid .epl-tb-item--button a:focus,
.epl-listing-post.epl-tb-grid .epl-read-more.button:hover,
.epl-listing-post.epl-tb-grid .epl-read-more.button:focus,
.epl-listing-post.epl-tb-grid .epl-cta a:hover,
.epl-listing-post.epl-tb-grid .epl-cta a:focus,
.epl-listing-post.epl-tb-grid .epl-cta button:hover,
.epl-listing-post.epl-tb-grid .epl-cta button:focus {
	background-color: #1347c8;
	color: #ffffff;
	outline: none;
}

/* --- Overlay Layout Mode ---------------------------------- */
.epl-listing-post.epl-tb-layout--overlay,
.epl-listing-post.epl-tb-layout--overlay-hover {
	position: relative;
	overflow: hidden;
}
.epl-listing-post.epl-tb-layout--overlay .epl-section--header img,
.epl-listing-post.epl-tb-layout--overlay-hover .epl-section--header img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	display: block;
}
.epl-listing-post.epl-tb-layout--overlay .epl-section--content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: #fff;
	z-index: 2;
}
.epl-listing-post.epl-tb-layout--overlay .epl-section--content * {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --- Overlay on Hover --------------------------------------------- */
.epl-listing-post.epl-tb-layout--overlay-hover .epl-section--content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 40%);
	color: #fff;
	z-index: 2;
	transform: translateY(calc(100% - 70px));
	transition: transform 0.3s ease;
}
.epl-listing-post.epl-tb-layout--overlay-hover:hover .epl-section--content {
	transform: translateY(0);
}
.epl-listing-post.epl-tb-layout--overlay-hover .epl-section--content * {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Hide footer in overlay modes */
.epl-listing-post.epl-tb-layout--overlay .epl-section--footer,
.epl-listing-post.epl-tb-layout--overlay-hover .epl-section--footer {
	display: none;
}

/* --- Per-Section Overlay --------------------------------------- */
.epl-listing-post.epl-tb-has-overlay {
	position: relative;
	overflow: hidden;
}
.epl-listing-post .epl-section--overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: #fff;
	z-index: 2;
}
.epl-listing-post .epl-section--overlay * {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --- Classic Zone Mode --------------------------------------------- */
.epl-listing-post .epl-row-wrap--header {
	position: relative;
	overflow: hidden;
}
.epl-listing-post .epl-row-wrap--content {
	padding: 16px 20px;
}

/* --- Pagination ------------------------------------------------------ */
body .epl-pagination {
	clear: both;
	position: relative;
	display: flex;
	justify-content: var(--epl-tb-pagination-justify, center);
	align-items: center;
	flex-wrap: wrap;
	gap: var(--epl-tb-pagination-gap, 8px);
	margin: var(--epl-tb-pagination-margin, 4em 0 1em);
	font-size: var(--epl-tb-pagination-font-size, 14px);
	text-align: center;
}
body .epl-pagination a,
body .epl-pagination span {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--epl-tb-pagination-item-size, 36px);
	height: var(--epl-tb-pagination-item-size, 36px);
	padding: var(--epl-tb-pagination-item-padding, 0);
	background: var(--epl-tb-pagination-item-bg, #ffffff);
	color: var(--epl-tb-pagination-item-color, #333333);
	border: var(--epl-tb-pagination-item-border, 1px solid #e5e7eb);
	border-radius: var(--epl-tb-pagination-item-radius, 4px);
	font-weight: var(--epl-tb-pagination-item-font-weight, 400);
	text-decoration: none;
	text-align: center;
	line-height: 1;
	transition: all 0.15s ease;
}
body .epl-pagination span.current {
	background: var(--epl-tb-pagination-active-bg, #0056B3);
	color: var(--epl-tb-pagination-active-color, #ffffff);
	border: var(--epl-tb-pagination-active-border, 1px solid #0056B3);
}
body .epl-pagination a:hover {
	background: var(--epl-tb-pagination-hover-bg, #f3f4f6);
	color: var(--epl-tb-pagination-hover-color, #333333);
	border: var(--epl-tb-pagination-hover-border, 1px solid #d1d5db);
}
body .epl-pagination a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
body .epl-pagination .pages {
	width: auto;
	padding: 0 8px;
	border: none;
	background: transparent;
}
body .epl-pagination .last {
	width: auto;
	padding: 0 8px;
}

/* --- Tools (Listing Toolbar) --------------------------------- */
.epl-loop-tools {
	display: flex;
	justify-content: var(--epl-tb-tools-justify, space-between);
	align-items: center;
	flex-wrap: wrap;
	gap: var(--epl-tb-tools-gap, 1em);
	margin: var(--epl-tb-tools-margin, 0);
	padding: var(--epl-tb-tools-padding, 0);
	border: var(--epl-tb-tools-border, none);
	border-radius: var(--epl-tb-tools-border-radius, 0);
}
.epl-loop-tool ul {
	display: flex;
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.epl-tool-results-counter {
	text-transform: none;
}
.epl-tool-results-counter .epl-tool-results-count__total {
	font-size: var(--epl-tb-tools-counter-font-size, 14px);
	font-weight: var(--epl-tb-tools-counter-font-weight, 300);
	color: var(--epl-tb-tools-counter-color, #333333);
}
.epl-tool-sorting .epl-sort-listings:not(.nice-select) {
	-webkit-appearance: none;
	margin: 0;
	padding: var(--epl-tb-tools-sorter-padding, 0 3em 0 1em);
	background: var(--epl-tb-tools-sorter-bg, #ffffff);
	box-shadow: none;
	border: var(--epl-tb-tools-sorter-border, 1px solid #e1e1e1);
	border-radius: var(--epl-tb-tools-sorter-border-radius, 4px);
	height: var(--epl-tb-tools-sorter-height, 39px);
	line-height: var(--epl-tb-tools-sorter-height, 39px);
	color: var(--epl-tb-tools-sorter-color, #333333);
	font-size: var(--epl-tb-tools-sorter-font-size, 12px);
}
.epl-tool-switch {
	margin-left: auto;
}
.epl-tool-switch ul {
	display: flex;
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.epl-tool-switch li.epl-tool-switch__item {
	padding: 0;
	border-style: none;
	border-radius: 3px;
	background-image: none;
	list-style: none !important;
}
.epl-tool-switch .epl-tool-switch__item {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/* ==========================================================
   Single Listing — Section Layout
   ========================================================== */

/* Single listing article — prevent 100vw horizontal overflow */
.epl-listing-single.epl-tb {
	overflow-x: hidden;
}

/* --- EPL TB Wrapper — our isolated layout container ------------
 * All grid/flex/box-model styles live here, NOT on the WP post div.
 * This shields us from theme styles (Astra, Divi, Kadence, etc.)
 * that target .hentry, .ast-article-single, .post, etc.
 */
.epl-tb-wrapper {
	box-sizing: border-box;
}
.epl-tb-wrapper--single,
.epl-tb-wrapper--card {
	/* Reset any inherited padding/margin from theme */
	margin: 0;
	width: 100%;
}

/* --- Base theme resets ------------------------------------------------------------
 * Zero out common theme padding/margin inside EPL template builder
 * controlled elements. Works regardless of Theme Setup selection.
 */
.epl-tb .ast-article-post,
.epl-tb .ast-grid-common-col,
.epl-tb .ast-full-width,
.epl-tb article.type-property,
.epl-tb article.type-rental,
.epl-tb article.type-land,
.epl-tb article.type-commercial,
.epl-tb article.type-rural,
.epl-tb article.type-business,
.epl-tb article.type-commercial_land {
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}
.epl-tb .ast-separate-container .ast-article-post {
	background: transparent;
	box-shadow: none;
}

/* Section wraps — full-width containers */
.epl-section-wrap {
	width: 100%;
	box-sizing: border-box;
}
.epl-section-wrap--wide {
	max-width: 100%;
}
.epl-section {
	max-width: var(--epl-tb-container-width, 1200px);
	margin-inline: auto;
	padding-inline: var(--epl-container-padding, 1em);
	box-sizing: border-box;
}
/* Override style-versioned.css .epl-section max-width/padding for single listings */
.epl-tb .epl-section {
	max-width: var(--epl-tb-container-width, 1200px);
	padding: 0;
	padding-inline: var(--epl-container-padding, 1em);
}
/* Full-width section (grid-based template) — remove max-width constraint */
.epl-tb .epl-section.epl-section--full-width {
	max-width: 100%;
	padding-inline: 0;
}
/* Full-width: break out of any constrained parent to span the viewport */
/* Card preview mode — add breathing room top/bottom */
.epl-section-wrap--archive-card-preview {
	padding-block: 6em;
}

.epl-section-wrap--full-width {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( -50vw + 50% );
	position: relative;
	box-sizing: border-box;
}
.epl-section-wrap--full-width > .epl-section {
	max-width: 100%;
	padding-inline: 0;
}
/* Constrain images and media within sections */
.epl-section-wrap img {
	max-width: 100%;
	height: auto;
}
.epl-section-wrap--full-width img {
	width: 100%;
	height: auto;
	display: block;
}

/* Content section grid (main + sidebar) */
.epl-section--content-grid {
	max-width: var(--epl-tb-container-width, 1200px);
	margin-inline: auto;
	padding-inline: var(--epl-container-padding, 1em);
	box-sizing: border-box;
}
/* Reset grid-area on children so inline grid-template-columns works */
.epl-section--content-grid > .epl-section-inner--main,
.epl-section--content-grid > .epl-column--main {
	grid-area: auto;
}
.epl-section--content-grid > .epl-section-inner--sidebar,
.epl-section--content-grid > .epl-column--sidebar {
	grid-area: auto;
}

/* --- Component title --------------------------------------------- */
.epl-tb-comp-title {
	font-size: 1.25em;
	font-weight: 600;
	margin: 0 0 0.5em;
	padding: 0;
}

/* Sidebar layout — CSS Grid two-column */
.epl-section--sidebar {
	display: grid;
	grid-template-areas: "main sidebar";
	grid-template-columns: 1fr min(100%, 400px);
	gap: 4em;
}
.epl-section--sidebar-right {
	grid-template-areas: "main sidebar";
	grid-template-columns: 1fr min(100%, 400px);
}
/* Sidebar stacking: now generated dynamically via output_responsive_css() */
.epl-section-inner--main,
.epl-column--main {
	grid-area: main;
	min-width: 0;
	overflow: visible;
}
.epl-section-inner--sidebar,
.epl-column--sidebar {
	grid-area: sidebar;
	min-width: 0;
}

/* Info bar — flex row */
.epl-section-wrap--info-bar .epl-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	padding-block: 1em;
}

/* --- Single Listing — Vertical Section Stack ------------------------ */
/* The single page stacks sections vertically. Each section
   independently controls its width (full-width or constrained).
   Main + sidebar are auto-paired into a CSS Grid two-column layout. */

/* Prevent child content from blowing out the grid columns */
.epl-section--columned .epl-section-inner,
.epl-section--columned .epl-column,
.epl-section--content-grid .epl-section-inner--main,
.epl-section--content-grid .epl-column--main,
.epl-section--content-grid .epl-section-inner--sidebar,
.epl-section--content-grid .epl-column--sidebar {
	min-width: 0;
	overflow: hidden;
}

/* Components in single sections */
.epl-listing-single .epl-section--content .epl-tb-item,
.epl-listing-single .epl-section--sidebar .epl-tb-item {
	max-width: 100%;
	box-sizing: border-box;
}

/* Embeds, iframes, videos — responsive within columns */
.epl-listing-single .epl-section--content iframe,
.epl-listing-single .epl-section--content .epl-video-container,
.epl-listing-single .epl-section--content .epl-am-template {
	max-width: 100%;
}
.epl-listing-single .epl-video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.epl-listing-single .epl-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Responsive column stacking: now generated dynamically
   via output_responsive_css() using the user's breakpoint settings.
   See Global Options > Responsive. */

/* ==========================================================
   Theme Compat — Astra
   ========================================================== */

/* Astra's .ast-separate-container adds 3em padding to single articles.
   Reset it when Template Builder is controlling the layout. */
.ast-separate-container .epl-tb.ast-article-single,
.ast-separate-container .epl-tb-grid.ast-article-single {
	padding: 0 !important;
}

/* ==========================================================
   READ MORE — Expand/Collapse for long content
   ========================================================== */

.epl-tb-readmore {
	position: relative;
}
.epl-tb-readmore__content {
	overflow: hidden;
	transition: max-height 0.35s ease;
}
.epl-tb-readmore__content.is-collapsed {
	position: relative;
}
.epl-tb-readmore__content.is-collapsed::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(transparent, var(--epl-tb-readmore-fade, #fff));
	pointer-events: none;
}
.epl-tb-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.75em;
	padding: 0.4em 0;
	border: none;
	background: none;
	color: var(--epl-color-primary, #0073aa);
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}
.epl-tb-readmore__toggle:hover {
	opacity: 0.8;
}

/* ==========================================================
   View mode (List / Grid) — section + component visibility
   ----------------------------------------------------------
   Sections and components opt into a view mode by emitting
   data-view-mode="grid" or data-view-mode="list" on their
   wrapper. The active view is signalled by TB-specific classes
   on the LOOP wrapper only (.epl-loop-content.epl-tb), set by
   the class injection in includes/layout-engine.php:
     - .epl-tb-view--grid   (default — what every grid template
                              always has)
     - .epl-tb-view--list   (added by the switcher / shortcode
                              when the user picks list view)
     - .epl-tb-view--locked (the template has list mode disabled,
                              OR shortcode passed view_toggle="off")

   IMPORTANT: we use our own epl-tb-view--* class names rather
   than the generic epl-listing-list-view etc. so our rules can
   never collide with third-party / EPL-core code that may add
   the generic class names. The legacy .epl-listing-grid-view-forced
   class is still emitted alongside --locked for backward compat
   with any external CSS, but all OUR rules key off the TB-prefixed
   names exclusively.

   Selectors use .epl-tb.epl-tb-view--list compound form so they
   only match when BOTH classes are on the same element — the
   loop wrapper — never individual card posts that may carry
   stale per-post classes from older data.
   ========================================================== */

/* In grid view, hide elements tagged for list-only.
   Also hide in locked (grid-view-forced) mode. */
.epl-tb.epl-tb-view--grid [data-view-mode="list"],
.epl-tb.epl-tb-view--locked [data-view-mode="list"] {
	display: none !important;
}

/* In list view, hide elements tagged for grid-only. */
.epl-tb.epl-tb-view--list [data-view-mode="grid"] {
	display: none !important;
}

/* List view: each card spans the full width of the parent loop grid.
   The .epl-loop-content's column track count varies by template (2/3/4
   /5 columns in grid view), so `1 / -1` collapses every card to a
   single full-width row regardless of the underlying column count.
   This is what makes a "list view" actually look like a list and not a
   single-column-wide vertical strip. */
.epl-tb.epl-tb-view--list > .epl-listing-post,
.epl-tb.epl-tb-view--list .epl-listing-post {
	grid-column: 1 / -1;
}

/* Hide the Switch Views toolbar item when the wrapper is locked
   (template has list mode disabled or shortcode view_toggle="off") */
.epl-tb.epl-tb-view--locked .epl-tool-switch {
	display: none !important;
}