/* ==========================================================================
   Arock Construction — Sales page

   Loaded last in <head> on sales.html so it wins on cascade order.
   Everything is namespaced under .arock-sl- (plus the .arock-sales shell) so
   nothing here can reach the theme's own listing markup on projects.html or
   the .arock-pf- cards on portfolio.html.

   The page is two <details> "dropdown categories"; each listing inside them is
   itself a <details> so the long specification block only appears on demand.
   No JavaScript — the disclosure behaviour is native, which keeps it keyboard
   accessible and working in the static export.
   ========================================================================== */

.arock-sales {
	--sl-accent: #FFB214; /* same amber as arock-enhancements.css */
	--sl-ink: #0C0C0C;
	--sl-body: #756b66;
	--sl-line: rgba(12, 12, 12, 0.12);
	--sl-soft: #F6F4F0;
	--sl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sl-dur: 300ms;

	padding: 0 0 40px;
}

/* Loading/empty/error state for the live-fetched listing (arock-sales-list.js).
   Shared with arock-projects.css / arock-portfolio.css. */
.arock-pj-status {
	margin: 0;
	padding: 60px 20px;
	text-align: center;
	font-size: 0.95rem;
	color: #6A6A6A;
}

.arock-pj-status a {
	color: inherit;
	text-decoration: underline;
}

/* The theme decorates every list item inside .site-content with a bullet and
   an inherited margin. Every list on this page is a layout device. */
.arock-sales ul,
.arock-sales ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.arock-sales li {
	margin: 0;
	padding: 0;
}

.arock-sales li::before {
	content: none;
}

.arock-sales a {
	color: inherit;
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   1. Dropdown category
   -------------------------------------------------------------------------- */

.arock-sl-cat {
	margin: 0 0 28px;
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	background-color: #ffffff;
	overflow: hidden;
	transition: box-shadow var(--sl-dur) var(--sl-ease);
}

.arock-sl-cat[open] {
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.09);
}

.arock-sl-cat__summary {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 26px 30px;
	background-color: var(--sl-soft);
	cursor: pointer;
	list-style: none;
	transition: background-color var(--sl-dur) var(--sl-ease);
}

/* Both spellings are needed — Safari still ships the WebKit pseudo-element. */
.arock-sl-cat__summary::-webkit-details-marker {
	display: none;
}

.arock-sl-cat__summary::marker {
	content: none;
}

.arock-sl-cat__summary:hover {
	background-color: #F0EDE7;
}

.arock-sl-cat__summary:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: -3px;
}

.arock-sl-cat__index {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--sl-ink);
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
}

.arock-sl-cat__text {
	flex: 1 1 auto;
	min-width: 0;
}

.arock-sl-cat__title {
	margin: 0;
	font-family: 'Urbanist', sans-serif;
	font-size: clamp(19px, 2vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--sl-ink);
}

.arock-sl-cat__note {
	margin: 5px 0 0;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sl-body);
}

.arock-sl-cat__count {
	flex: none;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-body);
}

.arock-sl-cat__chev {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(12, 12, 12, 0.22);
	border-radius: 50%;
	transition:
		transform var(--sl-dur) var(--sl-ease),
		border-color var(--sl-dur) var(--sl-ease),
		background-color var(--sl-dur) var(--sl-ease);
}

.arock-sl-cat__chev svg {
	display: block;
	width: 11px;
	height: 11px;
	fill: currentColor;
}

.arock-sl-cat[open] .arock-sl-cat__chev {
	transform: rotate(180deg);
	border-color: var(--sl-accent);
	background-color: var(--sl-accent);
}


/* --------------------------------------------------------------------------
   1b. Amber underline on last word — matches "What We Do" home page heading design
   -------------------------------------------------------------------------- */

