/* Available today badge — same pill on listing, homepage, and single */

.rollover-project,
.rollover-project > a,
.post-thumbnail,
.project-slider,
.project-slider .images-container,
.images-container {
	position: relative !important;
}

.available-now-badge,
.rollover-project > a .available-now-badge,
.rollover-project .available-now-badge,
.post-thumbnail .available-now-badge,
.project-slider .available-now-badge,
.images-container .available-now-badge,
.owl-item .available-now-badge,
.dt-owl-carousel-call .available-now-badge,
#jg-container-1 .available-now-badge,
#main .jg-container .available-now-badge {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 50 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	height: auto !important;
	max-width: calc(100% - 20px) !important;
	padding: 7px 12px 7px 10px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	-webkit-border-radius: 999px !important;
	background: #ff781f !important;
	background-color: #ff781f !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
	overflow: visible !important;
	pointer-events: none !important;
	line-height: 1.2 !important;
	font-family: "Cabin", Helvetica, Arial, Verdana, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	white-space: nowrap !important;
	text-transform: none !important;
	box-sizing: border-box !important;
	float: none !important;
}

.available-now-badge__icon {
	display: block !important;
	flex: 0 0 auto !important;
	width: 15px !important;
	height: 15px !important;
	color: #ffc107 !important;
	fill: #ffc107 !important;
}

.available-now-badge__icon path {
	fill: #ffc107 !important;
}

.available-now-badge__text {
	display: block !important;
	color: #fff !important;
}

/*
 * /ladies/ mobile: kill Justified Grid absolute ghost-height so photos
 * stack and badges can sit on the image (JS also pins to img offset).
 */
@media only screen and (max-width: 767px) {
	body.page-id-12 #main .jg-container,
	body.page-id-12 .content #jg-container-1.wf-container,
	.content #jg-container-1.wf-container,
	#main #jg-container-1.jg-container,
	#main .jg-container {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		min-height: 0 !important;
		position: relative !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	body.page-id-12 #main .jg-container .wf-cell,
	body.page-id-12 .content #jg-container-1 .wf-cell,
	.content #jg-container-1 .wf-cell,
	#main .jg-container .wf-cell {
		display: block !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		float: none !important;
		/* no top padding — that was parking the badge in white space */
		padding: 0 0 12px !important;
		margin: 0 !important;
		opacity: 1 !important;
		transform: none !important;
	}

	#main .jg-container .wf-cell .post,
	#main .jg-container .rollover-project,
	#main .jg-container .rollover-project > a {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		overflow: hidden !important;
		line-height: 0 !important;
	}

	#main .jg-container .rollover-project img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
	}

	/* Single profile: keep badge on the photo, not a chrome bar above it */
	.single-dt_portfolio .project-slider,
	.single-dt_portfolio .images-container,
	.single .project-slider,
	.single .images-container {
		position: relative !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		line-height: 0 !important;
	}

	.single .images-container > a,
	.single .images-container > img,
	.single .project-slider img {
		display: block !important;
		margin: 0 !important;
	}

	.available-now-badge,
	#main .jg-container .available-now-badge,
	.single .available-now-badge {
		top: 8px !important;
		right: 8px !important;
		padding: 6px 10px 6px 8px !important;
		font-size: 12px !important;
		gap: 5px !important;
		border-radius: 999px !important;
	}

	.available-now-badge__icon {
		width: 13px !important;
		height: 13px !important;
	}
}