/**
 * Villages Map block (blocks/content/villages-map.php)
 *
 * "Village by village": a full-bleed shaded-relief map of southern Mexico with
 * the Oaxaca boundary drawn on top and village pins, plus a centered heading and
 * a dark-green village card carousel floating over it.
 *
 * The relief <img>, the boundary <svg> and the pins all live on the SAME
 * 3024x2439 canvas (.dm-vmap__canvas), so they scale and move as one locked
 * unit and can never drift apart.
 */

.dm-vmap {
	position: relative;
	background: var(--dm-bg-default-primary);
	overflow: hidden;
	isolation: isolate; /* keep the relief's multiply blend inside this section */
	padding-block: clamp(2.5rem, 8vw, 3.5rem);
	/* Mobile base: flex column (map + cards). The heading is pulled out of flow and
	   overlaid on the map in the max-width:1023 block below. The desktop grid
	   (min-width:1024) overrides this display for the right-floating overlay. */
	display: flex;
	flex-direction: column;
}

/* ---- Map stage ------------------------------------------------------ */
/* Mobile: a framed window that zooms into the lower-left (the Oaxaca outline).
   Both layers sit inside .dm-vmap__canvas, so moving/scaling the canvas keeps
   the relief and the outline perfectly aligned - only the framing changes. */
.dm-vmap__stage {
	position: relative;
	width: 100%;
	margin-top: clamp(1.5rem, 6vw, 2.5rem);
	/* Taller than the design canvas so the full Oaxaca outline fits under the
	   overlaid heading without clipping the southern coast (mobile). */
	aspect-ratio: 4 / 5.6;
	overflow: hidden;
}

.dm-vmap__canvas {
	position: absolute;
	/* Frame the outline lower in the stage so the transparent heading can float
	   over the empty relief above it. Tunable: less negative = outline sits lower
	   (more headroom for the heading); more negative = outline rises up. */
	top: -5%;
	left: -9%;
	width: 200%;
	aspect-ratio: 3024 / 2439;
}