/* Animated display headings (For Sale, Listed • Priced • Ready • Yours) */
.qodef-qi-animated-text .qodef-m-title .qodef-e-word-holder:last-child {
	background-image: linear-gradient(#FFB214, #FFB214);
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% 0.055em;
}

/* Category h3 and item h4 last-word spans */
.arock-ul {
	background-image: linear-gradient(#FFB214, #FFB214);
	background-repeat: no-repeat;
	background-position: 0 95%;
	background-size: 100% 0.065em;
}


/* --------------------------------------------------------------------------
   2. Listing row
   Media on the left, headline information on the right, and the specification
   drawer spanning the full width underneath both.
   -------------------------------------------------------------------------- */

.arock-sl-item {
	border-top: 1px solid var(--sl-line);
}

.arock-sl-item__head {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 58%);
}

.arock-sl-item__media {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	background-color: #141414;
}

.arock-sl-item__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 700ms var(--sl-ease);
}

.arock-sl-item:hover .arock-sl-item__img {
	transform: scale(1.05);
}

/* Price tab — flush to the left edge so it reads as a label on the photo
   rather than a floating chip. */
.arock-sl-price {
	position: absolute;
	left: 0;
	bottom: 26px;
	padding: 10px 20px 10px 26px;
	border-radius: 0 999px 999px 0;
	background-color: var(--sl-accent);
	color: var(--sl-ink);
}

.arock-sl-price__label {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.7;
}

.arock-sl-price__value {
	display: block;
	margin-top: 1px;
	font-family: 'Urbanist', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
}

.arock-sl-status {
	position: absolute;
	top: 22px;
	left: 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	border-radius: 999px;
	background-color: rgba(10, 10, 10, 0.78);
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
}

.arock-sl-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sl-accent);
}

.arock-sl-status--available .arock-sl-status__dot {
	background-color: #57C97E;
}

.arock-sl-item__body {
	padding: 32px 34px 30px;
}

.arock-sl-item__estate {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sl-accent);
}

.arock-sl-item__title {
	margin: 9px 0 0;
	font-family: 'Urbanist', sans-serif;
	font-size: clamp(18px, 1.8vw, 20px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--sl-ink);
}

.arock-sl-item__desc {
	margin: 12px 0 0;
	font-family: 'Jost', sans-serif;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--sl-body);
}


/* --------------------------------------------------------------------------
   3. Specification lists
   .arock-sl-quick is the always-visible four-up summary; .arock-sl-specs is the
   full grid inside the drawer. Both use the same label/value pair.
   -------------------------------------------------------------------------- */

.arock-sl-quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 18px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--sl-line);
}

.arock-sl-specs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 20px;
}

.arock-sl-label {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(12, 12, 12, 0.68);
}

.arock-sl-value {
	display: block;
	margin-top: 3px;
	font-family: 'Urbanist', sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sl-ink);
}


/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.arock-sl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.arock-sl-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--sl-dur) var(--sl-ease),
		border-color var(--sl-dur) var(--sl-ease),
		color var(--sl-dur) var(--sl-ease);
}

.arock-sl-btn svg {
	display: block;
	flex: none;
	width: 9px;
	height: 9px;
	fill: currentColor;
	transition: transform var(--sl-dur) var(--sl-ease);
}

.arock-sl-btn:hover svg {
	transform: translateX(4px);
}

.arock-sl-btn--primary {
	background-color: var(--sl-accent);
	color: var(--sl-ink);
}

.arock-sl-btn--primary:hover {
	background-color: var(--sl-ink);
	color: #ffffff;
}

.arock-sl-btn--ghost {
	border-color: rgba(12, 12, 12, 0.24);
	color: var(--sl-ink);
}

.arock-sl-btn--ghost:hover {
	border-color: var(--sl-ink);
	background-color: var(--sl-ink);
	color: #ffffff;
}

.arock-sl-btn:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   5. Detail drawer
   The <summary> is styled as a third button so it sits naturally in the row of
   actions above it, and it swaps its own label using [open] rather than JS.
   -------------------------------------------------------------------------- */

.arock-sl-more {
	border-top: 1px solid var(--sl-line);
	background-color: #FBFAF8;
}

.arock-sl-more__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 34px;
	cursor: pointer;
	list-style: none;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-ink);
	transition: color var(--sl-dur) var(--sl-ease);
}

.arock-sl-more__summary::-webkit-details-marker {
	display: none;
}

.arock-sl-more__summary::marker {
	content: none;
}

.arock-sl-more__summary:hover {
	color: var(--sl-accent);
}

