/* "Elata: Mattress Range" — all CSS for this block lives here.
   Re-derived from ShopifyTheme/sections/elata-mattress-range.liquid's <style>
   block (breakpoints 1200px / 990px preserved exactly).

   Attribute-driven values arrive as CSS custom properties set inline on the
   block wrapper's style="" attribute (see render.php). Selectors target the
   STATIC .elata-mattress-range class — never the per-instance wp_unique_id()
   class — so render.php never has to inject a raw <style> element. That was
   the bug: some WordPress content filters strip literal <style> tags out of
   block render output and leave the CSS text behind as visible page copy.

   Values that were schema settings in Shopify but are NOT block attributes
   here (typography, section padding, image-container margins, line-height)
   are baked in at the exact value used by the real homepage section
   elata_mattress_range_cpXy69 in templates/page.elata-home.json — see the
   render.php header for why.

   The Liquid's !important flags are dropped: they existed to beat the Shopify
   base theme's typography, which does not apply here. */

.elata-mattress-range,
.elata-mattress-range * {
	box-sizing: border-box;
}

.elata-mattress-range {
	padding: 60px 0 80px 0;
	background-color: var( --mr-bg, #2b2b2b );
	font-family: 'Poppins', sans-serif;
}

.elata-mattress-range button {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.elata-mattress-range .elata-container {
	width: 100%;
	padding: 0 40px;
	/* base.css caps the shared .elata-container at --elata-max-width (1600px)
	   and centres it. This section's `enable_max_width` is FALSE on the
	   homepage, so the live version runs edge to edge — at 1920px its content
	   starts at x=40 while ours started at x=200, inside a 1600px box. The
	   opt-in cap is applied to .elata-inner-container via --mr-max-width
	   instead (see the .has-max-width rules below), so this outer wrapper must
	   not carry one. */
	max-width: none;
}

.elata-mattress-range .elata-inner-container {
	max-width: var( --mr-max-width, none );
	margin: 0 auto;
}

/* Liquid: @media (min-width: {{ max_width | plus: 80 }}px). The breakpoint
   itself is setting-driven, which a static stylesheet cannot express, so it
   is pinned to the schema default (1600 + 80 = 1680px) and gated on the
   .has-max-width class render.php adds when "Enable max width" is on. */
@media (min-width: 1680px) {
	.elata-mattress-range.has-max-width .elata-container {
		padding: 0 60px;
	}
}

/* Section Title */
.elata-mattress-range .section-title {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.7;
	color: var( --mr-text, #ffffff );
	margin: 0 0 30px 0;
	max-width: 150px;
}

/* Product Tabs Navigation */
.elata-mattress-range .product-tabs-wrapper {
	border-top: 1px solid #fff;
	position: relative;
	margin-bottom: 30px;
	padding-top: 20px;
}

.elata-mattress-range .product-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}

/* Horizontal-scroll indicators — hidden on large screens, where the tab row
   fits and does not scroll. Ported from the Liquid's .scroll-indicator rules;
   view.js toggles .hidden. */
.elata-mattress-range .scroll-indicator {
	display: none;
}

@keyframes elataScrollHintRight {
	0%, 100% { opacity: 1; transform: rotate( -45deg ) translateX( 0 ); }
	50% { opacity: 0.5; transform: rotate( -45deg ) translateX( 3px ); }
}

@keyframes elataScrollHintLeft {
	0%, 100% { opacity: 1; transform: rotate( 135deg ) translateX( 0 ); }
	50% { opacity: 0.5; transform: rotate( 135deg ) translateX( 3px ); }
}

.elata-mattress-range .product-tab-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	opacity: 0.3;
	transition: opacity 0.3s ease;
	position: relative;
}

.elata-mattress-range .product-tab-btn::before {
	content: '';
	position: absolute;
	top: -23px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.elata-mattress-range .product-tab-btn:hover {
	opacity: 0.6;
}

.elata-mattress-range .product-tab-btn.active {
	opacity: 1;
}

.elata-mattress-range .product-tab-btn.active::before {
	transform: scaleX(1);
}

.elata-mattress-range .product-tab-btn .tab-name {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.7;
	color: var( --mr-text, #ffffff );
	transition: color 0.3s ease;
}

.elata-mattress-range .product-tab-btn .tab-model {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
	color: var( --mr-text, #ffffff );
	transition: color 0.3s ease;
}

.elata-mattress-range .product-tab-btn.active .tab-name {
	color: #c76328;
}

.elata-mattress-range .product-tab-btn.active .tab-model {
	color: #c76328;
}

/* Product Tab Content */
.elata-mattress-range .product-tab-content {
	display: none;
}

.elata-mattress-range .product-tab-content.active {
	display: block;
}

/* Product Description */
.elata-mattress-range .product-description {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
	color: var( --mr-text, #ffffff );
	margin-bottom: 40px;
	max-width: 75%;
}

.elata-mattress-range .product-description strong {
	font-size: 20px;
	font-weight: 700;
	color: var( --mr-text, #ffffff );
}

/* Content Grid - Image Left, Layers Right */
.elata-mattress-range .content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
	max-width: var( --mr-max-width, none );
	margin: 0 auto;
}

/* Mattress Image Container */
.elata-mattress-range .mattress-image-container {
	position: relative;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -60px;
}

.elata-mattress-range .mattress-image-wrapper {
	position: relative;
	display: block;
}

.elata-mattress-range .mattress-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

.elata-mattress-range .mattress-image-container img {
	max-width: none;
}

/* WordPress-only: stand-in shown until the original Shopify image is
   re-uploaded and picked in the block Inspector (see render.php). */
.elata-mattress-range .mattress-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 320px;
	background: #555;
	color: var( --mr-text-muted, #cccccc );
	font-size: 13px;
	text-align: center;
	padding: 20px;
}

/* Layer Markers on Image */
.elata-mattress-range .layer-markers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.elata-mattress-range .layer-marker {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #808080;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	/* Always white, NOT var(--mr-text). The markers sit on a solid grey/orange
	   disc, so their numeral has to contrast with the disc, not with the
	   section background — wiring them to the section's body-text colour made
	   them #222 on grey the moment a page set a dark textColor (which every
	   product page does: description_color is #222222). */
	color: #ffffff;
	cursor: pointer;
	pointer-events: all;
	transition: all 0.3s ease;
	transform: translate(-50%, -50%);
	animation: elataMrMarkerPulse 1.5s ease-in-out infinite;
}

.elata-mattress-range .layer-marker:hover,
.elata-mattress-range .layer-marker.active {
	background: var( --mr-marker, #e86c3a );
	transform: translate(-50%, -50%) scale(1.15);
	box-shadow: 0 0 0 3px var( --mr-marker-ring, #e86c3a4d );
}

.elata-mattress-range .layer-markers.interacted .layer-marker {
	animation: none;
}

/* Static keyframes: the colour stops read the wrapper's custom properties,
   which resolve against the animated element, so one shared @keyframes works
   for every instance (the Liquid had to suffix it with section.id). */
@keyframes elataMrMarkerPulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 var( --mr-marker-glow, #e86c3a66 );
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		box-shadow: 0 0 0 12px var( --mr-marker-glow-end, #e86c3a00 );
		transform: translate(-50%, -50%) scale(1.1);
	}
}

/* Layer Descriptions */
.elata-mattress-range .layer-descriptions {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 600px;
}

.elata-mattress-range .layer-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	opacity: 0.5;
	transition: opacity 0.3s ease;
	padding: 15px 0;
	cursor: pointer;
}

.elata-mattress-range .layer-item.active {
	opacity: 1;
}

.elata-mattress-range .layer-item .layer-description {
	display: none;
}

.elata-mattress-range .layer-item.active .layer-description {
	display: block;
}

.elata-mattress-range .layer-number {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #808080;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	color: #ffffff;
	transition: all 0.3s ease;
	margin-top: 2px;
}

.elata-mattress-range .layer-item.active .layer-number {
	background: var( --mr-marker, #e86c3a );
}

.elata-mattress-range .layer-text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.elata-mattress-range .layer-title {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	color: var( --mr-text, #ffffff );
	margin: 0;
}

.elata-mattress-range .layer-description {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	color: var( --mr-text, #ffffff );
	margin: -2px 0 0 0;
}

/* CTA Section */
.elata-mattress-range .product-cta {
	margin-top: 50px;
}

.elata-mattress-range .product-cta-text {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
	color: var( --mr-text, #ffffff );
	margin: 0 0 25px 0;
	max-width: 600px;
}

.elata-mattress-range .product-cta-btn {
	display: inline-block;
	background: #c76328;
	color: var( --mr-text, #ffffff );
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.7;
	text-decoration: none;
	padding: 14px 30px;
	border-radius: 60px;
	transition: all 0.3s ease;
}

.elata-mattress-range .product-cta-btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* Tablet — breakpoint taken verbatim from the Liquid source. */
@media (max-width: 1200px) {
	.elata-mattress-range .elata-container {
		padding: 0 40px;
	}

	.elata-mattress-range .content-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.elata-mattress-range .product-tabs-wrapper {
		margin-left: -40px;
		margin-right: -40px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.elata-mattress-range .scroll-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY( -50% );
		width: 40px;
		height: 100%;
		z-index: 5;
		pointer-events: auto;
		cursor: pointer;
		transition: opacity 0.3s ease;
	}

	.elata-mattress-range .scroll-indicator:hover {
		opacity: 0.7;
	}

	.elata-mattress-range .scroll-indicator.scroll-right {
		right: 0;
		background: linear-gradient( to right, transparent, var( --mr-bg, #2b2b2b ) 60% );
	}

	.elata-mattress-range .scroll-indicator.scroll-left {
		left: 0;
		background: linear-gradient( to left, transparent, var( --mr-bg, #2b2b2b ) 60% );
	}

	.elata-mattress-range .scroll-indicator::after {
		content: '';
		width: 10px;
		height: 10px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
	}

	.elata-mattress-range .scroll-indicator.scroll-right::after {
		transform: rotate( -45deg );
		margin-right: 5px;
		animation: elataScrollHintRight 1.5s ease-in-out infinite;
	}

	.elata-mattress-range .scroll-indicator.scroll-left::after {
		transform: rotate( 135deg );
		margin-left: 5px;
		animation: elataScrollHintLeft 1.5s ease-in-out infinite;
	}

	.elata-mattress-range .scroll-indicator.hidden {
		opacity: 0;
		pointer-events: none;
	}

	.elata-mattress-range .product-tabs-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 25px;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-top: 25px;
		margin-top: -25px;
		padding-bottom: 5px;
	}

	.elata-mattress-range .product-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	.elata-mattress-range .product-tab-btn {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.elata-mattress-range .product-tab-btn::before {
		top: -28px;
	}

	.elata-mattress-range .layer-number {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.elata-mattress-range .layer-marker {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}
}

/* Mobile — breakpoint taken verbatim from the Liquid source. */
@media (max-width: 990px) {
	.elata-mattress-range .elata-container {
		padding: 0 20px;
	}

	.elata-mattress-range .section-title {
		font-size: 16px;
	}

	.elata-mattress-range .product-tab-btn .tab-name {
		font-size: 16px;
	}

	.elata-mattress-range .product-tab-btn .tab-model {
		font-size: 16px;
	}

	.elata-mattress-range .product-description {
		font-size: 14px;
	}

	.elata-mattress-range .product-description strong {
		font-size: 14px;
	}

	.elata-mattress-range .product-cta-text,
	.elata-mattress-range .product-cta-btn {
		font-size: 14px;
	}

	.elata-mattress-range .product-description {
		max-width: 100%;
	}

	.elata-mattress-range .layer-title {
		font-size: 14px;
	}

	.elata-mattress-range .layer-description {
		font-size: 12px;
	}

	.elata-mattress-range .content-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.elata-mattress-range .product-tabs-wrapper {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 15px;
	}

	.elata-mattress-range .product-tabs-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 25px;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-top: 25px;
		margin-top: -25px;
		padding-bottom: 5px;
	}

	.elata-mattress-range .product-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	.elata-mattress-range .product-tab-btn {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.elata-mattress-range .product-tab-btn::before {
		top: -18px;
	}

	.elata-mattress-range .mattress-image {
		max-width: 100%;
	}

	/* On mobile the live section shows ONE layer at a time, not the full
	   stacked list: .layer-descriptions is an overflow:hidden box, the active
	   item is position:relative and the rest are absolutely positioned at
	   opacity 0 underneath it. Tapping a numbered marker on the mattress image
	   swaps which one is active — view.js already toggles .active on both the
	   marker and the item, so no JS change is needed. Without this the list
	   rendered all eight layers stacked, adding ~600px of page height the live
	   page does not have. */
	.elata-mattress-range .layer-descriptions {
		order: 2;
		position: relative;
		overflow: hidden;
	}

	.elata-mattress-range .layer-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		pointer-events: none;
	}

	.elata-mattress-range .layer-item.active {
		position: relative;
		opacity: 1;
		pointer-events: auto;
	}

	.elata-mattress-range .mattress-image-container {
		order: 1;
		margin-top: 0;
		margin-right: -20px;
		margin-bottom: 0;
		margin-left: -20px;
	}

	.elata-mattress-range .mattress-image-wrapper {
		overflow: visible;
	}

	/* Markers sit hard against the left edge on mobile, so the original
	   drops the -50% X translate (and uses a matching pulse keyframe). */
	.elata-mattress-range .layer-marker {
		transform: translate(0, -50%);
		animation: elataMrMarkerPulseMobile 1.5s ease-in-out infinite;
	}

	.elata-mattress-range .layer-markers.interacted .layer-marker {
		animation: none;
	}

	.elata-mattress-range .layer-marker:hover,
	.elata-mattress-range .layer-marker.active {
		transform: translate(0, -50%) scale(1.15);
	}

	.elata-mattress-range .section-title {
		max-width: 100px;
	}
}

@keyframes elataMrMarkerPulseMobile {
	0%,
	100% {
		box-shadow: 0 0 0 0 var( --mr-marker-glow, #e86c3a66 );
		transform: translate(0, -50%) scale(1);
	}
	50% {
		box-shadow: 0 0 0 12px var( --mr-marker-glow-end, #e86c3a00 );
		transform: translate(0, -50%) scale(1.1);
	}
}