.dm-vmap__relief,
.dm-vmap__vector {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dm-vmap__relief {
	object-fit: cover;
	mix-blend-mode: multiply;
	opacity: 0.55; /* tunable: relief strength over the beige */
	pointer-events: none;
}

.dm-vmap__vector {
	overflow: visible; /* let the wobble filter bleed slightly past the box */
	pointer-events: none;
}

/* ---- Boundary outlines --------------------------------------------- */
/* "Pencil draw": GSAP owns the reveal (see assets/js/villages-map.js). It seeds
   each outline's stroke-dasharray/offset from getTotalLength, then tweens the
   offset to 0 (staggered - lower outline first, then upper) the first time the
   block enters the viewport. No CSS transition here, so GSAP's per-frame writes
   are not fought by the browser. */
.dm-vmap__border {
	fill: none;
	stroke: var(--color-forest);
	stroke-width: 6;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* ---- Pins ----------------------------------------------------------- */
/* Two states straight from the Figma dots (button.svg / button (1).svg):
   - inactive: a solid dark-green dot
   - active:   the dot + the light ring that already ships inside the active
     dot SVG (a 40%-opacity stroke). It just fades in - no expanding pulse. */
.dm-vmap__pin {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.dm-vmap.is-drawn .dm-vmap__pin {
	opacity: 1;
}

/* The dot itself */
.dm-vmap__pin-dot {
	fill: var(--dm-fg-default-primary);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.5);
	transition: transform 0.4s ease;
}

.dm-vmap.is-drawn .dm-vmap__pin-dot {
	transform: scale(1);
}

.dm-vmap__pin.is-active .dm-vmap__pin-dot {
	transform: scale(1.06);
	mask: none; /* active dot stays solid; inactive ones are rings */
}

/* Soft "radar" rings on the active dot: a feathered ring (radial-gradient fill,
   so its edges fade out) that grows from the centre and fades as it expands, on
   a loop. Two rings, offset in time, keep the pulse continuous. */
.dm-vmap__pin-ping {
	fill: url(#dm-vmap-ping);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.2);
}

.dm-vmap.is-drawn .dm-vmap__pin.is-active .dm-vmap__pin-ping {
	animation: dm-vmap-radar 1.6s ease-out infinite;
}

.dm-vmap.is-drawn .dm-vmap__pin.is-active .dm-vmap__pin-ping--2 {
	animation-delay: 0.8s;
}

@keyframes dm-vmap-radar {
	0% {
		transform: scale(0.2);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	55% {
		opacity: 0.75;
	}
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

/* ---- Heading -------------------------------------------------------- */
.dm-vmap__head {
	position: relative;
	z-index: 3;
	text-align: center;
	padding-inline: 20px;
}

.dm-vmap__heading {
	margin: 0;
	color: var(--dm-fg-default-primary);
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(2.25rem, 4vw, 3.25rem);         /* Figma h2: 36px mobile -> 52px caps */
	line-height: 1.1;                                /* 110% -> 57.2px */
	letter-spacing: -0.02em;                         /* = -1.04px @ 52px */
}

.dm-vmap__heading em {
	font-style: italic;
}

.dm-vmap__intro {
	margin: 1.9rem auto 0;
	max-width: 33rem;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: clamp(18px, 1.6vw, 20px); /* Figma h6: 18px mobile -> 20px desktop */
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}

/* ---- Card carousel -------------------------------------------------- */
/* Wrapper carries the site .container width so the card lines up with the rest
   of the page instead of the raw viewport edge. */
.dm-vmap__cards-wrap {
	position: relative;
	z-index: 3;
	margin-top: clamp(2.5rem, 8vw, 3.5rem);
	padding-inline: 16px;
}

.dm-vmap__cards {
	position: relative;
	background: var(--dm-bg-default-tertiary);
	/* Square top-left so the card's left edge lines up flush with the "Villages"
	   tab above it - the left-side rounding is carried by the tab, not the card. */
	border-radius: 0 6px 6px 6px;
	overflow: visible; /* let the villages dropdown + tab escape the card */
	color: var(--color-cream);
	box-shadow: 0 30px 60px color-mix(in srgb, var(--color-forest) 22%, transparent);
	/* Even green frame around the media on top + sides (the "Villages" tab sits
	   fully above the card). Tightened on mobile in the max-width:1023 block. */
	padding: 1.6rem 1.6rem 0;
}

/* Round the media corners itself since the card no longer clips. */
/* The clip box reaches 4px past the card on each side and every slide pads
   4px back in, so a focused button's ring (2px + 2px offset) isn't cut off
   while neighbouring slides still can't peek in. Slides move by %, so the
   carousel maths is unaffected. */
.dm-vmap__viewport {
	overflow: hidden;
	margin-inline: -4px;
}

/* ---- Villages menu (the "Villages" tab -> dropdown) ----------------- */
.dm-vmap__menu {
	position: absolute;
	top: 0;
	left: 0;         /* flush with the card's left edge - reads as a folder tab */
	/* Lift the whole tab fully above the card so it sits on top of the card's
	   top edge. Overlap by 1px so no hairline seam shows between the two. */
	transform: translateY(calc(-100% + 1px));
	z-index: 6;
}

.dm-vmap__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border: 0;
	/* Round only the top corners so the bottom edge fuses into the card body. */
	border-radius: 5px 5px 0 0;
	background: var(--dm-bg-default-tertiary);   /* solid green - merges with the card body */
	color: var(--color-cream);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 15px;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease;
}

.dm-vmap__tag:hover,
.dm-vmap__tag:focus-visible {
	background: var(--dm-bg-default-tertiary);
}

/* Hamburger lines morph toward an "open" look on toggle. */
.dm-vmap__tag-icon {
	transition: transform 0.3s ease;
}

.dm-vmap__menu.is-open .dm-vmap__tag-icon {
	transform: rotate(90deg);
}

.dm-vmap__villages {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 230px;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--dm-bg-default-tertiary);
	border: 1px solid color-mix(in srgb, var(--color-cream) 14%, transparent);
	border-radius: 12px;
	box-shadow: 0 24px 48px color-mix(in srgb, var(--dm-ext-forest-deep) 40%, transparent);
	opacity: 0;
	transform: translateY(-10px) scale(0.98);
	transform-origin: top left;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.dm-vmap__menu.is-open .dm-vmap__villages {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.dm-vmap__village {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--color-cream);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	/* staggered reveal when the menu opens */
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}

.dm-vmap__menu.is-open .dm-vmap__village {
	opacity: 1;
	transform: none;
}

.dm-vmap__menu.is-open .dm-vmap__village:nth-child(2) { transition-delay: 0.03s; }
.dm-vmap__menu.is-open .dm-vmap__village:nth-child(3) { transition-delay: 0.06s; }
.dm-vmap__menu.is-open .dm-vmap__village:nth-child(4) { transition-delay: 0.09s; }
.dm-vmap__menu.is-open .dm-vmap__village:nth-child(5) { transition-delay: 0.12s; }
.dm-vmap__menu.is-open .dm-vmap__village:nth-child(6) { transition-delay: 0.15s; }
.dm-vmap__menu.is-open .dm-vmap__village:nth-child(7) { transition-delay: 0.18s; }
.dm-vmap__menu.is-open .dm-vmap__village:nth-child(8) { transition-delay: 0.21s; }

.dm-vmap__village:hover,
.dm-vmap__village:focus-visible {
	background: color-mix(in srgb, var(--color-cream) 12%, transparent);
}

.dm-vmap__village.is-active {
	color: var(--color-sun, var(--dm-fg-accent-yellow));
	background: color-mix(in srgb, var(--color-sun) 12%, transparent);
}

.dm-vmap__track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.dm-vmap__card {
	flex: 0 0 100%;
	min-width: 100%;
	box-sizing: border-box;
	padding-inline: 4px;
	display: flex;
	flex-direction: column;
}

.dm-vmap__card-media {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 6px;
}

.dm-vmap__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dm-vmap__card-body {
	/* No side padding - the card frame (.dm-vmap__cards) supplies the horizontal
	   inset now; keep only top/bottom spacing. */
	padding: clamp(1.25rem, 2.2vw, 1.9rem) 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.dm-vmap__card-title {
	margin: 0;
	color: var(--color-sun, var(--dm-fg-accent-yellow));                /* Figma: fg-accent-yellow */
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(1.625rem, 2.2vw, 1.9rem);       /* Figma h4: 26px mobile */
	line-height: 1.2;                                /* 120% -> 31.2px */
}

.dm-vmap__card-desc {
	margin: 0;
	max-width: 34rem;
	color: var(--dm-fg-default-white);                                     /* Figma: fg-default-white */
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;                                 /* Figma body/md/regular */
	line-height: 1.4;                                /* 140% -> 22.4px */
	/* Full village text, not a 34-word cut. Capped at ~8 lines with its own
	   scroll: slides stretch to the tallest one, so one long village would
	   otherwise blow every card past the map. */
	max-height: calc(1.4em * 8);
	overflow-y: auto;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--dm-fg-default-white) 40%, transparent) transparent;
}

.dm-vmap__card-actions {
	margin-top: 1.15rem;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	flex-wrap: wrap;
}

.dm-vmap__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: var(--dm-bg-default-white);
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;                                 /* Figma body/md/regular */
	text-decoration: none;
}

.dm-vmap__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dm-fg-default-white);                                     /* Figma: fg-default-white */
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;                                 /* Figma body/md/regular */
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--color-cream) 50%, transparent);
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.dm-vmap__link:hover,
.dm-vmap__link:focus-visible {
	border-color: var(--color-cream);
}

