.currency-select {
	position: relative;
	margin-left: 18px;
	font-size: 13px;
	font-weight: 700;
}

.currency-select__button {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 76px;
	padding: 8px 10px;
	border: 1px solid #cfd6dc;
	border-radius: 6px;
	background: #fff;
	color: #26313b;
	font: inherit;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.currency-select__button:hover,
.currency-select.is-open .currency-select__button {
	border-color: rgb(var(--main-color));
	background: #f7fafc;
}

.currency-select__button svg {
	fill: currentColor;
	transition: transform .18s ease;
}

.currency-select.is-open .currency-select__button svg {
	transform: rotate(180deg);
}

.currency-select__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 7px);
	right: 0;
	display: none;
	width: 180px;
	padding: 5px;
	border: 1px solid #dce3e8;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 26px rgba(30, 44, 57, .16);
}

.currency-select.is-open .currency-select__menu {
	display: block;
}

/* The menu is still reachable while the button has focus if an old cached
   JavaScript file is temporarily served by the browser. */
.currency-select:focus-within .currency-select__menu {
	display: block;
}

.currency-select__menu button {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: #26313b;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.currency-select__menu button:hover,
.currency-select__menu button.is-active {
	background: rgba(var(--main-color), .10);
	color: rgb(var(--main-color));
}

.currency-select__menu small {
	margin-left: 10px;
	color: #7f8b96;
	font-size: 10px;
	font-weight: 500;
}

.header__currency-mobile {
	display: none;
}

/* Korean prices are longer than the original USD labels. Keep the full
   amount visible instead of wrapping the currency code onto a second line. */
.catalog-card__info_buy-btn {
	width: auto;
	min-width: 80px;
	padding: 0 10px;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1;
}

@media (max-width: 899px) {
	.header__currency-mobile {
		display: block;
		margin-left: auto;
		margin-right: 13px;
	}

	.header__currency-mobile .currency-select {
		margin-left: 0;
	}
}