.arock-sl-more__summary:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: -3px;
}

.arock-sl-more__sign {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(12, 12, 12, 0.28);
	border-radius: 50%;
}

.arock-sl-more__sign::before,
.arock-sl-more__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity var(--sl-dur) var(--sl-ease);
}

.arock-sl-more__sign::before {
	width: 9px;
	height: 1px;
}

.arock-sl-more__sign::after {
	width: 1px;
	height: 9px;
}

.arock-sl-more[open] .arock-sl-more__sign::after {
	opacity: 0;
}

/* Label swap: the "open" wording only appears once the drawer is open. */
.arock-sl-more:not([open]) .arock-sl-more__on,
.arock-sl-more[open] .arock-sl-more__off {
	display: none;
}

.arock-sl-panel {
	padding: 6px 34px 36px;
}

.arock-sl-block {
	padding-top: 26px;
	margin-top: 26px;
	border-top: 1px solid var(--sl-line);
}

.arock-sl-block:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.arock-sl-block__title {
	margin: 0 0 16px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(12, 12, 12, 0.65);
}

.arock-sl-block__text {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--sl-body);
}

.arock-sl-block__text + .arock-sl-block__text {
	margin-top: 12px;
}

/* Inclusions beside the map, gallery and media full width below them. */
.arock-sl-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px;
}


/* --------------------------------------------------------------------------
   6. Inclusions
   -------------------------------------------------------------------------- */

.arock-sl-inclusions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
}

.arock-sl-inclusions li {
	position: relative;
	padding-left: 22px;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sl-body);
}

.arock-sl-inclusions li::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 9px;
	height: 5px;
	border-left: 1.5px solid var(--sl-accent);
	border-bottom: 1.5px solid var(--sl-accent);
	transform: rotate(-45deg);
}


/* --------------------------------------------------------------------------
   7. Location map
   The plan-grid backdrop is drawn in CSS so the panel needs no image and no
   third-party embed; the link hands off to the user's own map application.
   -------------------------------------------------------------------------- */

.arock-sl-map {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 210px;
	padding: 22px;
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	overflow: hidden;
	background-color: #EFEDE8;
	background-image:
		linear-gradient(rgba(12, 12, 12, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 12, 12, 0.055) 1px, transparent 1px),
		linear-gradient(rgba(12, 12, 12, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 12, 12, 0.10) 1px, transparent 1px);
	background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
}

.arock-sl-map__pin {
	position: absolute;
	top: 46%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 4px solid var(--sl-accent);
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0 0 0 8px rgba(255, 178, 20, 0.22);
}

.arock-sl-map__address {
	position: relative;
	margin: 0;
	font-family: 'Urbanist', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sl-ink);
}

.arock-sl-map__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-ink);
	border-bottom: 1px solid var(--sl-accent);
	align-self: flex-start;
	padding-bottom: 2px;
}

.arock-sl-map__link:hover {
	color: var(--sl-accent);
}


/* --------------------------------------------------------------------------
   8. Gallery, video, floor plan
   -------------------------------------------------------------------------- */

.arock-sl-gallery {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.arock-sl-gallery a {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background-color: #141414;
}

.arock-sl-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 500ms var(--sl-ease),
		opacity var(--sl-dur) var(--sl-ease);
}

.arock-sl-gallery a:hover img {
	transform: scale(1.06);
	opacity: 0.82;
}

.arock-sl-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px;
}

.arock-sl-video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background-color: #141414;
}

.arock-sl-video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.78;
	transition: opacity var(--sl-dur) var(--sl-ease);
}

.arock-sl-video:hover img {
	opacity: 0.62;
}

.arock-sl-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: -31px 0 0 -31px;
	border-radius: 50%;
	background-color: var(--sl-accent);
	transition: transform var(--sl-dur) var(--sl-ease);
}

.arock-sl-video:hover .arock-sl-video__play {
	transform: scale(1.08);
}

.arock-sl-video__play svg {
	width: 16px;
	height: 16px;
	margin-left: 3px;
	fill: var(--sl-ink);
}

