#dupontCorian:has(#distributorMap[data-device=mobile]) nav.quicknav {
	display: none;
}
#distributorMap {
	--bg: rgb(77, 77, 77);
	--map-width: 60vw;
	--map-height: auto;
	--color-corian: #ed1c24;
	--color-region-1: #9c87bf;
	--color-region-2: #159bd7;
	--color-region-3: #8fd8f4;
	--color-region-4: #a9d043;
	--color-region-5: #f99d20;
	--color-region-6: #6f3190;
	--color-region-7: #108470;
	--color-region-8: #78ccc6;
	--color-region-9: #569542;
	--dot-size: 30px;
	--dot-hover-scale: 1.5;
	--border-stroke-width: 4;
	--data-box-height: 550px;
	--data-box-transition-speed: 350ms;
	--data-box-transition-delay: 550ms;
	--data-box-total-items: 8;
	position: relative;
	padding: 25px;
	box-sizing: border-box;
	height: var(--map-height);
	background-color: var(--bg);
	rect {
		will-change: transform;
	}
	& > p {
		color: white;
		font-size: large;
		margin-bottom: 15px;
		& > span {
			&:first-child {
				display: inline;
			}
			&:nth-child(2) {
				display: none;
			}
		}
	}
	&[data-device='mobile'] {
		height: auto;
		min-height: 100dvh;
		padding-bottom: 50px;
		& > p {
			& > span {
				&:first-child {
					display: none;
				}
				&:nth-child(2) {
					display: inline;
				}
			}
		}
		& .distributorMap__map {
			height: 100%;
			& > svg {
				& > g {
					pointer-events: none;
				}
			}
		}
	}
	& .distributorMap__map {
		position: relative;
		transform-origin: top left;
		box-sizing: border-box;
	}
	& .distributorMap__distributor {
		& > div {
			h2,
			h3 {
				text-transform: uppercase;
				text-wrap: balance;
				width: fit-content;
			}
			h3 {
				margin: 5px 0;
			}
			h2:not(:has(+ h3)),
			h2:has(+ h3),
			h2 + h3 {
				margin: 0;
				margin-bottom: 10px;
			}
			address {
				background-color: oklch(from black 0.95 c h);
				padding: 5px;
				margin: 5px 0;
				border-radius: 5px;
			}
			address:has(+ h2) {
				margin-bottom: 20px;
			}
			h2 + h2,
			h2 ~ h2 {
				margin-bottom: 0;
				font-size: large;
			}
			h2:has(+ h2) {
				margin-bottom: 25px;
			}
			p + h2 {
				margin-top: 20px;
			}
		}
	}
	& {
		&[data-device='desktop'] {
			& .distributorMap__distributor {
				&.mobile {
					display: none;
				}
				position: relative;
				display: grid;
				flex: 1;
				justify-content: center;
				&[data-open='true'] {
					& > div {
						display: flex;
					}
					& > h4 {
						display: none;
					}
				}
				&[data-open='false'] {
					& > div {
						display: none;
					}
					& > h4 {
						display: block;
					}
				}
				transition: opacity var(--data-box-transition-speed) ease;
				@starting-style {
					opacity: 0;
				}
				& > div {
					grid-column: 1;
					grid-row: 1;
					position: relative;
					justify-self: center;
					padding: 0 50px;
					background-color: white;
					width: 25vw;
					min-height: var(--data-box-height);
					border-radius: 10px;
					display: none;
					flex-direction: column;
					& > .number {
						position: relative;
						aspect-ratio: 1;
						background: var(--color-corian);
						width: 80px;
						border-radius: 50%;
						color: white;
						font-size: x-large;
						font-weight: bold;
						place-content: center;
						text-align: center;
						margin: -33px 0 30px 0;
						border: 10px solid var(--bg);
						transition: transform calc(var(--data-box-transition-speed) * 1.5) cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity var(--data-box-transition-speed) ease;
						@starting-style {
							transform: scale(0);
							opacity: 0;
						}
					}
					&::before {
						content: '';
						position: absolute;
						border-radius: 10px 10px 0 0;
						top: -10px;
						left: 0;
						display: block;
						width: 100%;
						height: 20px;
						background-color: var(--bg-color);
						transition: transform var(--data-box-transition-speed) ease;
						@starting-style {
							transform: scaleX(0);
						}
					}
					&::after {
						content: '';
						aspect-ratio: 1;
						width: 80px;
						position: absolute;
						bottom: -20px;
						left: -53px;
						background: #fff;
						mask-image: radial-gradient(circle at -3px 4px, rgba(0, 0, 0, 0) 49%, black 51%);
						display: none;
					}
					& > fieldset.regionBox {
						background-color: oklch(from var(--bg-color) calc(l * 1.3) c h);
						margin: 30px 0;
						border: none;
						padding: 20px;
						border-radius: 5px;
						& > legend {
							background: white;
							padding: 5px 10px;
							font-weight: bold;
							border-radius: 0 0 5px 5px;
						}
					}
					& :is(h2, h3, p, address, fieldset, div:not(.number)) {
						transition: transform 350ms ease, opacity 350ms ease;
						transition-delay: calc(sin(var(--delay) / var(--data-box-total-items) * 90deg) * var(--data-box-transition-delay));
						will-change: transform, opacity;
						@starting-style {
							transform: translateY(50px);
							opacity: 0;
						}
					}

					p {
						margin: 5px 0;
						&.button {
							margin: 15px 0;
							a {
								display: block;
								width: fit-content;
								background-color: var(--bg-color);
								border-radius: 3px;
								padding: 5px 20px;
								color: white;
								text-decoration: none;
								border: 1px solid oklch(from var(--bg-color) calc(l * 0.5) c h);
								transition: all var(--data-box-transition-speed) ease;
								& > span {
									display: block;
									transform: translateY(-1px);
								}
								&:hover {
									background: white;
									color: var(--bg-color);
								}
							}
						}
					}
					*:has(+ .regionBox) {
						flex: 1;
					}
					a[href] {
						color: var(--color-corian);
					}
				}
				& > h4 {
					position: relative;
					grid-column: 1;
					grid-row: 1;
					color: white;
					font-size: x-large;
					text-align: center;
					text-wrap: balance;
					max-width: 98%;
					text-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
					animation: fadeInOut 3s linear infinite reverse;
					& > sup {
						
						font-size: x-small;
					}
				}
				
			}
		}
		&[data-device='mobile'] {
			--map-width: 98vw;
			& > div {
				flex-direction: column;
				& .distributorMap__map {
					g#numbers {
						& > g {
							circle {
								r: 80px;
							}
							text {
								font-size: 100px;
								transform: translate(0, 30px);
							}
						}
					}
				}
				& .distributorMap__distributor {
					& > div {
						margin: 25px 0;
						details {
							border-radius: 5px;
							margin-bottom: 5px;
							border: 2px dashed transparent;
							background-color: oklch(from var(--bg-mobile-color) calc(l * 1.3) c h);
							&[open] {
								border-color: white;
								summary {
									& > code {
										rotate: 90deg;
									}
								}
							}
							&#_6 {
								& summary {
									& > p {
										color: rgba(255, 255, 255, 0.6);
									}
								}
							}
							summary {
								display: flex;
								align-items: center;
								gap: 10px;
								padding: 10px;
								background-color: var(--bg-mobile-color);
								position: relative;
								&:after {
									content:'';
									display:block;
									width: 45px;
									height: 100%;
									position:absolute;
									top:0;
									right:0;
									background-color: var(--bg-mobile-color);
									mix-blend-mode: multiply;
									
								}
								&::-webkit-details-marker {
									display: none;
								}
								& > p {
									flex: 1;
									order: 2;
									margin: 0;
									text-wrap: balance;
									& > legend {
										padding: 0;
										font-weight: bold;
									}
								}
								& > span {
									order: 1;
									display: block;
									aspect-ratio: 1;
									width: 50px;
									height: 50px;
									background-color: var(--color-corian);
									border-radius: 50%;
									border: 2px solid white;
									color: white;
									align-content: center;
									text-align: center;
									font-size: x-large;
								}
								& > code {
									order: 3;
									max-width: 24px;
									position: relative;
									z-index: 1;
									& > svg {
										max-width: 24px;
										path {
											stroke:white
										}
									}
								}
								& + div {
									padding: 25px;
									& fieldset {
										display: none;
									}
									& address {
										background-color: rgba(255, 255, 255, 0.6);
									}
									& p {
										margin: 5px 0;
										& a[href*='tel'] {
											color: var(--color-corian);
											display: block;
											padding: 5px 10px;
											margin: 4px 0;
											width: fit-content;
											border-radius: 5px;
											background-color: oklch(from var(--bg-mobile-color) calc(l * 0.5) c h);
											color: white;
											text-decoration: none;
										}
									}
									& p.button {
										padding: 10px 20px;
										margin: 20px 0 !important;
										border-radius: 5px;
										background-color: oklch(from var(--bg-mobile-color) calc(l * 0.5) c h);
										width: fit-content;
										& > a {
											display: block;
											width: fit-content;
											color: white;
											text-decoration: none;
										}
									}
								}
							}
						}
					}
					& > h4 {
						color: white;
						text-align:center;
						font-size: large;
						text-wrap: balance;
						animation: fadeInOut 3s linear infinite reverse;
						& > sup {
							
							font-size: x-small;
						}
					}
					&.desktop {
						display: none;
					}
					
				}
			}
		}
	}
	& svg {
		transform-box: fill-box;
		@layer map {
			width: var(--map-width);
			.border {
				fill: rgba(255, 255, 255, 0.122);
				pointer-events: none;
			}
		}
		@layer map-regions {
			#_1 {
				fill: var(--color-region-1);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-1);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_2 {
				fill: var(--color-region-2);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-2);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_3 {
				fill: var(--color-region-3);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-3);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_4 {
				fill: var(--color-region-4);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-4);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_5 {
				fill: var(--color-region-5);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-5);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_6 {
				fill: var(--color-region-6);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-6);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_7 {
				fill: var(--color-region-7);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-7);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_8 {
				fill: var(--color-region-8);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-8);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
			#_9 {
				fill: var(--color-region-9);
				&:hover,
				&:target {
					cursor: pointer;
					fill: url(#pattern-region-9);
					path {
						stroke-width: var(--border-stroke-width);
						stroke: #fff;
					}
				}
			}
		}
		@layer map-numbers {
			#numbers {
				& > g {
					pointer-events: none;
					& text {
						transform: translate(0, 10px);
					}
				}
				g.number-1 {
					transform: translate(850px, 850px);
				}
				g.number-2 {
					& > .a {
						transform: translate(1360px, 1150px);
					}
					& > .b {
						transform: translate(1960px, 1280px);
					}
				}
				g.number-3 {
					transform: translate(1790px, 910px);
				}
				g.number-4 {
					transform: translate(1730px, 1340px);
				}
				g.number-5 {
					transform: translate(1900px, 1100px);
				}
				g.number-6 {
					g.a {
						transform: translate(2140px, 850px);
					}
					g.b {
						transform: translate(1990px, 1540px);
					}
				}
				g.number-7 {
					transform: translate(2090px, 440px);
				}
				g.number-8 {
					transform: translate(2310px, 1740px);
				}
				g.number-9 {
					g.a {
						transform: translate(1160px, 500px);
					}
					g.b {
						transform: translate(650px, 1090px);
					}
					g.c {
						transform: translate(570px, 1660px);
					}
					g.d {
						transform: translate(1120px, 1820px);
					}
				}
			}
			& g[class*='number-'],
			g[class*='number-'] > g {
				transition: transform var(--data-box-transition-speed) ease;
			}
			&:has(#_1:hover) g.number-1 {
				transform: translate(850px, 850px) scale(var(--dot-hover-scale));
				& circle {
					stroke: white;
				}
			}
			&:has(#_2:hover) g.number-2 :is(.a, .b) {
				&.a {
					transform: translate(1360px, 1150px) scale(var(--dot-hover-scale));
				}
				&.b {
					transform: translate(1960px, 1280px) scale(var(--dot-hover-scale));
				}
				& circle {
					stroke: white;
				}
			}
			&:has(#_3:hover) g.number-3 {
				transform: translate(1790px, 910px) scale(var(--dot-hover-scale));
				& circle {
					stroke: white;
				}
			}
			&:has(#_4:hover) g.number-4 {
				transform: translate(1730px, 1340px) scale(var(--dot-hover-scale));
				& circle {
					stroke: white;
				}
			}
			&:has(#_5:hover) g.number-5 {
				transform: translate(1900px, 1100px) scale(var(--dot-hover-scale));
				& circle {
					stroke: white;
				}
			}
			&:has(#_6:hover) g.number-6 :is(.a, .b) {
				&.a {
					transform: translate(2140px, 850px) scale(var(--dot-hover-scale));
				}
				&.b {
					transform: translate(1990px, 1540px) scale(var(--dot-hover-scale));
				}
				& circle {
					stroke: white;
				}
			}
			&:has(#_7:hover) g.number-7 {
				transform: translate(2090px, 440px) scale(var(--dot-hover-scale));
				& circle {
					stroke: white;
				}
			}
			&:has(#_8:hover) g.number-8 {
				transform: translate(2310px, 1740px) scale(var(--dot-hover-scale));
				& circle {
					stroke: white;
				}
			}
			&:has(#_9:hover) g.number-9 :is(.a, .b, .c, .d) {
				&.a {
					transform: translate(1160px, 500px) scale(var(--dot-hover-scale));
				}
				&.b {
					transform: translate(650px, 1090px) scale(var(--dot-hover-scale));
				}
				&.c {
					transform: translate(570px, 1660px) scale(var(--dot-hover-scale));
				}
				&.d {
					transform: translate(1120px, 1820px) scale(var(--dot-hover-scale));
				}
				& circle {
					stroke: white;
				}
			}
		}
	}
}
@keyframes fadeInOut {
	50% {
		opacity: 0.3;
	}
}