/* Compact global honeycomb for [kitupgo_cards_map]. */
.kitupgo-cards-map {
	--kug-map-size: clamp(58px, 6vw, 78px);
	--kug-map-gap: 8px;
	width: 100%;
	padding: 10px 0 28px;
}

.kitupgo-cards-map__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 0 0 28px;
	font-size: 13px;
	color: #30343b;
}
.kitupgo-cards-map__legend span { display: inline-flex; align-items: center; gap: 9px; }
.kitupgo-cards-map__legend i {
	width: 18px;
	height: 18px;
	clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}
.kitupgo-cards-map__legend .is-action-done,
.kitupgo-cards-map__hex.is-action-done { background: var(--kug-state-action-done, #a9c77d); color: var(--kug-state-action-done-ink, #111); }
.kitupgo-cards-map__hex.is-action-done { --kug-hex-fill: var(--kug-state-action-done, #a9c77d); --kug-hex-border-color: var(--kug-state-action-done-border-color, #17191b); --kug-hex-border-width: var(--kug-state-action-done-border-width, 0px); }
.kitupgo-cards-map__legend .is-action-todo,
.kitupgo-cards-map__hex.is-action-todo { background: var(--kug-state-action-todo, #f7c75f); color: var(--kug-state-action-todo-ink, #111); }
.kitupgo-cards-map__hex.is-action-todo { --kug-hex-fill: var(--kug-state-action-todo, #f7c75f); --kug-hex-border-color: var(--kug-state-action-todo-border-color, #17191b); --kug-hex-border-width: var(--kug-state-action-todo-border-width, 0px); }
.kitupgo-cards-map__legend .is-shopping-todo,
.kitupgo-cards-map__hex.is-shopping-todo { background: var(--kug-state-shopping-todo, #bc91cc); color: var(--kug-state-shopping-todo-ink, #111); }
.kitupgo-cards-map__hex.is-shopping-todo { --kug-hex-fill: var(--kug-state-shopping-todo, #bc91cc); --kug-hex-border-color: var(--kug-state-shopping-todo-border-color, #17191b); --kug-hex-border-width: var(--kug-state-shopping-todo-border-width, 0px); }
.kitupgo-cards-map__legend .is-shopping-done,
.kitupgo-cards-map__hex.is-shopping-done { background: var(--kug-state-shopping-done, #80b8ae); color: var(--kug-state-shopping-done-ink, #111); }
.kitupgo-cards-map__hex.is-shopping-done { --kug-hex-fill: var(--kug-state-shopping-done, #80b8ae); --kug-hex-border-color: var(--kug-state-shopping-done-border-color, #17191b); --kug-hex-border-width: var(--kug-state-shopping-done-border-width, 0px); }
.kitupgo-cards-map__legend .is-category,
.kitupgo-cards-map__hex.is-category { background: var(--kug-state-category, #17191b); color: var(--kug-state-category-ink, #fff); }
.kitupgo-cards-map__hex.is-category { --kug-hex-fill: var(--kug-state-category, #17191b); --kug-hex-border-color: var(--kug-state-category-border-color, #17191b); --kug-hex-border-width: var(--kug-state-category-border-width, 0px); }

.kitupgo-cards-map__groups {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kug-map-gap);
	position: relative;
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
}
.kitupgo-cards-map__groups.is-laid-out { display: block; }
.kitupgo-cards-map__cell {
	width: var(--kug-map-size);
	height: calc(var(--kug-map-size) * .88);
}
.kitupgo-cards-map__groups.is-laid-out .kitupgo-cards-map__cell { position: absolute; }

.kitupgo-cards-map__hex {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px;
	border: 0;
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
	color: #fff;
	background: var(--kug-hex-border-color, transparent) !important;
	filter: drop-shadow(0 4px 6px rgba(32, 38, 44, .14));
	transition: transform .18s ease, filter .18s ease;
}
.kitupgo-cards-map__hex::before {
	position: absolute;
	inset: var(--kug-hex-border-width, 0px);
	background: var(--kug-hex-fill, transparent);
	clip-path: inherit;
	content: "";
}
.kitupgo-cards-map button.kitupgo-cards-map__hex { cursor: pointer; }
.kitupgo-cards-map button.kitupgo-cards-map__hex:hover,
.kitupgo-cards-map button.kitupgo-cards-map__hex:focus-visible {
	transform: translateY(-2px) scale(1.045);
	filter: drop-shadow(0 7px 9px rgba(32, 38, 44, .24));
	outline: none;
}
.kitupgo-cards-map__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	font-size: 24px;
	line-height: 1;
}
.kitupgo-cards-map__hex:not(.is-category) .kitupgo-cards-map__icon {
	width: 38px;
	height: 38px;
	font-size: 29px;
}
.kitupgo-cards-map__icon img { width: 100%; height: 100%; object-fit: contain; }
.kitupgo-cards-map__hex.is-action-todo .kitupgo-cards-map__icon img { filter: var(--kug-state-action-todo-filter, brightness(0)); }
.kitupgo-cards-map__hex.is-action-done .kitupgo-cards-map__icon img { filter: var(--kug-state-action-done-filter, brightness(0)); }
.kitupgo-cards-map__hex.is-shopping-todo .kitupgo-cards-map__icon img { filter: var(--kug-state-shopping-todo-filter, brightness(0)); }
.kitupgo-cards-map__hex.is-shopping-done .kitupgo-cards-map__icon img { filter: var(--kug-state-shopping-done-filter, brightness(0)); }
.kitupgo-cards-map__hex.is-category .kitupgo-cards-map__icon img { filter: var(--kug-state-category-filter, brightness(0) invert(1)); }
.kitupgo-cards-map__icon i { font-size: inherit; color: inherit; }
.kitupgo-cards-map__empty { text-align: center; color: #687078; }

@media (max-width: 600px) {
	.kitupgo-cards-map { --kug-map-size: clamp(62px, 18.5vw, 72px); --kug-map-gap: 7px; }
	.kitupgo-cards-map__legend { justify-content: flex-start; gap: 10px 16px; }
	.kitupgo-cards-map__legend span { width: calc(50% - 8px); }
	.kitupgo-cards-map__hex:not(.is-category) .kitupgo-cards-map__icon { width: 40px; height: 40px; }
	.kitupgo-cards-map__hex.is-category .kitupgo-cards-map__icon { width: 36px; height: 36px; }
}

@media (min-width: 601px) and (max-width: 900px) {
	.kitupgo-cards-map { --kug-map-size: 68px; }
}