.arock-sl-video__caption {
	position: absolute;
	left: 18px;
	bottom: 16px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

/* Floor plans are supplied as drawings rather than photographs, so the tile is
   a marked placeholder instead of a thumbnail that would misrepresent them. */
.arock-sl-plan {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	aspect-ratio: 16 / 9;
	padding: 24px;
	border: 1px dashed rgba(12, 12, 12, 0.28);
	border-radius: 8px;
	background-color: #ffffff;
	background-image:
		linear-gradient(rgba(12, 12, 12, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 12, 12, 0.04) 1px, transparent 1px);
	background-size: 18px 18px;
	transition: border-color var(--sl-dur) var(--sl-ease);
}

.arock-sl-plan:hover {
	border-color: var(--sl-accent);
}

.arock-sl-plan__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: 8px;
	fill: none;
	stroke: var(--sl-accent);
	stroke-width: 1.6;
}

.arock-sl-plan__title {
	font-family: 'Urbanist', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--sl-ink);
}

.arock-sl-plan__note {
	font-family: 'Jost', sans-serif;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sl-body);
}


/* --------------------------------------------------------------------------
   9. CTA section (injected from home page pattern)
   -------------------------------------------------------------------------- */

.elementor-element.elementor-element-6c2f5ce {
	position: relative !important;
	clip-path: inset(0) !important;
	-webkit-clip-path: inset(0) !important;
	background-image: none !important;
	background-color: #0b0c0e !important;
	background-attachment: initial !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 7% 5% 7% 5%;
}