/* ---- Arrows --------------------------------------------------------- */
.dm-vmap__nav {
	position: absolute;
	right: clamp(1.1rem, 2vw, 1.75rem);
	bottom: clamp(1.1rem, 2vw, 1.75rem);
	display: flex;
	gap: 10px;
	z-index: 3;
}

.dm-vmap__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--color-cream) 50%, transparent);
	background: transparent;
	color: var(--color-cream);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dm-vmap__arrow:hover,
.dm-vmap__arrow:focus-visible {
	background: var(--color-cream);
	color: var(--dm-fg-default-primary);
	border-color: var(--color-cream);
}

/* ---- Mobile overlay ------------------------------------------------- */
/* The relief map starts at the top of the section, the heading + intro float
   TRANSPARENTLY over its near-empty upper area (relief shows through behind the
   text), and the village cards follow below the map. This block MUST come after
   the base .dm-vmap__head / .dm-vmap__stage rules above so it wins on source
   order (media queries add no specificity). */
@media (max-width: 1023px) {
	/* No top padding: the relief starts flush under the hero (map "starts at top"). */
	.dm-vmap {
		padding-top: 0;
	}

	.dm-vmap__stage {
		order: 1;        /* map first, at the top */
		margin-top: 0;
	}

	.dm-vmap__cards-wrap {
		order: 2;        /* cards below the map */
	}

	/* Tighter green frame around the card content on mobile. */
	.dm-vmap__cards {
		padding: 1.15rem 1.15rem 0;
	}

	/* More breathing room above/below the card text on mobile, with extra room at
	   the bottom so the (bottom-anchored) prev/next arrows clear the buttons. */
	.dm-vmap__card-body {
		padding: 2rem 0 4.5rem;
	}

	/* Larger prev/next arrows on mobile. */
	.dm-vmap__arrow {
		width: 66px;
		height: 66px;
	}

	.dm-vmap__arrow svg {
		width: 18px;
		height: 18px;
	}

	/* Heading pulled out of flow and overlaid over the top of the map. */
	.dm-vmap__head {
		position: absolute;
		top: clamp(4rem, 11vw, 5.25rem);
		left: 0;
		right: 0;
		z-index: 3;
	}
}

