.find-in-store--cta {
	margin: 36px 0;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	cursor: pointer;

	&[data-enabled="false"] {
		opacity: 0.6;
		pointer-events: none;
	}
}

find-in-store {
	@media screen and (max-width: 750px) {
		.find-in-store--modal-inner {
			min-width: 400px;
			width: 90vw;
		}
	}

	@media screen and (max-width: 500px) {
		.find-in-store--modal-inner {

			/** Move to the bottom **/
			top: unset;
			bottom: 0;
			left: 0;
			right: 0;
			transform: unset;

			min-width: unset;
			max-width: unset;
			width: 100vw;

			min-height: 55vh;
			max-height: 75vh;

			--spacing-horizontal: var(--spacing-200);

			.find-in-store--modal-product {
				margin-top: 12px;
				margin-bottom: 12px;
			}

			.find-in-store--message {
				padding-top: 48px;
				padding-bottom: 48px;
			}
		}
	}

}

.find-in-store--modal-inner {
	--spacing-vertical: var(--spacing-300, 24px);
	--spacing-horizontal: var(--spacing-600, 48px);

	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 700px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--COLOR-BG);
	padding: var(--spacing-vertical) 0;

	.find-in-store--modal-product {
		display: flex;
		gap: 8px;
		align-items: center;
		padding: 0 var(--spacing-horizontal);
		margin: 24px 0;

		.find-in-store--modal-image {
			width: 80px;
			max-height: 200px;
			aspect-ratio: 2 / 3;

			find-in-store[data-image-available="false"] & {
				display: none;
			}
		}

		.find-in-store--modal-product-data {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			gap: 4px;
		}
	}

	.find-in-store--modal-inventory {
		padding: 0 var(--spacing-horizontal);
		margin: 16px 0;
	}

	.find-in-store--modal-title {
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
	}

	.find-in-store--modal-closer {
		position: absolute;
		top: 0;
		right: 0;
		padding: 8px;
		margin: 8px 16px;
	}

	.find-in-store--message {
		text-align: center;
		/* border-top: 1px solid rgb(216 216 216); */
		/* border-bottom: 1px solid rgb(216 216 216); */
		/* margin: 16px 0; */
		padding: 16px var(--spacing-horizontal);
	}

	.find-in-store--modal-store {

		&[data-available-in-store="false"] {
			display: none;
		}

		.header { 
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;
			flex-wrap: wrap;
			column-gap: 100px;
		}
		
		.green-dot {
			width: 12px;
			height: 12px;
			display: inline-block;
			border-radius: 50%;
			background: rgb(27 155 28);
			vertical-align: middle;
			margin-left: 4px;
		}

		.name {
			font-size: 140%;
		}

		.opening-hours {
			margin: 16px 0;
		}

		.actions {
			display: flex;
			gap: 12px;
			font-size: 95%;
		}

		a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

	}

	/*.find-in-store--modal-store + */.find-in-store--modal-store {
		border-top: 1px solid rgb(216 216 216);
		margin-top: 16px;
		padding-top: 16px;
	}

	.text-subdued {
		opacity: .65;
	}

	.text-sm {
		font-size: 90%;
	}

}

find-in-store {

	.hide-when-available,
	.hide-when-not-available,
	.hide-when-loading,
	.hide-when-not-loading,
	.hide-when-error,
	.hide-when-not-error {
		display: block;
	}

	.show-when-available, 
	.show-when-not-available,
	.show-when-loading,
	.show-when-not-loading,
	.show-when-error,
	.show-when-not-error {
		display: none;
	}

	&[data-available="true"] .show-when-available { display: block; }
	&[data-available="false"] .show-when-not-available { display: block; }
	&[data-loading="true"] .show-when-loading { display: block; }
	&[data-loading="false"] .show-when-not-loading { display: block; }
	&[data-error="true"] .show-when-error { display: block; }
	&[data-error="false"] .show-when-not-error { display: block; }
	
	&[data-available="true"] .hide-when-available { display: none; }
	&[data-available="false"] .hide-when-not-available { display: none; }
	&[data-loading="true"] .hide-when-loading { display: none; }
	&[data-loading="false"] .hide-when-not-loading { display: none; }
	&[data-error="true"] .hide-when-error { display: none; }
	&[data-error="false"] .hide-when-not-error { display: none; }

}