.elementor-element.elementor-element-6c2f5ce::before {
	content: "" !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	background-image: url("../img/oculus-building-2.jpg") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	will-change: transform !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.elementor-element.elementor-element-6c2f5ce > .elementor-background-overlay {
	position: absolute !important;
	inset: 0 !important;
	background-color: rgba(0, 0, 0, 0.55) !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

.elementor-element.elementor-element-6c2f5ce > .elementor-container {
	position: relative;
	z-index: 1;
	min-height: 40vh;
	text-align: center;
}

/* Force CTA text visible — animation JS may not fire on static export */
.elementor-element.elementor-element-6c2f5ce .elementor-invisible {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	transform: none !important;
}

.elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text {
	text-align: center;
}

.elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text .qodef-m-text {
	color: #FFFFFF;
	font-size: clamp(40px, 4.4vw, 52px);
	font-weight: 500;
}

.elementor-element.elementor-element-b403adb .qodef-qi-typeout-text {
	text-align: center;
}

.elementor-element.elementor-element-b403adb .qodef-qi-typeout-text .qodef-m-text {
	color: #FFFFFF;
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 400;
}

.elementor-element.elementor-element-d044966 {
	width: auto;
	max-width: none;
}

.elementor-element.elementor-element-d044966 > .elementor-widget-container {
	margin: 24px 0px 0px 0px;
	padding: 0px 0px 18px 0px;
}

.elementor-element.elementor-element-d044966 .qodef-qi-button {
	font-family: var(--ar-body, 'Plus Jakarta Sans', sans-serif);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #0A0A08;
	background-color: #FFB214;
	border: 2px solid #FFB214;
	border-radius: 26px;
	padding: 12px 30px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.elementor-element.elementor-element-d044966 .qodef-qi-button:hover {
	color: #0A0A08;
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(255, 178, 20, 0.35);
}

.elementor-element.elementor-element-d044966 .qodef-qi-button.qodef-type--icon-boxed .qodef-m-text {
	padding: 10px 10px 10px 30px;
}

@media (max-width: 1024px) {
	.elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text .qodef-m-text {
		font-size: 36px;
	}
	.elementor-element.elementor-element-b403adb .qodef-qi-typeout-text .qodef-m-text {
		font-size: 16.5px;
	}
}

@media (max-width: 767px) {
	.elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text .qodef-m-text {
		font-size: 28px;
	}
	.elementor-element.elementor-element-b403adb .qodef-qi-typeout-text .qodef-m-text {
		font-size: 15px;
	}
	.elementor-element.elementor-element-6c2f5ce {
		padding: 8% 5% 8% 5%;
	}
}


/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.arock-sl-item__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.arock-sl-item__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.arock-sl-item__body {
		padding: 26px 26px 28px;
	}

	.arock-sl-item__title {
		font-size: 19px;
	}

	.arock-sl-specs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.arock-sl-more__summary {
		padding: 18px 26px;
	}

	.arock-sl-panel {
		padding: 6px 26px 30px;
	}

	.arock-sl-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* ── Top Hero Slider & Header Spacing ─────────────────── */
	.elementor-1178 .elementor-element-ac03a1f .bdt-prime-slider-skin-general,
	.elementor-1178 .elementor-element-ac03a1f .bdt-slideshow-item {
		min-height: 280px !important;
	}

	.elementor-1178 .elementor-element-b43c1f1 {
		padding-top: 30px !important;
		padding-bottom: 16px !important;
	}

	.elementor-1178 .elementor-element-b43c1f1 .qodef-m-title {
		font-size: clamp(26px, 7.5vw, 34px) !important;
		line-height: 1.25 !important;
		margin-bottom: 14px !important;
		word-break: normal !important;
	}

	.elementor-1178 .elementor-element-b43c1f1 .qodef-e-word-holder {
		display: inline-block !important;
	}

	.arock-sales {
		padding: 0 0 36px !important;
	}

	/* ── Category Accordion Shell ─────────────────────────── */
	.arock-sl-cat {
		border-radius: 12px !important;
		margin-bottom: 24px !important;
		border: 1px solid rgba(12, 12, 12, 0.1) !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
	}

	.arock-sl-cat[open] {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
	}

	.arock-sl-cat__summary {
		flex-wrap: wrap;
		gap: 12px 14px;
		padding: 20px 18px;
		background-color: #F7F5F1;
	}

	.arock-sl-cat__index {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.arock-sl-cat__title {
		font-size: 19px;
		font-weight: 700;
		line-height: 1.25;
	}

	.arock-sl-cat__note {
		font-size: 13.5px;
		line-height: 1.5;
		color: #666666;
		margin-top: 4px;
	}

	/* The count takes the full width below index/title for clean balance */
	.arock-sl-cat__count {
		order: 3;
		width: calc(100% - 48px);
		font-size: 10.5px;
		letter-spacing: 0.12em;
	}

	.arock-sl-cat__chev {
		width: 32px;
		height: 32px;
	}

	/* ── Card Media & Badges ──────────────────────────────── */
	.arock-sl-item__media {
		aspect-ratio: 16 / 10 !important;
		min-height: 0 !important;
	}

	.arock-sl-status {
		top: 14px !important;
		left: 14px !important;
		padding: 5px 12px !important;
		font-size: 10px !important;
		letter-spacing: 0.1em !important;
		backdrop-filter: blur(8px);
	}

	.arock-sl-price {
		bottom: 16px !important;
		left: 0 !important;
		padding: 8px 16px 8px 18px !important;
		border-radius: 0 999px 999px 0 !important;
	}

	.arock-sl-price__label {
		font-size: 9px !important;
		letter-spacing: 0.12em !important;
	}

	.arock-sl-price__value {
		font-size: 16.5px !important;
		font-weight: 700 !important;
	}

	/* ── Card Body & Quick Specs ──────────────────────────── */
	.arock-sl-item__body {
		padding: 20px 18px 22px !important;
	}

	.arock-sl-item__estate {
		font-size: 10.5px !important;
		font-weight: 600 !important;
		letter-spacing: 0.14em !important;
		color: #C47D00 !important;
	}

	.arock-sl-item__title {
		font-size: 21px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		margin-top: 5px !important;
	}

	.arock-sl-item__desc {
		font-size: 13.5px !important;
		line-height: 1.6 !important;
		color: #555555 !important;
		margin-top: 8px !important;
	}

	.arock-sl-quick {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px 14px !important;
		margin-top: 16px !important;
		padding-top: 16px !important;
		border-top: 1px solid rgba(12, 12, 12, 0.09) !important;
	}

	.arock-sl-label {
		font-size: 10.5px !important;
		font-weight: 600 !important;
		letter-spacing: 0.1em !important;
		color: #777777 !important;
	}

	.arock-sl-value {
		font-size: 14.5px !important;
		font-weight: 700 !important;
		margin-top: 2px !important;
		color: #0C0C0C !important;
	}

	.arock-sl-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		margin-top: 18px !important;
	}

	.arock-sl-actions .arock-sl-btn {
		width: 100% !important;
		justify-content: center !important;
		padding: 12px 20px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: 0.08em !important;
		border-radius: 999px !important;
		box-sizing: border-box !important;
	}

	/* ── Detail Drawer ────────────────────────────────────── */
	.arock-sl-more {
		border-top: 1px solid rgba(12, 12, 12, 0.08) !important;
		background-color: #FAF9F6 !important;
	}

	.arock-sl-more__summary {
		padding: 15px 18px !important;
		font-size: 11.5px !important;
		font-weight: 600 !important;
		letter-spacing: 0.12em !important;
	}

	.arock-sl-panel {
		padding: 6px 18px 24px !important;
	}

	.arock-sl-specs {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px 14px !important;
	}

	.arock-sl-split,
	.arock-sl-media {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px !important;
	}

	.arock-sl-inclusions {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px !important;
	}

	.arock-sl-inclusions li {
		font-size: 13.5px !important;
		line-height: 1.55 !important;
		padding-left: 20px !important;
	}

	.arock-sl-map {
		min-height: 190px !important;
		padding: 16px !important;
		border-radius: 8px !important;
	}

	.arock-sl-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}


/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.arock-sales *,
	.arock-sales *::before,
	.arock-sales *::after {
		transition-duration: 1ms !important;
	}

	.arock-sl-item:hover .arock-sl-item__img,
	.arock-sl-gallery a:hover img,
	.arock-sl-video:hover .arock-sl-video__play {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Storeys filter bar (arock-sales-list.js) — "All / Single Storey /
   Double Storey / Split-Level". Rendered inside #arock-sl-app above the
   accordion, so it lives outside the .arock-sales custom-property scope
   above — literal colours here, matching --sl-accent/--sl-ink.
   -------------------------------------------------------------------------- */

.arock-sl-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 34px;
	align-items: center;
	padding: 0;
}

.arock-sl-filterbar .arock-sl-filter-btn,
button.arock-sl-filter-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 10px 18px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(12, 12, 12, 0.16) !important;
	background-color: #ffffff !important;
	color: #0C0C0C !important;
	font-family: 'Plus Jakarta Sans', 'Urbanist', 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transform: translateZ(0);
	transition: background-color 200ms ease,
	            color 200ms ease,
	            border-color 200ms ease,
	            transform 180ms ease !important;
}

.arock-sl-filterbar .arock-sl-filter-btn:hover,
button.arock-sl-filter-btn:hover {
	border-color: #FFB214 !important;
	color: #000000 !important;
	background-color: #ffffff !important;
}

.arock-sl-filterbar .arock-sl-filter-btn:focus-visible,
button.arock-sl-filter-btn:focus-visible {
	outline: 2px solid #FFB214 !important;
	outline-offset: 2px !important;
}

.arock-sl-filterbar .arock-sl-filter-btn.is-active,
button.arock-sl-filter-btn.is-active {
	background-color: #0C0C0C !important;
	border-color: #0C0C0C !important;
	color: #FFB214 !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
}

.arock-sl-filterbar .arock-sl-filter-btn.is-active:hover,
button.arock-sl-filter-btn.is-active:hover {
	background-color: #0C0C0C !important;
	border-color: #0C0C0C !important;
	color: #FFB214 !important;
}

@media (max-width: 767px) {
	.arock-sl-filterbar {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		gap: 8px !important;
		margin: 0 0 24px !important;
		padding: 4px 2px 10px !important;
	}

	.arock-sl-filterbar::-webkit-scrollbar {
		display: none !important;
	}

	.arock-sl-filterbar .arock-sl-filter-btn,
	button.arock-sl-filter-btn {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		padding: 9px 16px !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em !important;
		border-radius: 999px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arock-sl-filterbar .arock-sl-filter-btn,
	button.arock-sl-filter-btn {
		transition-duration: 1ms !important;
		transform: none !important;
	}
}