/*
 * Shop the Room (formafern/shop-the-room). Loaded only where the block renders.
 *
 * Hotspots are placed with percentages of the photograph, inside a wrapper
 * that takes the photograph's own proportions, so they stay on their pieces at
 * every width. Below 900px the product list moves under the photograph and is
 * the main way in; the numbered pins remain as a visual key and still open.
 */

.fo-room {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	grid-template-areas:
		"intro intro"
		"scene list";
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: start;
}

.fo-room:not(.has-list) {
	grid-template-columns: 1fr;
	grid-template-areas: "intro" "scene";
}

.fo-room__intro {
	grid-area: intro;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	column-gap: var(--wp--preset--spacing--60);
	align-items: end;
}

.fo-room__intro > .is-style-fo-eyebrow {
	grid-column: 1 / -1;
}

.fo-room__intro > * {
	margin-block: 0;
}

.fo-room__scene {
	grid-area: scene;
	position: relative;
	margin: 0;
	line-height: 0;
}

.fo-room__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	background: var(--wp--custom--image--tone);
}

.fo-room__spots {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.4;
}

.fo-room__spot {
	position: absolute;
	inset-inline-start: var(--fo-x);
	inset-block-start: var(--fo-y);
	z-index: 1;
}

[dir="rtl"] .fo-room__spot {
	inset-inline-start: auto;
	left: var(--fo-x);
}

.fo-room__spot.is-open {
	z-index: 3;
}

.fo-room__pin {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	max-inline-size: none;
	block-size: 2.25rem;
	margin: -1.125rem 0 0 -1.125rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(245, 242, 234, 0.92);
	color: #333832;
	box-shadow: 0 0 0 1px rgba(51, 56, 50, 0.08), 0 6px 18px -6px rgba(43, 48, 42, 0.45);
	font: 500 0.75rem/1 var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: transform var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

/* A slow, soft ring so the pins are discoverable; off with reduced motion. */
.fo-room__pin::before {
	content: "";
	position: absolute;
	inset: -6px;
	border: 1px solid rgba(245, 242, 234, 0.8);
	border-radius: 50%;
	animation: fo-pin 2.8s ease-out infinite;
}

.fo-room__pin:hover,
.fo-room__pin[aria-expanded="true"] {
	transform: scale(1.08);
	background: #333832;
	color: #F5F2EA;
}

.fo-room__pin[aria-expanded="true"]::before {
	animation: none;
	opacity: 0;
}

.fo-room__pin:focus-visible {
	outline: 2px solid #F5F2EA;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #333832;
}

@keyframes fo-pin {

	0% {
		transform: scale(0.85);
		opacity: 0.9;
	}

	70%,
	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fo-room__pin::before {
		animation: none;
	}
}

/* Without JavaScript the pins are a numbered key only; the list is the way in. */
.fo-room:not(.is-ready) .fo-room__pin {
	pointer-events: none;
}

/* Popover card */
.fo-room__pop {
	position: absolute;
	inset-block-start: 1.6rem;
	inset-inline-start: -1rem;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0.85rem;
	inline-size: 18.5rem;
	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--md), 0 0 0 1px rgba(51, 56, 50, 0.06);
	animation: fo-pop 200ms ease-out;
}

.fo-room__pop[hidden] {
	display: none;
}

.is-flip-x .fo-room__pop {
	inset-inline-start: auto;
	inset-inline-end: -1rem;
}

.is-flip-y .fo-room__pop {
	inset-block-start: auto;
	inset-block-end: 1.6rem;
}

@keyframes fo-pop {

	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

.fo-room__pop-media img {
	display: block;
	inline-size: 4.5rem;
	block-size: 5.6rem;
	object-fit: cover;
	background: var(--wp--custom--image--tone);
}

.fo-room__pop-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-inline-size: 0;
}

.fo-room__pop-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 380;
	line-height: 1.25;
	text-decoration: none;
}

.fo-room__pop-price,
.fo-room__item-price {
	font-size: var(--wp--preset--font-size--small);
}

.fo-room__pop-stock,
.fo-room__item-stock {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--sale);
}

.fo-room__pop-link {
	margin-block-start: auto;
	padding-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-underline-offset: 0.4em;
}

.fo-room__close {
	position: absolute;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.25rem;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.fo-room__close:hover {
	color: var(--wp--preset--color--contrast);
}

/* Product list */
.fo-room__products {
	grid-area: list;
	position: sticky;
	inset-block-start: calc(var(--fo-sticky-offset, 5rem) + 1.5rem);
}

.fo-room__products-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.fo-room__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--fo-rule, 1px solid var(--wp--preset--color--line));
}

.fo-room__item {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem 3.5rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
	padding-block: 0.75rem;
	border-block-end: var(--fo-rule, 1px solid var(--wp--preset--color--line));
	transition: background-color var(--wp--custom--transition);
}

.fo-room__item.is-active {
	background: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
}

.fo-room__item-num {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-feature-settings: "tnum" on;
	text-align: center;
}

.fo-room__item-media img {
	display: block;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	object-fit: cover;
	background: var(--wp--custom--image--tone);
}

.fo-room__item-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-inline-size: 0;
}

.fo-room__item-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 380;
	text-decoration: none;
}

.fo-room__item-name::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fo-room__item:hover .fo-room__item-name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.fo-room__empty {
	padding: 2rem;
	border: 1px dashed var(--wp--preset--color--line);
	text-align: center;
}

@media (max-width: 899px) {

	.fo-room,
	.fo-room.has-list {
		grid-template-columns: 1fr;
		grid-template-areas: "intro" "scene" "list";
		gap: var(--wp--preset--spacing--40);
	}

	.fo-room__intro {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--30);
	}

	.fo-room__products {
		position: static;
	}

	.fo-room__pin {
		inline-size: 1.85rem;
		block-size: 1.85rem;
		margin: -0.925rem 0 0 -0.925rem;
	}

	/* Small screens: the open card docks to the bottom of the photograph. */
	.fo-room__spot {
		position: static;
	}

	.fo-room__spot .fo-room__pin {
		position: absolute;
		inset-inline-start: var(--fo-x);
		inset-block-start: var(--fo-y);
	}

	.fo-room__pop,
	.is-flip-x .fo-room__pop,
	.is-flip-y .fo-room__pop {
		inset: auto 0.5rem 0.5rem 0.5rem;
		inline-size: auto;
	}
}

.fo-room__pin.is-hinted {
	transform: scale(1.12);
	background: #333832;
	color: #F5F2EA;
}

@media (max-width: 599px) {

	.fo-room__pin {
		inline-size: 1.75rem;
		block-size: 1.75rem;
		margin: -0.875rem 0 0 -0.875rem;
		font-size: 0.75rem;
	}
}