/* Country page (inc/landkaart.php, assets/js/landkaart.js): the small map beside the name and the region
   buttons under the text. Category and tag pages use the buttons too, for their countries. */

/* The intro wraps: text and map on one row, the buttons on their own row under them. */
.iew-house-intro.is-country,
.iew-house-intro.is-product_cat,
.iew-house-intro.is-product_tag { flex-wrap: wrap; row-gap: 4px; }
.iew-house-intro.is-country .iew-house-intro__text,
.iew-house-intro.is-product_cat .iew-house-intro__text,
.iew-house-intro.is-product_tag .iew-house-intro__text { flex: 1 1 0; }

/* ---------- Small map ---------- */
.iew-landmap { width: 200px; }
.iew-landmap svg { display: block; width: 100%; height: auto; max-height: 220px; }
.iew-landmap__land { fill: var(--iew-paper); stroke: var(--iew-olive-500); stroke-width: 1.6; stroke-linejoin: round; }
.iew-landmap__zone path { fill: var(--iew-gold-100); stroke: var(--iew-gold-600); stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; transition: fill var(--iew-dur-fast) var(--iew-ease); }
.iew-landmap__zone:hover path,
.iew-landmap__zone.is-hot path { fill: var(--iew-gold-400); }
.iew-landmap__zone.is-active path { fill: var(--iew-gold-500); stroke-width: 2.4; }
.iew-landmap__frame { fill: none; stroke: var(--iew-ink-300); stroke-width: 2; }

/* ---------- Region buttons ---------- */
.iew-chips { flex: 0 0 100%; margin: 14px 0 4px; font-family: var(--iew-font-sans); }
.iew-chips__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.iew-chips__list li { margin: 0; }
.iew-chips:not(.is-open) .iew-chips__list li.is-extra:not(.is-pinned) { display: none; }
.iew-house-intro .iew-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 14px; box-sizing: border-box;
	border: 1px solid var(--iew-ink-300); border-radius: var(--iew-radius-pill); background: var(--iew-surface); box-shadow: none; cursor: pointer;
	font-family: var(--iew-font-sans); font-size: 14px; font-weight: var(--iew-w-semi); line-height: 1.2; letter-spacing: normal; text-transform: none;
	color: var(--iew-ink-900); text-decoration: none; white-space: nowrap;
	transition: background-color var(--iew-dur-fast) var(--iew-ease), border-color var(--iew-dur-fast) var(--iew-ease), color var(--iew-dur-fast) var(--iew-ease);
}
.iew-house-intro .iew-chip span { font-weight: var(--iew-w-regular); color: var(--iew-ink-500); font-variant-numeric: tabular-nums; }
.iew-house-intro .iew-chip:hover,
.iew-house-intro .iew-chip.is-hot { border-color: var(--iew-olive-500); background: var(--iew-paper-2); color: var(--iew-ink-900); }
.iew-house-intro .iew-chip[aria-current="true"] { border-color: var(--iew-olive-700); background: var(--iew-olive-700); color: var(--iew-paper); }
.iew-house-intro .iew-chip[aria-current="true"] span { color: var(--iew-olive-200); }
.iew-house-intro .iew-chip.is-more { border-style: dashed; color: var(--iew-olive-700); }
.iew-house-intro .iew-chip:focus { outline: none; }
.iew-house-intro .iew-chip:focus-visible { outline: 2px solid var(--iew-gold-500); outline-offset: 2px; }
/* While the wine list loads after a choice. */
.iew-chips.is-busy .iew-chip[aria-current="true"] { opacity: 0.75; }

@media (max-width: 767px) {
	.iew-house-intro.is-country .iew-house-intro__text,
	.iew-house-intro.is-product_cat .iew-house-intro__text,
	.iew-house-intro.is-product_tag .iew-house-intro__text { flex: none; }
	/* Phones: the map small above the name, as on a region page. */
	.iew-landmap { order: -1; width: 104px; }
	.iew-landmap svg { max-height: 120px; }
	.iew-landmap__zone path { cursor: default; }
	.iew-chips { align-self: stretch; width: 100%; margin-top: 10px; }
}
/* Touch screens: one row you swipe sideways instead of a block of buttons. With a mouse (a narrow
   desktop window) there is no swipe and no scrollbar, so the buttons wrap with "+ meer" as on desktop. */
@media (max-width: 767px) and (pointer: coarse) {
	.iew-chips__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 4px; scroll-padding: 0 20px; }
	.iew-chips__list::-webkit-scrollbar { display: none; }
	.iew-chips:not(.is-open) .iew-chips__list li.is-extra:not(.is-pinned) { display: list-item; }
	.iew-chips__more-item { display: none; }
}