/* ---- Desktop overlay ------------------------------------------------ */
/* Stack the stage, heading and card in one grid cell so they overlap: the
   relief fills the section, the heading floats top-center, the card floats
   right. The grid row grows to the tallest child, so the card never clips. */
@media (min-width: 1024px) {
	.dm-vmap {
		display: grid;
		grid-template-columns: 1fr;
		/* Two rows: the head takes what it needs, the card gets the rest.
		   All three used to share one row, so the card - vertically centred over
		   a stage whose height shrinks with the viewport (aspect-ratio 16/11.5) -
		   climbed into the heading as the window narrowed, overlapping it below
		   about 1590px. The stage still spans both rows, so the card goes on
		   floating over the map; it just centres in the space under the head
		   rather than over the whole section. */
		grid-template-rows: auto 1fr;
		row-gap: 1.5rem;
		padding-block: 0;
		/* Drop the section's overflow clip on desktop: an ancestor with
		   overflow:hidden becomes the scroll container and would freeze the
		   sticky card. isolation:isolate still contains the relief's blend. */
		overflow: visible;
	}

	/* The map sits behind both rows. */
	.dm-vmap__stage {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	.dm-vmap__head {
		grid-column: 1;
		grid-row: 1;
	}

	.dm-vmap__cards-wrap {
		grid-column: 1;
		grid-row: 2;
	}

	/* Full-bleed, but cropped shorter. The map's meaningful content (Oaxaca
	   outline + all village pins) lives in the lower ~55-80% of the canvas, so
	   the whole empty relief above it is dead scroll height. We cap the stage to
	   a wider aspect ratio and anchor the full-width canvas to the BOTTOM, which
	   clips only that empty top band. Everything (relief, boundary, pins) still
	   shares the canvas, so alignment is untouched. Tunable: raise the ratio to
	   crop more (shorter), lower it toward 3024/2439 to show the full map. */
	.dm-vmap__stage {
		margin: 0;
		aspect-ratio: 16 / 11.5;   /* height ~72% of width (between the ~56% crop and the ~81% full map) */
		overflow: hidden;
	}

	.dm-vmap__canvas {
		position: absolute;
		top: auto;
		bottom: 0;              /* keep Oaxaca + pins; crop the empty top */
		left: 0;
		width: 100%;
	}

	.dm-vmap__head {
		align-self: start;
		justify-self: center;
		margin-top: clamp(5rem, 6.2vw, 7.5rem);
	}

	/* Card sits inside the site container, right-aligned and vertically centered
	   on the map. The wrapper itself ignores pointer events so the map pins under
	   it stay clickable; only the card captures them. */
	.dm-vmap__cards-wrap {
		/* Stretch to the full map height so the card has room to travel and
		   stick as the section scrolls past. */
		align-self: stretch;
		justify-self: center; /* respect the .container max-width instead of stretching */
		width: 100%;
		margin-top: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center; /* card starts vertically centered on the map */
		/* Bottom padding shrinks the wrap's content box, which is what bounds the
		   sticky card - so the card stops this far ABOVE the section end instead of
		   scrolling flush to the bottom. */
		padding-bottom: clamp(3rem, 12vh, 8rem);
		pointer-events: none;
	}

	.dm-vmap__cards {
		/* Sticky (desktop only): starts centered, then pins near the top while
		   the rest of the section scrolls by. The site header is sticky and
		   reveals on scroll-up, so offset the card below it (--dm-header-h is set
		   by villages-map.js). When the header is hidden on scroll-down, the body
		   gets .dm-header-off and the card slides up to a smaller gap. The
		   transition matches the header's 250ms reveal so they move together. */
		position: sticky;
		/* +3.25rem leaves room for the "Villages" tab (which sits ABOVE the card) to
		   clear the sticky header instead of being clipped under it. */
		top: calc(var(--dm-header-h, 6rem) + 3.25rem);
		width: min(42%, 560px);
		pointer-events: auto;
		transition: top 250ms ease-in-out;
	}

	body.dm-header-off .dm-vmap__cards {
		top: 3.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-vmap__border,
	.dm-vmap__pin,
	.dm-vmap__pin-dot {
		transition: none;
	}
	/* No sweep - just show one static soft ring on the active dot. */
	.dm-vmap__pin.is-active .dm-vmap__pin-ping {
		animation: none;
		opacity: 1;
		transform: scale(1.1);
	}
	.dm-vmap__pin-ping--2 {
		display: none;
	}
	.dm-vmap__track {
		transition: none;
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "All Villages - Small Desktop" > interactive-map-section (2023:28739):
 *   py-120, 80 between the header and the map; header 52 heading, 32 to a
 *   720-wide 20px intro.
 *   Card (2023:28757) 514 wide, top-aligned on the map: a 48px "Villages" tab
 *   (px-24, 16px label, 20 icon, 4px top corners), then p-24 with 32 between
 *   the 552/322 image, the copy and the controls; 32px yellow title, 16 to
 *   the description, 16 to a 48px white pill + "See Products" link 24 apart;
 *   48px arrows 16 apart, bottom-right.
 * Section height on the board is 1075 at 1280 wide, so the stage takes that
 * ratio. Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-vmap {
		row-gap: 80px;
	}

	.dm-vmap__stage {
		aspect-ratio: 1280 / 1075;
	}

	/* The relief canvas (3024 x 2439) at full width is only 1032 tall at 1280,
	   shorter than the 1075 stage, so its top edge showed as a hard line with
	   bare cream above it. Widen it until it covers the stage height:
	   (1075/1280) / (2439/3024) = 104.1%. The stage ratio is fixed in this
	   range, so the factor holds at every width. It stays bottom-anchored and
	   the extra width clips off the right; relief, outline and pins share the
	   canvas, so they scale together. */
	.dm-vmap__canvas {
		width: 104.2%;
	}

	.dm-vmap__head {
		margin-top: 120px;
		padding-inline: 0;
	}

	.dm-vmap__intro {
		margin-top: 32px;
		max-width: 720px;
		font-size: 20px;
	}

	/* The capped 1080 container already provides Figma's 100px gutter. The
	   card hangs from the top of the map area and stops 120 above the end. */
	.dm-vmap__cards-wrap {
		padding-inline: 0;
		padding-bottom: 120px;
		align-items: flex-start;
	}

	.dm-vmap__cards {
		width: 514px;
		padding: 24px 24px 0;
		border-radius: 0 4px 4px 4px;
	}

	.dm-vmap__tag {
		height: 48px;
		padding: 0 24px;
		gap: 8px;
		border-radius: 4px 4px 0 0;
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: 0;
	}

	.dm-vmap__tag-icon {
		width: 20px;
		height: 20px;
	}

	.dm-vmap__card-media {
		aspect-ratio: 552 / 322;
		border-radius: 4px;
	}

	/* 32 above the copy; below it 32 + the 48 arrows + the card's 24. */
	.dm-vmap__card-body {
		padding: 32px 0 104px;
		gap: 16px;
	}

	.dm-vmap__card-title {
		font-size: 32px;                /* heading/h4 */
	}

	.dm-vmap__card-desc {
		max-width: none;
	}

	.dm-vmap__card-actions {
		margin-top: 16px;               /* + the body's 16 gap = 32 */
		gap: 24px;
	}

	.dm-vmap__btn {
		height: 48px;
		padding: 0 24px;
	}

	.dm-vmap__link {
		gap: 4px;
		line-height: 1.4;
	}

	.dm-vmap__nav {
		right: 24px;
		bottom: 24px;
		gap: 16px;
	}

	.dm-vmap__arrow {
		width: 48px;
		height: 48px;
		border-color: var(--dm-fg-default-white);   /* border/default/light-strong */
	}
}